-
多物体运动，所有都不公用： 如 定时器、变量等。 需遍历每个物体，并分别定义查看全部
-
鼠标移入事件查看全部
-
offsetLeft 当前Left值查看全部
-
运动框架查看全部
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>获取样式</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <style type="text/css"> * { margin:0 ; padding:0; } #div1 { width:200px; height:200px; background:#08b; border:1px solid pink; } </style> <script type="text/javascript"> window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var odiv=document.getElementById("div1"); odiv.style.width=parseInt(getStyle(odiv,'width'))-1+'px'; },30); } //currentStyle针对IE浏览器； //getComputedStyle 针对firefox浏览器； function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } } </script> </head> <body> <div id="div1" >hello world</div>查看全部
-
<title>多物体动画-透明度</title> <style type="text/css"> * { margin:0 ; padding:0; } div { width:200px; height:200px; background:#08b; filter:alpha(opacity:30); opacity:0.3; margin:10px; float:left; } </style> <script type="text/javascript"> window.onload=function(){ var adiv=document.getElementsByTagName("div"); for(var i=0;i<adiv.length;i++){ adiv[i].alpha=30; adiv[i].onmouseover=function(){ startMove(this,100); } adiv[i].onmouseout=function(){ startMove(this,30); } } } var alpha=30; function startMove(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=0; if(obj.alpha>target){ speed=-10; }else{ speed=10; } if(obj.alpha==target){ clearInterval(obj.timer); } else{ obj.alpha+=speed; obj.style.filter='alpha(opacity:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30) } </script> <body> <div ></div> <div ></div> <div ></div> <div ></div> </body>查看全部
-
<title>多物体动画</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <style type="text/css"> * { margin:0 ; padding:0; } ul,li { list-style:none; } ul li { width:200px; height:100px; background:greenyellow; margin-bottom:20px; } </style> <script type="text/javascript"> window.onload=function(){ var ali=document.getElementsByTagName("li"); for(var i=0;i<ali.length;i++){ ali[i].timer=null; ali[i].onmouseover=function(){ startMove(this,400); } ali[i].onmouseout=function(){ startMove(this,200); } } } function startMove(obj,target){ clearInterval(obj.timer); obj.timer=setInterval(function(){ var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth==target){ clearInterval(obj.timer) }else{ obj.style.width=obj.offsetWidth+speed+'px'; } },30) } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul>查看全部
-
json是轻量级的数量转换查看全部
-
currentSyle针对IE浏览器 getComputeStyle针对firefox浏览器。查看全部
-
<html> <head> <meta http-equiv="Content-Type" content="text/html"charset="utf-8" > <title>速度动画</title> <style type="text/css"> * { margin:0; padding:0; } #div1 { width:200px; height:200px; background:#08b;; filter:alpha(opacity:30); opacity:0.3; } </style> <script> window.onload=function(){ var odiv=document.getElementById("div1"); odiv.onmouseover=function(){ startMove(100); } odiv.onmouseout=function(){ startMove(30); } } var timer=null; var alpha=30; function startMove(target){ var odiv=document.getElementById("div1"); clearInterval(timer); timer=setInterval(function(){ var speed=0; if(alpha>target){ speed=-10; }else{ speed=10; } if(alpha==target){ clearInterval(timer); }else{ alpha+=speed; odiv.style.filter='alpha(opacity:'+alpha+')'; odiv.style.opacity=alpha/100; } },30); } </script> </head> <body> <div id="div1"> <img src="index/images/50.jpg"> </div> </body> </html>查看全部
-
透明度运动 1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=100) 2、由于无法获取对象的透明度，所以可通过变量储存。（var alpha=初始值 alpha+=speed） window.onload=function(){ var oDiv2=document.getElementById('div2'); oDiv2.onmouseover=function(){ change(30); }; oDiv2.onmouseout=function(){ change(100); }; }; //透明度运动 var timer2=null, alpha=100; function change(iTarget){ var oDiv2=document.getElementById('div2'); clearInterval(timer2); timer2=setInterval(function(){ if(alpha==iTarget){ clearInterval(timer2); }else{ if (alpha>iTarget) { alpha+=-10; }else{ alpha+=10; } oDiv2.style.opacity=alpha/100; oDiv2.style.filter=':alpha(opacity:'+alpha+')'; } },30); }查看全部
-
匀速运动：<br> 1、设置定时器，每隔一段时间更改位置，达到匀速运动<br> 2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器<br> 3、当运动位置达到目标值时，可通过清除定时器停止运动<br> 4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数<br> <script type="text/javascript"> window.onload=function(){ var oDiv1=document.getElementById('div1'); oDiv1.onmouseover=function(){ starMove(0); }; oDiv1.onmouseout=function(){ starMove(-200); }; }; //匀速运动 var timer1=null; speed=0; function starMove(iTarget){ var oDiv1=document.getElementById('div1'); clearInterval(timer1); timer1=setInterval(function(){ if(oDiv1.offsetLeft==iTarget){ clearInterval(timer1); }else{ if(iTarget<0){ speed=-10; }else{ speed=10; } oDiv1.style.left=oDiv1.offsetLeft+speed+'px'; } },30); }查看全部
-
function getStyle(obj,attr){<br> if(obj.currentStyle){<br> return obj.currentStyle[attr];}<br> else{<br> return getComputedStyle(obj,false)[attr];}<br> }<br> function startMove(obj,json,fn){<br> var flag=true;<br> clearInterval(obj.timer);<br> obj.timer=setInterval(function(){<br> for(var attr in json){<br> var icur=0;<br> if(attr=='opacity'){<br> icur=Math.round(parseFloat(getStyle(obj,attr))*100);<br> }<br> else{ icur=parseInt(getStyle(obj,attr));}<br> var speed=(json[attr]-icur)/8;<br> speed=speed>0?Math.ceil(speed):Math.floor(speed);<br> if(icur!=json[attr]){<br> flag=false;<br> }<br> if(attr=='opacity'){<br> obj.style.filter='alpha(opacity:'+(icur+speed)+')';<br> obj.style.opacity=(icur+speed)/100;<br> }<br> else{obj.style[attr]=icur+speed+'px';}<br> }<br> if(flag){<br> clearInterval(obj.timer);<br> if(fn){<br> fn();<br> }}<br> },30);<br> }查看全部
-
多物体运动时，变化对象不能共用查看全部
-
<script> window.onload=function(){ var odiv=document.getElementById("div1"); odiv.onmouseover=function(){ startMove(); } odiv.onmouseout=function(){ endMove(); } } var timer=null; function startMove(){ clearInterval(timer); var odiv=document.getElementById("div1"); timer=setInterval(function(){ if(odiv.offsetLeft==0){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft+10+'px'; } },50); } var timer=null; function endMove(){ clearInterval(timer); var odiv=document.getElementById("div1"); timer=setInterval(function(){ if(odiv.offsetLeft==-200){ clearInterval(timer); }else{ odiv.style.left=odiv.offsetLeft-10+'px'; } },50); } </script> </head> <body> <div id="div1"> <span>分享</span> </div> </body> </html>查看全部
举报
0/150
提交
取消