手风琴
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { width: 240px; height: 400px; float: left; } div ul { width: 1300px; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="common.js"></script> <script> //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); } //先获取所有的li标签 var list = my$("box").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)"; //鼠标进入 list[i].onmouseover = mouseoverHandle; //鼠标离开 list[i].onmouseout = mouseoutHandle; } //进入 function mouseoverHandle() { for (var j = 0; j < list.length; j++) { animate(list[j], {"width": 100});//动画效果 } animate(this, {"width": 800}); } //离开 function mouseoutHandle() { for (var j = 0; j < list.length; j++) { animate(list[j], {"width": 240});//动画效果 } } </script> </body> </html>
固定导航栏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } img { vertical-align: top; } .main { margin: 0 auto; width: 1000px; margin-top: 10px; } .fixed { position: fixed; top: 0; left: 0; } </style> </head> <body> <div class="top" id="topPart"> <img src="images/top.png" alt=""/> </div> <div class="nav" id="navBar"> <img src="images/nav.png" alt=""/> </div> <div class="main" id="mainPart"> <img src="images/main.png" alt=""/> </div> <script src="common.js"></script> <script> //获取页面向上或者向左卷曲出去的距离的值 function getScroll() { return { left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0, top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0 }; } //滚动事件 window.onscroll=function () { //向上卷曲出去的距离和最上面的div的高度对比 if(getScroll().top>=my$("topPart").offsetHeight){ //设置第二个div的类样式 my$("navBar").className="nav fixed"; //设置第三个div的marginTop的值 my$("mainPart").style.marginTop=my$("navBar").offsetHeight+"px"; }else{ my$("navBar").className="nav"; my$("mainPart").style.marginTop="10px"; } }; </script> </body> </html>
筋斗云
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } body { background-color: #333; } .nav { width: 800px; height: 42px; margin: 100px auto; background: url(images/rss.png) right center no-repeat; background-color: #fff; border-radius: 10px; position: relative; } .nav li { width: 83px; height: 42px; text-align: center; line-height: 42px; float: left; cursor: pointer; } .nav span { position: absolute; top: 0; left: 0; width: 83px; height: 42px; background: url(images/cloud.gif) no-repeat; } ul { position: relative; } </style> </head> <body> <div class="nav"> <span id="cloud"></span> <ul id="navBar"> <li>C++</li> <li>C语言</li> <li>Shell</li> <li>JavaScript</li> <li>SQL</li> <li>Java</li> <li>C#</li> <li>Python</li> </ul> </div> <script src="common.js"></script> <script> //匀速动画 function animate(element, target) { //清理定时器 clearInterval(element.timeId); element.timeId = setInterval(function () { //获取元素的当前位置 var current = element.offsetLeft; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style.left = current + "px"; if (current == target) { //清理定时器 clearInterval(element.timeId); } //测试代码: console.log("目标位置:" + target + ",当前位置:" + current + ",每次移动步数:" + step); }, 20); } //获取云彩 var cloud = my$("cloud"); //获取所有的li标签 var list = my$("navBar").children; //循环遍历分别注册鼠标进入,鼠标离开,点击事件 for (var i = 0; i < list.length; i++) { //鼠标进入事件 list[i].onmouseover = mouseoverHandle; //点击事件 list[i].onclick = clickHandle; //鼠标离开事件 list[i].onmouseout = mouseoutHandle; } function mouseoverHandle() {//进入 //移动到鼠标此次进入的li的位置 animate(cloud, this.offsetLeft); } //点击的时候,记录此次点击的位置 var lastPosition = 0; function clickHandle() {//点击 lastPosition = this.offsetLeft; } function mouseoutHandle() {//离开 animate(cloud, lastPosition); } </script> </body> </html>
