-
可以使用定时器去完成速度运动，比如说定时的更改left,right,top,bottom等位置距离，会产生运动，定时更改width,height属性值也会产生运动。 在使用定时器前要清除定时器，避免该定时器被不断触发，定时器叠加使运动速率加快。查看全部
-
运动框架实现思路 1.速度（改变值left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
缓冲运动： 距离和速度成正比 ：speed=（itarget-oDiv.offsetLeft)/10; alert(Math.floor(3.98))向下取整 alert(Math.ceil(3.22))向上取整 遇到这种运动涉及到数字的问题都要做一个判断，向上或者向下取整 // 从用两个函数实现，到用一个函数：两个有很多相同的部分，则相同部分可以共用，不同部分看有什么联系 // 从传入两个参数到一个参数：参数传递尽可能的少查看全部
-
透明度动画(透明度的改变没有直接的属性去改变，自定义变量alpha) 属性: filter: alpha(opacity:30) ; 通过变量alpha存储元素透明度来与目标值判断 DOM元素.style.filter = 'alpha(opacity:' + alpha + ')'(非主流，IE8前) DOM元素.style.opacity = alpha / 100(主流)查看全部
-
JQuery封装的方法调用mouseenter、animate查看全部
-
宽、高、透明度同时变化如图 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式 var json={name:key}多对值可以用逗号隔开var json={a:12,b:2} 遍历json,用 for-in循环 for(var i in json) {alert(i);//弹出对象 alert(json[i]);//弹出对象的值} 传入的三个值要都到达目标值，才执行停止定时器。 function getStyle(obj,attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } function move(obj,json,fn){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var flag = true; for(var attr in json){ //取当前值 var icur =0; if(attr=='opacity'){ icur = Math.round(parseFloat(getStyle(obj,attr)*100)); }else{ icur = parseInt(getStyle(obj,attr)); } //计算速度 var speed = (json[attr]-icur)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //检测停止 if(icur != json[attr]) { flag = false; } if(attr=='opacity') { obj.style.opacity = (icur+speed)/100; obj.style.filter = 'alpha(opacity='+(icur+speed)+')'; }else{ obj.style[attr] = icur+speed+"px"; } } if(flag) { clearInterval(obj.timer); if(fn) { fn(); } } }, 30) }查看全部
-
var timer3 = null; function startMove3(iTarget){ clearInterval(timer3); var box3 = document.getElementById("box3"); timer3 = setInterval(function(){ var speed = (iTarget - box3.offsetLeft)/20; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(box3.offsetLeft == iTarget){ clearInterval(timer3); }else{ box3.style.left = box3.offsetLeft + speed + "px"; } },30)查看全部
-
var timer1 = null; var alpha = 30; function changeAlpha(iTarget){ var box2 = document.getElementById("box2"); clearInterval(timer1); timer1 = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer1); }else{ alpha += speed; box2.style.filter = 'alpha(opacity:'+ alpha +')'; box2.style.opacity = alpha/100; } },30)查看全部
-
<style type="text/css"> *{ margin:0; padding:0; font-size:12px; font-family:"微软雅黑"; } #box{ width:200px; height:200px; background:#FF0000; position:relative; left:-200px; } #share{ width:14px; color:#FFFFFF; background:#00CCFF; position:absolute; top:20px; left:200px; } </style> <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); box.onmouseover = function(){ startMove(0); }; box.onmouseout = function(){ startMove(-200); }; } var timer = null; function startMove(iTarget){ clearInterval(timer); var box = document.getElementById("box"); timer = setInterval(function(){ var speed = 0; if(box.offsetLeft > iTarget){ speed = -10; }else{ speed = 10; } if(box.offsetLeft == iTarget){ clearInterval(time); }else{ box.style.left = box.offsetLeft + speed + "px"; } },30) } </script> </head> <body> <div id="box"> <span id="share">分享</span> </div> </body>查看全部
-
改变透明度时出现的问题： 1、获取当前透明度不用parseInt 2、设置透明度要考虑兼容 obj.style.filter='alpha(opacity:'+(当前透明度+变化速度)+')'; obj.style.opacity=(当前透明度+变化速度)/100; 3、透明度不加“px” 在使用parseInt()时处理透明度小数时,会有影响 单位设置 相应位置进行判断 IE/FireFox 取相应值 Math.round()四舍五入取整数值 Math.round(parseFloat(getStyle(obj,attr))*100)查看全部
-
透明度+宽度整合函数 分别判断处理 window.onload = function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmousemove=function(){ startMove(this,'opacity',100); } Li1.onmouseout=function(){ startMove(this,'opacity',30); } Li2.onmousemove=function(){ startMove(this,'left',400); } Li2.onmouseout=function(){ startMove(this,'left',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var cur=0; if(attr == 'opacity'){//判断属性是否为透明度 cur=Math.round(parseFloat(getStyle(obj,attr))*100);//parseFloat获取小数,Math.round四舍五入 } else{ cur =parseInt(getStyle(obj,attr)); } var speed = (iTarget - cur)/8; speed = speed>0?Math.ceil(speed):Math.floor(speed); if(cur == iTarget){ clearInterval(obj.timer); } else{ if(attr=='opacity'){ obj.style.opacity = (cur+speed)/100; obj.style.filter='alpha(opacity:'+(cur+speed)+')'; } else{ obj.style[attr]= cur+speed+"px"; } } },50) }查看全部
-
有border/padding属性的div运动时不能用offsetX属性获取div的X,因为offsetX获取的是div盒子的属性 不是conten的属性！ 在用到obj.offsetWidth或者obj.offsetHeight的时候，如果，obj对象的样式有border等属性，则需要用getStyle()函数解决实际width和height值样式不兼容的问题 //获取style样式 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
JQuery实现淘宝菜单动画特效：使用animate函数设置动画（与封装的js方法类似） mouseover/mouseout: 不论鼠标指针穿过被选元素或其子元素，都会触发。 mouseenter/mouseleave: 只有在鼠标指针穿过被选元素时，才会触发事件。 mouseenter子元素不会反复触发事件，否则在IE中经常有闪烁情况发生。查看全部
-
运动框架实现思路 1.速度（改变值left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
json: var json = {a:1, b:2}; for(var i in json){ alert(json[i]);//i为json里面的name值，即a、b等 }查看全部
举报
0/150
提交
取消