-
//mouseenter不带on查看全部
-
防止鼠标事件多次触发，采用onmouseenter代替onmouseover查看全部
-
overflow:hidden;//防止溢出 text-decoration:none;//去除li的小黑dian display:inline-block;//内联块查看全部
-
<a>的href具有将鼠标变点击手型的功能 鼠标事件要使用this传递参数 使用层层递进，不要一下就访问到子元素<i>查看全部
-
内部JS和外部JS的方法 <script src="js/move.js"> </script> <script> window.onload=function(){ var move=document.getElementById("move"); var oa=move.getElementsByTagName("a"); for(var i=0,len=oa.length;i<len;i++){ oa[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0];//这里得使用this,在鼠标运动中只能使用this，内函数无法识别oa[i] startMove(_this,{top:-10,opacity:0},function(){ _this.style.top=10+'px'; startMove(_this,{top:5,opacity:100}); });} } } </script>查看全部
-
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>仅使用opacity来实现透明度问题，请大神指教会不会产生兼容性问题</title> <style> *{margin:0;padding:0} #odiv{ width:200px; height:200px; left:0; top:0; position:relative; opacity:0.1; background:red; /*filter:alpha(opacity:30);*/ opacity:0.3; } </style> <script> window.onload=function(){ var odiv=document.getElementById('odiv'); odiv.onmouseover=function(){ change(1); } odiv.onmouseout=function(){ change(0.1); } } var timer=null; var opacit=0.3; function change(target){ var odiv=document.getElementById('odiv'); clearInterval(timer); var speed=0.1; timer=setInterval(function(){ if(opacit>target){ speed=-0.1; }else{ speed=0.1; } if(opacit==target){ clearInterval(timer); } else{ opacit=opacit+speed; odiv.style.opacity=opacit; } },50); } </script> </head> <body> <div id="odiv"></div> </body> </html>查看全部
-
达到目标速度变为0，所有的为0即可停止定时器。已完成的停止 未完成的继续，不会过运动查看全部
-
//最终封装的'完美移动框架' 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]; } }查看全部
-
json名称为字符串查看全部
-
接上 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 == true) {//if(flag == true) {clearInterval(obj.timer);if(fn){return fn();}}//应该放在var attr in json 的同级，不能包含在里面 clearInterval(obj.timer); if(fn){ return fn();} } },30); }查看全部
-
接上 //json = {attr1:iTarget1,attr2:iTarget2} function startMove(obj,json,fn){ clearInterval(obj.timer); //标志所有运动是否到达目标值 obj.timer = setInterval(function(){ var flag = true;/*//var flag=ture;//应当放在setInterval里，var attr in json的前面，，当for(var attr in json)遍历执行一遍后，即无运动了，会自动跳出遍历，定时器再次设定flag=true，这时候就可以终止定时器了，与单片机不同，单片机一次只能执行一条语句，这里使用遍历可以同时执行多个语句*/查看全部
-
window.onload = function(){ var Li1=document.getElementById('Li1'); Li1.onmousemove=function(){ startMove(Li1,{"opacity":100,"width":400}, function(){startMove(Li1,{"opacity":80,"width":500})}); } Li1.onmouseout=function(){ startMove(Li1,{opacity:30,width:200}); } } function getStyle(obj,attr){ if(obj.currentStyle){ //IE return obj.currentStyle[attr]; } else { return getComputedStyle(obj,false)[attr]; } }查看全部
-
if(flag == true) {clearInterval(obj.timer);if(fn){return fn();}}//应该放在var attr in json 的同级，不能包含在里面 var flag=ture;//应当放在setInterval里，var attr in json的前面， 缺点是for（var attr in json）无终止条件查看全部
-
for...in循环用来遍历一个对象的全部属性。查看全部
-
obj.style.width 是获取的content区的宽度，并且只能获取行内样式；而offsetWidth获取的是盒子宽度。查看全部
举报
0/150
提交
取消