首页 > 代码库 > js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽
js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽
介绍了那么多运动，這次一套代码实现所有运动
1.html代码和css代码，只是定义一个div
1 <style> 2 div{ 3 width:200px; 4 height:200px; 5 margin:20px; 6 float:left; 7 background:yellow; 8 border:10px solid black; 9 filter:alpha(opacity:30);10 opacity:0.3;11 }12 </style>13 <body>14 <div id="div1">15 16 </div>17 18 </body>
2.js代码部分
1 <script> 2 window.onload=function() 3 { 4 var div=document.getElementById(‘div1‘); 5 div.onmouseover=function() 6 { 7 startMove(this,‘height‘,1000); 8 } 9 div.onmouseout=function()10 {11 startMove(this,‘height‘,50);12 }13 };14 function getStyle(obj,name) //兼容性问题，修改非行间的css15 {16 if (obj.currentStyle)//chrome和firefox17 {18 return obj.currentStyle[name];19 }20 else//ie浏览器21 {22 return getComputedStyle(obj,false)[name];23 }24 }25 function startMove(obj,attr,iTarget)26 {27 clearInterval(obj.timer);28 obj.timer=setInterval(function()29 {30 var cur=0;31 if (attr=="opacity") //判断传入的参数是不是透明度32 {33 cur=parseFloat(getStyle(obj,attr))*100; //强制转换为浮点数34 }35 else //如果不是透明度，执行這句36 {37 cur=parseInt(getStyle(obj, attr)); //返回传入要修改的属性的值38 }39 var speed=(iTarget-cur)/100 ; //设置速度40 speed=speed>0?Math.ceil(speed):Math.floor(speed); //取上下限41 42 if(cur==iTarget) //当等于要实现的值时停止43 {44 clearInterval(obj.timer);45 }46 else47 {48 if (attr==‘opacity‘) //如果是透明度，兼容性。写两句49 {50 obj.style.filter=‘alpha(opcity:‘+(cur+speed)+‘)‘; //chrome和firefox51 obj.style.opacity=(cur+speed)+‘px‘; //ie52 }53 else //要修改的是其他，直接修改他的值54 {55 obj.style[attr]=cur+speed+‘px‘;56 }57 }58 }, 59 30)60 }61 </script>
js实现一套代码来控制所有的运动，图片的淡入淡出，winth，height的变宽
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。