-
样式： <style> * { margin: 0; padding: 0; } #move { padding: 10px; width: 300px; background: #f4f4f4; margin : 10px auto; border: 1px solid #ccc; margin: 10px auto; } #move a { display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; text-align: center; margin: 10px 17px; position: relative; padding-top: 40px; color: #9c9c9c; font-size: 12px; text-decoration: none; line-height: 25px; overflow: hidden; } #move a i { position: absolute; top: 20px; left: 0; display: inline-block; width: 100%; text-align: center; filter: alpha(opacity = 100); opacity: 1; } #move a:hover { color: #F00; } #move img { border: none; } </style>查看全部
-
这里有两个BUG：第一个肯定是不能执行回调涵数。只要把flag=true放到定时器下面。 第二个就是当鼠标移动的时候会出现多次执行涵数，只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样两个BUG就都解决了 <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('move'); var aList=oDiv.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:20,opacity:100}) }); } } } </script>查看全部
-
// 设置timer var moveFlag = null; /** * 定义移动函数 * moveTarget 移动的目标位置 * moveObject 需要移动的对象 */ function startMove(moveObject, moveTarget) { clearInterval(moveFlag); moveFlag = setInterval(function() { //移动速度等于目标减去实时的位移，放慢15倍 var speed = (moveTarget - moveObject.offsetLeft) / 15; //从负数到0向上取整，从0到负数向下取整 speed = moveTarget == 0 ? Math.ceil(speed) : Math.floor(speed); //移动操作 if (moveObject.offsetLeft !== moveTarget) { moveObject.style.left = moveObject.offsetLeft + speed + "px"; } else { clearInterval(moveFlag); } }, 10); }查看全部
-
<!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。. 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50),而IE8版本之前的opacity属性值是0~1*/ 【没有直接的属性可以改变透明度，需要定义一个alpha】查看全部
-
<script type="text/javascript"> window.onload=function(){ var oLi=document.getElementById('li1'); oLi.onmousemove=function(){ startMove(this,{width:400,height:200},function(){ startMove(this,{opacity:100}); }); } oLi.onmouseout=function(){ startMove(this,{opacity:30},function(){ startMove(this,{width:200,height:100,opacity:30}); }); } } </script>查看全部
-
<script src="move.js"> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle; } else { return getComputedStyle(obj, false)[attr]; } } function startMove(obj, json, fn) { var flag; clearInterval(obj.timer); obj.timer = setInterval(function() { flag = true; for ( var attr in json) { // 1.取当前值 var icur = 0; if (attr == 'opacity') { icur = Math.round(parseFloat(getStyle(obj, attr)) * 100); } else { icur = parseInt(getStyle(obj, attr)); } // 2.算速度 var speed = (json[attr] - icur) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); // 3.检测停止 if (json[attr] != icur) { flag = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (icur + speed) + ')'; obj.style.opacity = (icur + speed) / 100; } else { obj.style[attr] = icur + speed + "px"; } } if (flag) { clearInterval(obj.timer); if (fn) { fn.call(obj); } } }, 30) } </script>查看全部
-
var json={name1：value1，name2：value2}； for(var i in json){//循环遍历取出 i;//取出name json[i];//取出value } 多属性同时运动时，应用flag表示所有属性皆已到达目标值，然后再结束运动。 function startMove(ele, data, fn){ timer = setInterval(function(){ var flag = true; for(var attr in data){ var val, speed; ...... if(val != data[attr]) flag = false; } if(flag){ clearInterval(timer); if(fn) fn(); }, 30); }查看全部
-
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>多物体运动</title> <style> *{ margin: 0; padding: 0; } ul,li{ list-style: none; } li{ width: 200px; height: 100px; background: red; } </style> </head> <body> <ul> <li id="jj"></li> </ul> <script> window.onload = function(){ var Jungle = document.getElementById('jj'); Jungle.onmouseover = function(){ startmove(400); } Jungle.onmouseout = function(){ startmove(200); } } var timer = null; function startmove(zTarget){ clearInterval(timer); var Jungle.getElementById('jj'); timer = setInterval(function(){ var speed = (zTarget - Jungle.offsetWidth)/10; speed = speed > 0?Math.ceil(speed):Math.floor(speed); if(zTarget == Jungle.offsetWidth){ clearInterval(timer); }else{ Jungle.style.width = Jungle.offsetWidth + speed + 'px'; } },30) } </script> </body> </html> 不知道哪里出错了查看全部
-
parseFloat() 解析一个字符串并返回一个浮点数。 parseInt() 解析一个字符串并返回一个整数。 var iNum1 = parseInt("12345red"); //返回 12345查看全部
-
多物体运动所有的东西不能共用查看全部
-
运动框架实现思路： 1.速度（改变值Left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 （如：先宽后高） 6.同时运动 （如：宽高同时运动）查看全部
-
动画效果叫做运动！~查看全部
-
parseFloat() 解析一个字符串并返回一个浮点数。 parseInt() 解析一个字符串并返回一个整数。 var iNum1 = parseInt("12345red"); //返回 12345 var iNum1 = parseInt("0xA"); //返回 10 var iNum1 = parseInt("56.9"); //返回 56 var iNum1 = parseInt("red"); //返回 NaN var fNum1 = parseFloat("12345red"); //返回 12345 var fNum2 = parseFloat("0xA"); //返回 NaN var fNum3 = parseFloat("11.2"); //返回 11.2 var fNum4 = parseFloat("11.22.33"); //返回 11.22 var fNum5 = parseFloat("0102"); //返回 102 var fNum1 = parseFloat("red"); //返回 NaN查看全部
-
多物体运动所有的东西都不能共用查看全部
-
缓冲运动中：向上取整Math.ceil(),向下取整Math.floor() 由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,此时speed速度为0.75。而浏览器是不允许出现小数的，会把0.75去掉，那么就速度为0 不动了。那么div的left就变成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。 所以 向右移动 速度为正 就将变成小数的速度 向上取整 为1 向左移动 速度为负 就将变成负小数的速度向下取整 取整原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小，即floor），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。 这一点可以用console.log(speed)可以验证，speed的log会一直输出，因为程序死循环了 Math.floor()向取整； Math.ceil()向上取整； Math.round()四舍五入； var speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果(目标值-当前值)/10 不能整除的话。运动到最后，是1~9之间的数字来除以10，结果是个小于1的小数，如果用Math.floor(speed)向下取整，那就是0，speed=0，意味着不再发生变化。也就是说，当速度大于0的时候，如果用Math.floor(speed),最后不到10个像素的时候，就不会动了。所以要用Math.ceil向上取整。同理，当速度<0时，要用Math.ceil()取整。查看全部
举报
0/150
提交
取消