一：scroll系列与offset系列
1.offset系列再次说明
元素的样式属性无法直接通过对象.style.属性值，进行获取的。
offsetLeft：距离左边位置的值
offsetTop：距离上面位置的值
offsetWidth：元素的宽【有边框】
offsetHeight：元素的高【有边框】
2.scroll系列
卷曲
scrollWidth：元素内容的实际宽度，没有边框，如果没有内容就是元素的宽
scrollHeight：元素中的内容的实际的高，没有边框，如果没有内容就是元素的高
scrollLeft：向左卷曲出去的值
scrollTop：向上卷曲出去的值
3.程序
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 div { 12 width: 300px; 13 height: 200px; 14 border: 1px solid #c0c0c0; 15 overflow: auto; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div">窘况哦看得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法女产品我就破 21 解危废间颇为四年服务我金额放无色我立法会你外婆我急风我是雷锋里维斯佛教颇为思念成危房皮几万深V创建 哦们紧迫我我进房草场坡那我 22 得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法 23 得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法</div> 24 <br> 25 <input type="button" value="显示效果" id="btn"> 26 <script> 27 document.getElementById("btn").onclick=function () { 28 var width=document.getElementById("div").scrollWidth; 29 console.log(width); 30 } 31 </script> 32 </body> 33 </html>
4.div的滚动事件
使用onscroll事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 div { 12 width: 300px; 13 height: 200px; 14 border: 1px solid #c0c0c0; 15 overflow: auto; 16 } 17 </style> 18 </head> 19 <body> 20 <div id="div">窘况哦看得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法女产品我就破 21 解危废间颇为四年服务我金额放无色我立法会你外婆我急风我是雷锋里维斯佛教颇为思念成危房皮几万深V创建 哦们紧迫我我进房草场坡那我 22 得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法 23 得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法得见款快快快哦哦哦吧扭捏呢磨口没你口里Nov测so低价老司机女迫使女冲破积极司法</div> 24 <br> 25 <script> 26 document.getElementById("div").onscroll=function () { 27 console.log(document.getElementById("div").scrollTop); 28 } 29 </script> 30 </body> 31 </html>
效果：
5.浏览器的滚动事件
1 function getscroll() { 2 return { 3 top: window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0, 4 left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0 5 }; 6 }
6.固定导航栏案例
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0 10 } 11 img { 12 vertical-align: top; 13 margin: 0 auto; 14 } 15 .top , .nav{ 16 width: 1423px; 17 margin: 0 auto; 18 } 19 .main { 20 margin: 0 auto; 21 width: 1000px; 22 } 23 .fixed { 24 position: fixed; 25 top: 0; 26 left: 50%; 27 margin-left: -710px; 28 } 29 </style> 30 </head> 31 <body> 32 <div class="top" id="topPart"> 33 <img src="images/top.png" alt=""/> 34 </div> 35 <div class="nav" id="navBar"> 36 <img src="images/nav.png" alt=""/> 37 </div> 38 <div class="main" id="mainPart"> 39 <img src="images/main.png" alt=""/> 40 </div> 41 <script> 42 function getscroll() { 43 return { 44 top: window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0, 45 left: window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft||0 46 }; 47 } 48 window.onscroll=function () { 49 if(getscroll().top>=document.getElementById("topPart").offsetHeight){ 50 document.getElementById("navBar").className="nav fixed"; 51 document.getElementById("mainPart").style.marginTop=document.getElementById("navBar").offsetHeight+"px"; 52 }else{ 53 document.getElementById("navBar").className="nav"; 54 document.getElementById("mainPart").style.marginTop=0; 55 } 56 } 57 </script> 58 59 </body> 60 </html>
效果：
二：封装动画函数
1.程序
非匀速动画。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 /*脱离文档流*/ 12 position: absolute; 13 } 14 input { 15 margin-top: 20px; 16 } 17 </style> 18 19 </head> 20 <body> 21 <input type="button" value="移动到400px" id="btn1"/> 22 <input type="button" value="移动到800px" id="btn2"/> 23 <div id="dv"></div> 24 <script> 25 26 //设置任意的一个元素,移动到指定的目标位置 27 function animate(element, target) { 28 clearInterval(element.timeId); 29 //定时器的id值存储到对象的一个属性中 30 element.timeId = setInterval(function () { 31 //获取元素的当前的位置,数字类型 32 var current = element.offsetLeft; 33 //每次移动的距离 34 var step = (target-current)/10; 35 step = step>0 ? Math.ceil(step) : Math.floor(step); 36 //当前移动到位置 37 current += step; 38 element.style.left=current+"px"; 39 if(current==target){ 40 clearInterval(element.timeId); 41 } 42 }, 20); 43 } 44 45 document.getElementById("btn1").onclick = function () { 46 animate(document.getElementById("dv"), 400); 47 }; 48 //点击第二个按钮移动到800px 49 50 document.getElementById("btn2").onclick = function () { 51 animate(document.getElementById("dv"), 800); 52 }; 53 54 </script> 55 </body> 56 </html>
2.筋斗云
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0 10 } 11 12 ul { 13 list-style: none 14 } 15 16 body { 17 background-color: #333; 18 } 19 20 .nav { 21 width: 800px; 22 height: 42px; 23 margin: 100px auto; 24 background: url(images/rss.png) right center no-repeat; 25 background-color: #fff; 26 border-radius: 10px; 27 position: relative; 28 } 29 30 .nav li { 31 width: 83px; 32 height: 42px; 33 text-align: center; 34 line-height: 42px; 35 float: left; 36 cursor: pointer; 37 } 38 39 .nav span { 40 position: absolute; 41 top: 0; 42 left: 0; 43 width: 83px; 44 height: 42px; 45 background: url(images/cloud.gif) no-repeat; 46 } 47 48 ul { 49 position: relative; 50 } 51 </style> 52 </head> 53 <body> 54 <div class="nav"> 55 <span id="cloud"></span> 56 <ul id="navBar"> 57 <li>北京校区</li> 58 <li>上海校区</li> 59 <li>广州校区</li> 60 <li>深圳校区</li> 61 <li>武汉校区</li> 62 <li>关于我们</li> 63 <li>联系我们</li> 64 <li>招贤纳士</li> 65 </ul> 66 </div> 67 <script src="common.js"></script> 68 <script> 69 //匀速动画 70 function animate(element, target) { 71 //清理定时器 72 clearInterval(element.timeId); 73 element.timeId = setInterval(function () { 74 //获取元素的当前位置 75 var current = element.offsetLeft; 76 //移动的步数 77 var step = (target - current) / 10; 78 step = step > 0 ? Math.ceil(step) : Math.floor(step); 79 current += step; 80 element.style.left = current + "px"; 81 if (current == target) { 82 //清理定时器 83 clearInterval(element.timeId); 84 } 85 }, 20); 86 } 87 // 获取数据 88 var cloud = document.getElementById("cloud"); 89 var list = document.getElementById("navBar").children; 90 for(var i=0;i<list.length;i++){ 91 list[i].onmouseover=mouseoverHandle; 92 list[i].onmouseout=mouseoutHandle; 93 list[i].onclick=clickHandle; 94 } 95 function mouseoverHandle() { 96 animate(cloud, this.offsetLeft); 97 } 98 99 function mouseoutHandle() { 100 animate(cloud, this.lastposition); 101 } 102 var lastposition=0; 103 function clickHandle() { 104 lastposition=this.offsetLeft; 105 } 106 </script> 107 </body> 108 </html>
效果：
三：获取元素计算后的样式属性值
1.说明
//谷歌与火狐支持
let computedStyle = window.getComputedStyle(document.getElementById("dv"),null);
console.log(computedStyle.left);
//IE支持
var left = document.getElementById("dv").currentStyle.left;
console.log(left);
2.兼容代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 left: 100px; 12 } 13 input { 14 margin-top: 20px; 15 } 16 </style> 17 18 </head> 19 <body> 20 <input type="button" value="移动到400px" id="btn1"/> 21 <div id="dv"></div> 22 <script> 23 24 document.getElementById("btn1").onclick = function () { 25 let style = getStyle(document.getElementById("dv"),"left"); 26 console.log("style="+style); 27 }; 28 29 //兼容代码 30 function getStyle(ele, attr) { 31 if(window.getComputedStyle){ 32 return window.getComputedStyle(ele, null)[attr]; 33 }else { 34 return ele.currentStyle[attr]; 35 } 36 } 37 38 39 </script> 40 </body> 41 </html>
效果：
四：升级动画-增加新的属性
1.说明
需要使用三种的兼容代码，获取元素的样式属性值
2.可以根据需求改变属性的一个目标值的程序
可以在attr中写left，top，width，height
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 200px; 9 height: 200px; 10 background-color: red; 11 /*脱离文档流*/ 12 position: absolute; 13 } 14 input { 15 margin-top: 20px; 16 } 17 </style> 18 19 </head> 20 <body> 21 <input type="button" value="移动到400px" id="btn1"/> 22 <div id="dv"></div> 23 <script> 24 25 //兼容代码,元素的任意样式属性值 26 function getStyle(ele, attr) { 27 if(window.getComputedStyle){ 28 return window.getComputedStyle(ele, null)[attr]; 29 }else { 30 return ele.currentStyle[attr]; 31 } 32 } 33 34 //设置任意的一个元素,移动到指定的目标位置 35 function animate(element, attr, target) { 36 clearInterval(element.timeId); 37 //定时器的id值存储到对象的一个属性中 38 element.timeId = setInterval(function () { 39 //获取元素的当前的位置,数字类型 40 var current = parseInt(getStyle(element,attr)); 41 //每次移动的距离 42 var step = (target-current)/10; 43 step = step>0 ? Math.ceil(step) : Math.floor(step); 44 //当前移动到位置 45 current += step; 46 element.style[attr]=current+"px"; 47 if(current==target){ 48 clearInterval(element.timeId); 49 } 50 }, 20); 51 } 52 53 document.getElementById("btn1").onclick = function () { 54 animate(document.getElementById("dv"),"width", 400); 55 }; 56 57 58 </script> 59 </body> 60 </html>
3.动画函数增加多个属性值的程序
清理放在for循环的外面。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 position: absolute; 12 } 13 input { 14 margin-top: 20px; 15 } 16 </style> 17 18 </head> 19 <body> 20 <input type="button" value="移动到400px" id="btn1"/> 21 <div id="dv"></div> 22 <script> 23 24 //兼容代码,元素的任意样式属性值 25 function getStyle(ele, attr) { 26 if(window.getComputedStyle){ 27 return window.getComputedStyle(ele, null)[attr]; 28 }else { 29 return ele.currentStyle[attr]; 30 } 31 } 32 33 //设置任意的一个元素,移动到指定的目标位置 34 function animate(element, json) { 35 clearInterval(element.timeId); 36 //定时器的id值存储到对象的一个属性中 37 element.timeId = setInterval(function () { 38 for (var attr in json) { 39 //获取元素的当前的位置,数字类型 40 var current = parseInt(getStyle(element,attr)); 41 //每次移动的距离 42 var target = json[attr]; 43 var step = (target-current)/10; 44 step = step>0 ? Math.ceil(step) : Math.floor(step); 45 //当前移动到位置 46 current += step; 47 element.style[attr]=current+"px"; 48 } 49 if(current==target){ 50 clearInterval(element.timeId); 51 } 52 53 }, 20); 54 } 55 56 document.getElementById("btn1").onclick = function () { 57 var json = { 58 "width": 200, 59 "height": 200, 60 "top":100, 61 "left":500 62 }; 63 animate(document.getElementById("dv"),json); 64 }; 65 66 67 </script> 68 </body> 69 </html>
效果：
4.回调函数
当函数作为参数的时候，就是回调函数。
程序在第一次属性结束的时候，调用回调函数，然后第二次结束之后，又再一次调用回调函数。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 position: absolute; 12 } 13 input { 14 margin-top: 20px; 15 } 16 </style> 17 18 </head> 19 <body> 20 <input type="button" value="移动到400px" id="btn1"/> 21 <div id="dv"></div> 22 <script> 23 24 //兼容代码,元素的任意样式属性值 25 function getStyle(ele, attr) { 26 if(window.getComputedStyle){ 27 return window.getComputedStyle(ele, null)[attr]; 28 }else { 29 return ele.currentStyle[attr]; 30 } 31 } 32 33 //设置任意的一个元素,移动到指定的目标位置 34 function animate(element, json, fn) { 35 clearInterval(element.timeId); 36 //定时器的id值存储到对象的一个属性中 37 element.timeId = setInterval(function () { 38 for (var attr in json) { 39 //获取元素的当前的位置,数字类型 40 var current = parseInt(getStyle(element,attr)); 41 //每次移动的距离 42 var target = json[attr]; 43 var step = (target-current)/10; 44 step = step>0 ? Math.ceil(step) : Math.floor(step); 45 //当前移动到位置 46 current += step; 47 element.style[attr]=current+"px"; 48 } 49 if(current==target){ 50 clearInterval(element.timeId); 51 //所有的属性到达目标才能使用 52 if(fn){ 53 fn(); 54 } 55 } 56 57 }, 20); 58 } 59 60 document.getElementById("btn1").onclick = function () { 61 var json = { 62 "width": 200, 63 "height": 200, 64 "top":100, 65 "left":500 66 }; 67 animate(document.getElementById("dv"),json,function () { 68 var json2 = { 69 "width": 100, 70 "height": 100, 71 "top":50, 72 "left":100 73 }; 74 animate(document.getElementById("dv"),json2,function () { 75 var json3 = { 76 "width": 300, 77 "height": 200, 78 "top":150, 79 "left":200 80 }; 81 animate(document.getElementById("dv"),json3); 82 }) 83 }); 84 }; 85 86 87 </script> 88 </body> 89 </html>
5.增加透明度
· 因为透明度没有单位，需要单独计算。而且，需要将小数乘以倍数，方便计算。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 div{ 8 width: 100px; 9 height: 100px; 10 background-color: green; 11 position: absolute; 12 } 13 input { 14 margin-top: 20px; 15 } 16 </style> 17 18 </head> 19 <body> 20 <input type="button" value="移动到400px" id="btn1"/> 21 <div id="dv"></div> 22 <script> 23 24 //兼容代码,元素的任意样式属性值 25 function getStyle(ele, attr) { 26 if(window.getComputedStyle){ 27 return window.getComputedStyle(ele, null)[attr]; 28 }else { 29 return ele.currentStyle[attr]; 30 } 31 } 32 33 //设置任意的一个元素,移动到指定的目标位置 34 function animate(element, json, fn) { 35 clearInterval(element.timeId); 36 //定时器的id值存储到对象的一个属性中 37 element.timeId = setInterval(function () { 38 for (var attr in json) { 39 if(attr=="zIndex"){ 40 var current = getStyle(element,attr)*100; 41 var target = json[attr]*100; 42 var step = (target-current)/10; 43 step = step>0 ? Math.ceil(step) : Math.floor(step); 44 current += step; 45 element.style[attr]=current/100; 46 47 }else if(attr=="opacity"){ 48 element.style[attr]=json[attr]; 49 }else { 50 //下面是普通的属性 51 //获取元素的当前的位置,数字类型 52 var current = parseInt(getStyle(element,attr)); 53 //每次移动的距离 54 var target = json[attr]; 55 var step = (target-current)/10; 56 step = step>0 ? Math.ceil(step) : Math.floor(step); 57 //当前移动到位置 58 current += step; 59 element.style[attr]=current+"px"; 60 } 61 } 62 if(current==target){ 63 clearInterval(element.timeId); 64 //所有的属性到达目标才能使用 65 if(fn){ 66 fn(); 67 } 68 } 69 70 }, 20); 71 } 72 73 document.getElementById("btn1").onclick = function () { 74 var json = { 75 "zIndex": 200, 76 "opacity": 0.1, 77 "left":300, 78 "top":100 79 }; 80 animate(document.getElementById("dv"),json); 81 }; 82 83 84 </script> 85 </body> 86 </html>
五：案例
1.手风琴
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 8 ul { 9 list-style: none; 10 } 11 12 * { 13 margin: 0; 14 padding: 0; 15 } 16 17 div { 18 width: 1150px; 19 height: 400px; 20 margin: 50px auto; 21 border: 1px solid red; 22 overflow: hidden; 23 } 24 25 div li { 26 width: 240px; 27 height: 400px; 28 float: left; 29 } 30 31 div ul { 32 width: 1300px; 33 } 34 35 36 </style> 37 </head> 38 <body> 39 <div id="box"> 40 <ul> 41 <li></li> 42 <li></li> 43 <li></li> 44 <li></li> 45 <li></li> 46 </ul> 47 </div> 48 <script src="common.js"></script> 49 <script> 50 51 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 52 function getStyle(element, attr) { 53 return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; 54 } 55 function animate(element, json, fn) { 56 clearInterval(element.timeId);//清理定时器 57 //定时器,返回的是定时器的id 58 element.timeId = setInterval(function () { 59 var flag = true;//默认,假设,全部到达目标 60 //遍历json对象中的每个属性还有属性对应的目标值 61 for (var attr in json) { 62 //判断这个属性attr中是不是opacity 63 if (attr == "opacity") { 64 //获取元素的当前的透明度,当前的透明度放大100倍 65 var current = getStyle(element, attr) * 100; 66 //目标的透明度放大100倍 67 var target = json[attr] * 100; 68 var step = (target - current) / 10; 69 step = step > 0 ? Math.ceil(step) : Math.floor(step); 70 current += step;//移动后的值 71 element.style[attr] = current / 100; 72 } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex 73 //层级改变就是直接改变这个属性的值 74 element.style[attr] = json[attr]; 75 } else { 76 //普通的属性 77 //获取元素这个属性的当前的值 78 var current = parseInt(getStyle(element, attr)); 79 //当前的属性对应的目标值 80 var target = json[attr]; 81 //移动的步数 82 var step = (target - current) / 10; 83 step = step > 0 ? Math.ceil(step) : Math.floor(step); 84 current += step;//移动后的值 85 element.style[attr] = current + "px"; 86 } 87 //是否到达目标 88 if (current != target) { 89 flag = false; 90 } 91 } 92 if (flag) { 93 //清理定时器 94 clearInterval(element.timeId); 95 //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 96 if (fn) { 97 fn(); 98 } 99 } 100 //测试代码 101 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); 102 }, 20); 103 } 104 105 //先获取所有的li标签 106 var list = document.getElementById("box").getElementsByTagName("li"); 107 for (var i = 0; i < list.length; i++) { 108 list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)"; 109 //鼠标进入 110 list[i].onmouseover = mouseoverHandle; 111 //鼠标离开 112 list[i].onmouseout = mouseoutHandle; 113 } 114 //进入 115 function mouseoverHandle() { 116 for (var j = 0; j < list.length; j++) { 117 animate(list[j], {"width": 85});//动画效果 118 } 119 animate(this, {"width": 810}); 120 } 121 //离开 122 function mouseoutHandle() { 123 for (var j = 0; j < list.length; j++) { 124 animate(list[j], {"width": 240});//动画效果 125 } 126 } 127 128 129 </script> 130 131 </body> 132 </html>
效果：
2.开机动画
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 .box { 8 width: 322px; 9 position: fixed; 10 bottom: 0; 11 right: 0; 12 overflow: hidden; 13 } 14 15 span { 16 position: absolute; 17 top: 0; 18 right: 0; 19 width: 30px; 20 height: 20px; 21 cursor: pointer; 22 } 23 </style> 24 </head> 25 <body> 26 <div class="box" id="box"> 27 <span id="closeButton"></span> 28 <div class="hd" id="headPart"> 29 <img src="images/t.jpg" alt=""/> 30 </div> 31 <div class="bd" id="bottomPart"> 32 <img src="images/b.jpg" alt=""/> 33 </div> 34 </div> 35 <script src="common.js"></script> 36 <script> 37 38 my$("closeButton").onclick=function () { 39 //设置最下面的div的高渐渐的变成0 40 animate(my$("bottomPart"),{"height":0},function () { 41 animate(my$("box"),{"width":0}); 42 }); 43 }; 44 45 </script> 46 </body> 47 </html>
效果：
3.旋转木马
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>旋转木马轮播图</title> 6 <link rel="stylesheet" href="css/css.css"/> 7 <script src="common.js"></script> 8 <script> 9 // 10 var config = [ 11 { 12 400, 13 top: 20, 14 left: 50, 15 opacity: 0.2, 16 zIndex: 2 17 },//0 18 { 19 600, 20 top: 70, 21 left: 0, 22 opacity: 0.8, 23 zIndex: 3 24 },//1 25 { 26 800, 27 top: 100, 28 left: 200, 29 opacity: 1, 30 zIndex: 4 31 },//2 32 { 33 600, 34 top: 70, 35 left: 600, 36 opacity: 0.8, 37 zIndex: 3 38 },//3 39 { 40 400, 41 top: 20, 42 left: 750, 43 opacity: 0.2, 44 zIndex: 2 45 }//4 46 47 ]; 48 49 //页面加载的事件 50 window.onload = function () { 51 var flag=true;//假设所有的动画执行完毕了---锁==================================================== 52 var list = my$("slide").getElementsByTagName("li"); 53 //1---图片散开 54 function assign() { 55 for (var i = 0; i < list.length; i++) { 56 //设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置 57 animate(list[i], config[i],function () { 58 flag=true;//=============================================== 59 }); 60 } 61 } 62 assign(); 63 //右边按钮 64 my$("arrRight").onclick = function () { 65 if(flag){//========================================================== 66 flag=false; 67 config.push(config.shift()); 68 assign();//重新分配 69 } 70 71 }; 72 //左边按钮 73 my$("arrLeft").onclick = function () { 74 if(flag){//================================================== 75 flag=false; 76 config.unshift(config.pop()); 77 assign(); 78 } 79 80 }; 81 //鼠标进入,左右焦点的div显示 82 my$("slide").onmouseover = function () { 83 animate(my$("arrow"), {"opacity": 1}); 84 }; 85 //鼠标离开,左右焦点的div隐藏 86 my$("slide").onmouseout = function () { 87 animate(my$("arrow"), {"opacity": 0}); 88 }; 89 }; 90 </script> 91 92 </head> 93 <body> 94 <div class="wrap" id="wrap"> 95 <div class="slide" id="slide"> 96 <ul> 97 <li><a href="#"><img src="images/slidepic1.jpg" alt=""/></a></li> 98 <li><a href="#"><img src="images/slidepic2.jpg" alt=""/></a></li> 99 <li><a href="#"><img src="images/slidepic3.jpg" alt=""/></a></li> 100 <li><a href="#"><img src="images/slidepic4.jpg" alt=""/></a></li> 101 <li><a href="#"><img src="images/slidepic5.jpg" alt=""/></a></li> 102 </ul> 103 <div class="arrow" id="arrow"> 104 <a href="javascript:;" class="prev" id="arrLeft"></a> 105 <a href="javascript:;" class="next" id="arrRight"></a> 106 </div> 107 </div> 108 </div> 109 110 </body> 111 </html>
CSS：
1 @charset "UTF-8"; 2 /*初始化 reset*/ 3 blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} 4 body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;} 5 ol,ul{list-style:none} 6 a{text-decoration:none} 7 fieldset,img{border:0;vertical-align:top;} 8 a,input,button,select,textarea{outline:none;} 9 a,button{cursor:pointer;} 10 11 .wrap{ 12 1200px; 13 margin:100px auto; 14 } 15 .slide { 16 height:500px; 17 position: relative; 18 } 19 .slide li{ 20 position: absolute; 21 left:200px; 22 top:0; 23 } 24 .slide li img{ 25 100%; 26 } 27 .arrow{ 28 opacity: 0; 29 } 30 .prev,.next{ 31 76px; 32 height:112px; 33 position: absolute; 34 top:50%; 35 margin-top:-56px; 36 background: url(../images/prev.png) no-repeat; 37 z-index: 99; 38 } 39 .next{ 40 right:0; 41 background-image: url(../images/next.png); 42 }
效果：
四：