本文实例讲述了纯JS实现可用于页码更换的飞页特效。分享给大家供大家参考,具体如下:
这个效果使用了自己封装的一个运动函数;这个效果的巧妙之处在于,在开始用数组存放了每个李的位置信息,然后在点击按钮(页码)的时候让李的宽高位置和透明度发生运动的改变一个一个的消失,然后在消失结束之后,再一个个倒着出现,可以和页码进行匹配,从而实现页码更换的效果
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> www.jb51.net JS飞入效果& lt;/title>
& lt;链接rel="样式表" href=" https://www.yisu.com/zixun/stylesheets/base.css " rel=巴獠縩ofollow”比;
& lt; style>
身体{
背景:# 000;
}
.header {
宽度:100%;
高度:40像素;
背景:# fff;
字体:粗体30 px/40 px的微软雅黑”;
text-align:中心;
}
输入{
背景:# fff;
margin-top: 5 px;
宽度:50 px;
高度:20 px;
字体:黑体12 px/20 px微软雅黑”;
}
ul {
宽度:360 px;
身高:360 px;
保证金:50 px汽车;
}
ul李{
宽度:100 px;
身高:100 px;
背景:天蓝色;
浮:左;
保证金:5 px;
}
& lt;/style>
& lt;脚本src=" https://www.yisu.com/zixun/move.js "祝辞& lt;/script>
& lt; script>
window=function () {
var oBtn=. getelementbyid (“btn1”);
var oUl=document.getElementsByTagName (ul) [0];
阿里var=oUl.children;//用数组来存放没个李的位置
var arr=[];//存位置
我(var=0; i< aLi.length;我+ +){
arr[我]={
左:阿里[我].offsetLeft,
上图:阿里.offsetTop[我]
};
}//给目前的李定位
我(var=0; i< arr.length;我+ +){
阿里[我].style.position=熬浴?
阿里[我].style.left=arr[我].left +“px”;
阿里[我].style.top=arr直[我]上+“px”;
阿里[我].style.margin=0;
}//当点击的时候开定时器,让李一个一个的走
var我现在=0;
var计时器=零;
var bReady=false;
oBtn.onclick=function () {
如果(bReady){返回;}
bReady=true;
计时器=setInterval(函数(){
移动(aLi(我现在),{左:0,上图:0,身高:0,宽度:0,不透明度:0},{“持续时间”:200年,“完成”:函数(){
如果我现在==arr.length-1) {
clearInterval(计时器);
回();
bReady=false;
}
我现在+ +;
}});
},220);
};
函数返回(){
计时器=setInterval(函数(){
我现在,
移动(aLi(我现在),{arr左:我现在.left,上图:加勒比海盗直(我现在)上,身高:100年,宽度:100年,不透明度:1},{“持续时间”:200年,“完成”:函数(){
如果我现在==0){
clearInterval(计时器);
}
}});
},220);
}
};
& lt;/script>
& lt;/head>
& lt; body>
& lt; div类="头"祝辞飞页效果& lt;/div>
& lt;输入类型="按钮" value=" https://www.yisu.com/zixun/走你" id=癰tn1”比;
& lt; ul>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt; li> & lt;/li>
& lt;/ul>
& lt;/body>
& lt;/html>
之前
运动函数move.js:
/* *
*由Jason alt="纯JS实现可用于页码更换的飞页特效示例">
更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》,《JavaScript切换特效与技巧总结》,《JavaScript错误与调试技巧总结》,《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
