-
【多个物体的宽度变化】 var aLi = document.getElementsByTagName("li"); for(var i=0; i<aLi.length; i++){ aLi[i].onmouseover = function(){ startMove(this,400); } aLi[i].onmouseout = function(){ startMove(this,200); } } var timer = null; function startMove(obj,iTarget){ clearInterval(timer); timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/8; speed = speed>0 ? Math.ceil(speed) :Math.floor(speed); if(obj.offsetWidth == iTarget){ clearInterval(timer); }else{ obj.style.width = obj.offsetWidth + speed + "px"; } },30) } 【bug】如果鼠标移动得够快,会出现3个矩形同时变宽。 原因:虽然每次一上来就clearInterval(timer),但是这个定时器是公用的,所以3个li同时在争着使用定时器 解决方法:给每一个li定义一个timer aLi[i].timer = null; 然后把需要timer的地方全部改成obj.timer查看全部
-
链式动画,在startMove(obj,attr,iTarget,fn)再加一个fn参数,并在清除动画之后,加入fn方法:if(fn){fn();} 在主页中,在三个参数之后再加入一个参数 startMove(Li,'width',400,function(){ startMove(Li,'height',200,function(){ startMove(Li,'opacity',100); }) }) function startMove(obj,attr,iTarget,fn){ //添加一个回调函数fn clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判断是否存在回调函数,并调用 fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
function startMove(obj,attr,iTarget,fn){ //添加一个回调函数fn clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ //判断是否存在回调函数,并调用 fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }else{ obj.style[attr]=icur+speed+'px'; } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝jQ运动</title> <style type="text/css"> * { padding: 0; margin: 0; } #move { width: 240px; margin: 10px auto; background-color: #f5f4f4; border: 1px solid #ccc; overflow: hidden; } #move a { float: left; display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background: #fff; text-align: center; margin: 10px 10px; 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; opacity: 1; filter: alpha(opacity=100); /*transition: all .3s ease-in;*/ } #move a:hover { color: #f00; } #move a:hover .i1{ -webkit-animation: taobao .5s ease-in-out .1s; -o-animation: taobao .5s ease-in-out .1s; animation: taobao .5s ease-in-out .1s; } /*#move a:hover .i1 {*/ /*top: -25px;*/ /*opacity: 0;*/ /*}*/ @keyframes taobao { from{ top: 20px; opacity: 1; } 50%{ top: -25px; opacity: 0; } 75%{ top: 30px; opacity: 0; } to{ top: 20px; opacity: 1; } } #move img { border: none; } </style> <!--<script type="text/javascript" src="jQ/jquery-1.4.4.min.js"></script>--> <!-- <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:'-25px',opacity:'0'},300,'swing',function(){ $(this).css({top:'30px'}) $(this).animate({top:'20px',opacity:'1'},300,'swing') }) }) }) </script> --> </head> <body> <div id='move'> <a href='#'><i class="i1"><img src="images/tickets.png"></i><p>彩票</p></a> <a href='#'><i class="i2"><img src="images/film.png"></i><p>电影</p></a> <a href='#'><i class="i3"><img src="images/fork.png"></i><p>外卖</p></a> <a href='#'><i><img src="images/fly.png"></i><p>缴费</p></a> <a href='#'><i><img src="images/game.png"></i><p>游戏</p></a> <a href='#'><i><img src="images/protection.png"></i><p>理财</p></a> </div> </body> </html>
查看全部 -
1、所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性。
注意:IE8和早期版本支持另一种过滤器属性。像:filter:Alpha(opacity=100)
2、由于无法获取对象的透明度,所以可通过变量储存。(var alpha=初始值 alpha+=speed)
3、IE:style.filter=‘alpha(opactiy:’+值+')' 非IE .style.opactiy=值/100(火狐或者chrome关于透明度的满值1,IE是100)
查看全部 -
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>缓冲运动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#div1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
left: -200px;
top: 0;
}
#div1 span{
width: 20px;
height: 50px;
background-color: blue;
position:absolute;
left: 200px;
top: 75px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById("div1");//oDiv是局部变量,只在此函数内有效
//鼠标移入事件
oDiv.onmouseover=function(){
starMove(0);
}
//鼠标移出事件
oDiv.onmouseout=function(){
starMove(-200);
}
var timer = null;
function starMove(target){
clearInterval(timer);//解决“speed”的叠加问题
var oDiv=document.getElementById("div1");
//创建一个定时器timer
timer=setInterval(function(){
var speed =(target - oDiv.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
if(oDiv.offsetLeft==target){
clearIntral(timer);//符合条件运动停止
}else{
oDiv.style.left=oDiv.offsetLeft+speed+'px';
}
},30);
}
}
</script>
</head>
<body>
<div id = div1>
<span>分享</span>
</div>
</body>
</html>
查看全部 -
<script> 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,liTa){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (liTa - obj.offsetWidth)/8; speed = speed > 0 ? Math.ceil(speed):Math.floor(speed); if(obj.offsetWidth == liTa){ clearInterval(obj.timer); }else{ obj.style.width = obj.offsetWidth+speed+'px'; } },30); } </script>查看全部
-
<!-- 使用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】 var timer = null; var alpha = 30; function startMove(iTarget){ var oDiv = document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(timer); }else{ alpha += speed; oDiv.style.filter = "alpha(opactiy:"+alpha+")";(IE) oDiv.style.opactiy = alpha/100;(火狐或chrome,它们的这个系数的满值是100,这里需要的满值是1) } },30) }查看全部
-
照着老师的代码打,发现有个问题,就是flag没有定义在定时器内。因为flag如果定义在定期器外,flag只执行了一遍,当循环了一次后,flag变成了false就不会再改变了。flag一直都是false,就无法关闭定时器和执行下一个函数了。 结论:flag要定义在定期器内查看全部
-
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0; padding:0;} #div1{width:500px; height:500px; background: #F00; opacity:0.3; filter:alpha(opacity:30);}/* opacity:0.3; filter:alpha(opacity:30)设置透明度*/ </style> <script type="text/javascript"> window.onload = function(){ var odiv = document.getElementById('div1'); odiv.onmouseover = function(){ startMove(100); } odiv.onmouseout = function(){ startMove(30); } } var time = null; var alpha = 30;//透明度没有属性所以,创建透明变量,并赋值属性 function startMove(iTarget){ var odiv = document.getElementById('div1'); clearInterval(time); time = setInterval(function(){ var speed = 0; if(alpha < iTarget){ speed = 10; } else { speed = -10; } if(alpha == iTarget){ clearInterval(time); } else { alpha += speed; odiv.style.filter = 'alpha(opacity:'+alpha+')'; odiv.style.opacity = alpha / 100; } },50); } </script> </head> <body> <div id="div1"> </div> </body> </html>查看全部
-
照着老师的代码打,发现有个问题,就是flag没有定义在定时器内。因为flag如果定义在定期器外,flag只执行了一遍,当循环了一次后,flag变成了false就不会再改变了。flag一直都是false,就无法关闭定时器和执行下一个函数了。 结论:flag要定义在定期器内(旗子要立好!!)查看全部
-
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多物体移动</title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;} </style> <script type="text/javascript"> window.onload=function(){ var olis=document.getElementsByTagName('li'); for(var i=0,l=olis.length;i<l;i++){ olis[i].timer=null; olis[i].onmouseover=function(){ startMove(this,400); } olis[i].onmouseout=function(){ startMove(this,200); } } } //var timer=null; function startMove(obj,target){ clearInterval(obj.timer); var speed=(target-obj.offsetWidth)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); obj.timer=setInterval(function(){ 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> </body> </html>查看全部
-
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>多物体改变透明度</title> <style> *{margin:0;padding:0;} div{width:100px;height:100px;margin:10px;float:left;background:green;filter:alpha(opacity:30);opacity:0.3;} </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0,l=oDiv.length;i<l;i++){ oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ startChange(this,100); } oDiv[i].onmouseout=function(){ startChange(this,30); } } } function startChange(obj,target){ clearInterval(obj.timer); var speed=obj.alpha>target?-10:10; obj.timer=setInterval(function(){ //var speed=obj.alpha>target?-10: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> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> </html>查看全部
-
缓动速度的计算:目标―当前/比例系数,可以得出速度的正负和速度的缓动,比例系数越大,速度越慢。 然后将速度进行取整处理,当速度为负数,向下取整,反之向上取整查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>获取样式</title> <style type="text/css"> #div1{ height: 200px; background: #f00; border:4px solid #0000FF } </style> </head> <body> <div id="div1" ></div> </body> <script type="text/javascript"> window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var div1=document.getElementById("div1"); //div1.style.width=div1.offsetWidth-1+"px"; //div1.style.width=parseInt(div1.style.width)-1+"px"; div1.style.width=parseInt(getStyle(div1,"width"))-1+"px"; },30); } //一封装好的函数。可以改变宽度,高度,字号。。。的大小。获取样式的封装函数 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr];//针对ie浏览器。 }else{ return getComputedStyle(obj,false)[attr];//针对firefox浏览器。 } } </script> </html> <!-- -->查看全部
举报