-
照着老师的代码打，发现有个问题，就是flag没有定义在定时器内。因为flag如果定义在定期器外，flag只执行了一遍，当循环了一次后，flag变成了false就不会再改变了。flag一直都是false，就无法关闭定时器和执行下一个函数了。 结论：flag要定义在定期器内（旗子要立好！！）求赞！ 时间: 2016-04-04查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>淘宝js运动</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); } #move a:hover { color: #f00; } #move img { border: none; } </style> <script type="text/javascript" src="../move.js"></script> <script> window.onload=function(){ var oMove=document.getElementById('move'), aList=oMove.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ //onmouseenter不会影响子元素，不会引发事件冒泡 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> </head> <body> <div id='move'> <a href='#'><i><img src="images/tickets.png"></i><p>彩票</p></a> <a href='#'><i><img src="images/film.png"></i><p>电影</p></a> <a href='#'><i><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>//完美运动框架 //获取css属性 function getStyle(obj, attr) { if (obj.currentStyle) { //针对IE8获取元素某项css属性 return obj.currentStyle[attr]; } else { //针对其他浏览器，false为伪类选项 return getComputedStyle(obj, false)[attr]; } } //若传入fn(用于函数回调)执行链式运动 //startMove(obj,{attr1,iTarget1,attr2,iTarget2}, fn) function startMove(obj, json, fn) { clearInterval(obj.timer); obj.timer = setInterval(function() { var flag = true; //每次循环初始化flag值,否则flag无法为true，定时器无法真正结束 //for()in遍历循环,将json中以attr属性循环，json[attr]为它的对应值 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) / 5; //speed类整数变量需要判断取整 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //3.检测停止 //只要有一个运动目标没有完成，则flag为false，未完成运动继续执行 //已达到的运动目标会因为speed最终等于0而“停止”，没有实际停止定时器 if (iCur != json[attr]) { flag = false; } if (attr == 'opacity') { obj.style.filter = 'alpha(opacity:' + (iCur + speed) + ')'; obj.style.opacity = (iCur + speed) / 100; } else { //用style[]追加变量，因为attr传入的是字符所以不能用style.xxx obj.style[attr] = iCur + speed + 'px'; } } //如果flag成立，即所有运动目标完成，则停止定时器，判断是否有回调函数存在 if (flag) { clearInterval(obj.timer); if (fn) { //为了不让fn()在回调时指向window，用call()改变this指向 //var that=this也可以 fn.call(obj); } } }, 10)//时间间隔,变更达到增减动画速度 }查看全部 -
//最终封装的'完美移动框架' function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
Ps1：opacity：所有浏览器都支持 opacity 属性。<br> 注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。<br> <br> Ps2：缓冲运动的速度值一定要转换成整数，不然将到达不了终点，是用Math.ceil(),还是Math.floor(),要看就提情况。 Math.floor();向下取整 Math.ceil();向上取整 由于数值设置的原因，div移动到一定px后，进行相减再除20的运算后会出现小数，比如0.75，比如这时div移动到了290，程序里写到div的left=oDiv.offsetLeft+speed+'px',那么div的left就是290.75px,而浏览器是不允许出现小数的，会把0.75去掉，那么div的left就成了290，下次执行时div的left是290，算出来速度还是0.75，浏览器又省略了小数，结果就是div停在了290px，到不了目标点300。查看全部
-
匀速运动：<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); }查看全部
-
//之前老师的代码有一个小bug，解决后的代码 function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } } //json = {attr1:iTarget1,attr2:iTarget2} function startMove(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.filter = 'alpha(opacity:'+(icur+speed)+')'; //IE obj.style.opacity = (icur+speed)/100; } else { obj.style[attr] = icur + speed +'px'; } if(flag) { clearInterval(obj.timer); flag = true; if(fn){ fn(); } } } },20); }查看全部
-
//最终封装的'完美移动框架' function startMove(obj,json,fn){ var flag=true;//标志所有运动是否到达目标值 clearInterval(obj.timer); obj.timer=setInterval(function(){ for(var attr in json){ var curr=0; //判断是否为透明度 if(attr=='opacity'){ curr=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ curr=parseInt(getStyle(obj,attr)); } //移动速度处理 var speed=0; speed=(json[attr]-curr)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(curr!=json[attr]){ flag=false; } if (attr=='opacity') { obj.style.filter='alpha(opacity:'+(curr+speed)+")"; obj.style.opacity=(curr+speed)/100; }else{ obj.style[attr]=curr+speed+'px'; } } if(flag){ clearInterval(obj.timer); if(fn){ fu(); } } },30); } //取样式 function getStyle(obj,attr){ if(obj.currentStyle){//IE取样式 return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
<!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 =0;
if(oDiv.offsetLeft > target){
speed = -10;
}else{
speed = 10;
}
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>
查看全部 -
在这里会出现两个BUG。我都完美的解决了。不要像别人说的那么繁琐。第一个肯定是不能执行回调涵数。只要把flag=true放到定时器下面。 第个就是当鼠标移动的时候会出现多次执行涵数，只要鼠标小小的动一下就会执行动画。只要把onmouseover 改成onmouseenter就可以了。这样两个BUG就都解决了查看全部
-
看完最后一节课感觉没必要学js啊，直接学jquery不是方便多了吗？查看全部
-
1.过程：obj.stlye.width是样式中的块width；而obj.offsetWidth是显示的width(包括border之类的)，故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth＞1时,其实这是在加宽度而不是减宽度; 2.原型为parseInt ( String s , [ int radix ] )，用于解析一个字符串，并返回一个整数。还有parseFloat,则解析一个字符串，返回一个浮点数; 3.用js的style属性可以获得html标签的样式，但是不能获取非行间样式。即： 用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。所以js用currentStyle和getComputedStyle获取css的非行间样式； 3.var style = window.getComputedStyle("元素", "伪类");第二个参数“伪类”（如果不是伪类，设置为null） (但是课堂里老师设置为false是何解？)查看全部
-
//同时运动框架 function startMove(obj,json,fn){ clearInterval(obj.timer);//清除定时器，避免重复生成多个定时器 obj.timer=setInterval(function(){ var flag=true;//假设刚开始时所有运动都已完成 for (var attr in json) {//遍历json var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(json[attr]-icur)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur!=json[attr]){ 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(); } } },30); } function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,false)[attr]; } }查看全部
-
window.onload=function(){ var Li1=document.getElementById('li1'); var Li2=document.getElementById('li2'); Li1.onmouseover=function(){ startMove(Li1,'height',400); } Li1.onmouseout=function(){ startMove(Li1,'height',200); } Li2.onmouseover=function(){ startMove(Li2,'width',400); } Li2.onmouseout=function(){ startMove(Li2,'width',200); } } function startMove(obj,attr,iTarget){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=parseInt(getStyle(obj,attr)); var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }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){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(icur==iTarget){ clearInterval(obj.timer);//1.2+++ }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> <title> new document </title> <style> *{padding:0;margin:0;} #div1{height:200px;width:200px;position:relative;background:#F00;left:-200px;top:0px;} #div2{height:200px;width:200px;background:#66F; filter:alpha(opacity:50);opacity:0.5;-moz-opacity:0.5;} #share{height:32px;line-height:16px;width:15px; background:#03F;color:#fff;position:absolute;left:200px;top:85px;} #ul li{height:50px;width:200px; background:#FF3;margin:10px 0px;border:4px solid #39F;opacity:1; filter:alpha(opacity:100); cursor:pointer;} </style> <script> window.onload = function(){ var oDiv=document.getElementById("div1"); var aDiv=document.getElementById("div2"); var aLi=document.getElementsByTagName("li"); //鼠标移入,div1滑出 oDiv.onmouseover = function(){ startMove(oDiv,{left:0}); } //鼠标移开,div1滑回 oDiv.onmouseout = function(){ startMove(oDiv,{left:-200}); } //鼠标移入,div2透明度变100 aDiv.onmouseover = function(){ startMove(aDiv,{opacity:100}); } aDiv.onmouseout = function(){ startMove(aDiv,{opacity:30}); } //黄块组合运动 for(i=0;i<aLi.length;i++){ aLi[i].timer=null; //给每个li单独添加定时器，避免公用定时器 aLi[i].onmouseover = function(){ var nextE=this; startMove(this,{width:400,height:100},function(){ startMove(nextE,{opacity:50}); }); } aLi[i].onmouseout = function(){ startMove(this,{opacity:100,width:390,height:50}); } } } //var timer=null; //json // var json = {a:2,b:7,c:0}; // for(var i in json){ // //alert(i); //依次弹出变量a,b,c // alert(json[i]); //依次弹出变量的值2,7,0 // } //Start运动框架 //json语句 // var json = {a:2,b:7,c:0}; // for(var i in json){ // //alert(i); //依次弹出变量a,b,c // alert(json[i]); //依次弹出变量的值2,7,0 // } //startMove(obj,{attr1:itarget1,attr2:itarget2},fn) //attr表属性，iTarget表目标值，多个属性目标值组成json数组 function startMove(e,json,fn){ //e表对象，json表{attr1:itarget1,attr2:itarget2,···}，fn表回调函数 clearInterval(e.timer); //清除定时器，e.timer表示给每个对象定义一个定时器，避免共用一个定时器 e.timer = setInterval(function(){ for(var attr in json){ //定义attr为json中的变量，即属性，遍历所有属性。避免一个属性变化完后，其他属性也停止变化 var flag = true; //假设所有属性都已经满足icur == json[attr]时，flag为true //取当前的值 var icur=0; if(attr == 'opacity'){ icur=Math.round(parseFloat(getStyle(e,attr))*100); } else{ icur=parseInt(getStyle(e,attr)); } //算速度 var speed=(json[attr]-icur)/5; speed=speed>0?Math.ceil(speed):Math.floor(speed); //检测停止 if(icur != json[attr]){ //json[attr]表示iTarget,即如果当前存在属性值不等于目标值,flag值为false flag=false; } if(attr == 'opacity'){ e.style.opacity=(icur+speed)/100; e.style.filter="alpha(opacity:"+icur+speed+")"; } else{ e.style[attr]=icur+speed+"px"; } } if(flag){ //flag为true，即所有当前属性值等于目标值时时，执行下面的方法 clearInterval(e.timer3); if(fn){ fn(); } } },50) } //获取样式,兼容处理 function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } //End运动框架 </script> </head> <body> <div id="div1"> <span id="share">分享</span> </div> <div id="div2"></div> <ul id="ul"> <li id="li1"></li> <li id="li2"></li> <li id="li3"></li> </ul> </body> </html>查看全部
举报
0/150
提交
取消