给网页加一个全屏转场动画 HTML JS

导读:本篇文章讲解 给网页加一个全屏转场动画 HTML JS,希望对大家有帮助,欢迎收藏,转发!站点地址:www.bmabk.com

网上线程的专场都是单调的加载loading转圈圈,以及一个局部遮罩层,感觉不好看

想着自己用延时器写一个好看的转场动画效果好了

代码可直接复制使用

实际效果浏览 

shen’s Home给网页加一个全屏转场动画 HTML JShttp://www.longsong.xyz:5000/?username0=shen&username1=123456&username2=&username3=

给网页加一个全屏转场动画 HTML JS

 代码如下:

//一个跳转界面,加载时自动播放
<div id="bg" src="./img/kelis.gif"
     style="display:block;background-color: #ccc;width: 100%;position:absolute;height: 125%;opacity: 0.85;z-index: 1;">
    <img id="shen" src="./img/kelis.gif" href="javascript:closeDiv()" style="width:100%;height:100%;position:absolute">
</div>
//定时器设置div不可见
<script language=javascript style="background:#000000">
    var timerid = setTimeout(function () {
        document.getElementById('bg').style.display = 'none';

    }, 4000)

</script>

js 定时器介绍

分类 编程技术

js 定时器有以下两个方法:

  • setInterval() :按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
  • setTimeout() :在指定的毫秒数后调用函数或计算表达式。

setInterval()

语法

setInterval(code,millisec,lang)
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。
lang 可选。 JScript | VBScript | JavaScript

以下实例在每 1000 毫秒执行 clock() 函数。实例中也包含了停止执行的按钮:

<html>
<body>

<input type="text" id="clock" />
<script type="text/javascript">
var int=self.setInterval("clock()",1000);
function clock()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("clock").value=t;
}
</script>

<button onclick="int=window.clearInterval(int)">停止</button>

</body>
</html>


setTimeout()

语法

setTimeout(code,millisec,lang)
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
millisec 必需。在执行代码前需等待的毫秒数。
lang 可选。脚本语言可以是:JScript | VBScript | JavaScript

实例演示如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>点击按钮,在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>

<script>
function myFunction()
{
    setTimeout(function(){alert("Hello")},3000);
}
</script>

</body>
</html>

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由极客之音整理,本文链接:https://www.bmabk.com/index.php/post/73524.html

(0)
小半的头像小半

相关推荐

极客之音——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!