<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>无标题页</title> <style type="text/css"> * { margin:0px; padding:0px; } ul { width:360px; position:absolute; left:350px; top:100px; } ul li { list-style:none; float:left; margin:10px; } div { width:100px; height:100px; background:#4AA0EF; z-index:1px; } </style> <script src="../ajax/Move.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function(){ var oUl = document.getElementById("main"); var oLi = oUl.getElementsByTagName("li"); var mixZIndex= 2; for(var i=0;i<oLi.length;i++) { //布局转换 (第一步) oLi[i].style.left = oLi[i].offsetLeft+"px"; oLi[i].style.top = oLi[i].offsetTop +"px"; } for(var i=0;i<oLi.length;i++) { //将li绝对定位 (第二步) oLi[i].style.position="absolute"; } //备注: //第一步与第二步不能写在一个for循环之中 //不然li不能起到绝对定位作用效果 for(var i=0;i<oLi.length;i++) { var oDiv = oLi[i].getElementsByTagName("div")[0]; mixZIndex++; oDiv.style.zIndex = mixZIndex; oDiv.onmouseover = function(){ //alert(2); move(this,{height:200,width:200,marginLeft:-50,marginTop:-50}); }; oDiv.onmouseout = function(){ move(this,{height:100,width:100,marginLeft:0,marginTop:0}); }; } } </script> </head> <body> <ul id="main"> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> <li> <div></div> </li> </ul> </body> </html>
move.js
//运动框架 //链式运动 function move(obj,json,fun) { //先关闭定时器 clearInterval(obj.timer); obj.timer = setInterval(function(){ //是否停止运行 var isStop = true; for(var attr in json) { //1、当前值 var current = 0; //目标值 var target = json[attr]; //判断是否是透明度属性 if(attr=="opacity") { current = parseInt(parseFloat(getStyle(obj,attr))*100); } else { current = parseFloat(getStyle(obj,attr)); } //2、计算速度 var speed = (target-current)/6; //如果速度大于0 向上取整 如果速度小于0 向下取整 speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); //计算运行结果 if(attr=="opacity") { //透明度兼容性 obj.style.filter="alpha(opacity:"+(current + speed)+")"; obj.style.opacity = (current + speed)/100; } else { //计算运动结果值 obj.style[attr] = current + speed +"px"; } //判断是否所有属性都运动完成 if(current!=target) { isStop = false; } } //3、关闭定时器 //所有属性运动完成 就闭关定时器 if(isStop) { //关闭定时器 clearInterval(obj.timer); //链式运动 if(fun) { fun(); } } },30); } //对象style属性值 function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,null)[attr]; } }
时间: 2024-10-11 22:09:08