-
多物体运动<br> for循环来为每一个TagNameList[i]添加事件，并添加属性来区分各自的定时器(用于取消)<br> 利用参数中的this来指定所选择的当前元素<br> 多物体不要共用一个值,在对象上定义一个单独的属性保存值<br> 多物体运动注意：定时器、变量要定义为个体的，而不能公用查看全部
-
<script> window.onload=function(){ var oMove=document.getElementById('move'); var alist=oMove.getElementsByTagName("a") for(var i=0;i<alist.lenght;i++){ alist[i].onmouseover=function(){ var _this=this.getElementsByTagName("i")[0]; startMove(_this,{top:-25,opacity:0},function(){ _this.style.top=30+'px'; startMove(_this,{top:25,opacity:100}) }) } } } </script>查看全部
-
透明度运动 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); } </script>查看全部
-
<script> 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>查看全部
-
for(var i=0;i<ali.length;i++){ ali[i].time=null; ali[i].onmouseover=function(){ startMove(this,500) } ali[i].onmouseout=function(){ startMove(this,50) } }查看全部
-
<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>查看全部
-
对所有的元素添加事件，document.getElementByTagName('') 传参，改变对应元素的属性查看全部
-
<style type="text/css"> *{padding:0px; margin:0px;} #div1{width:200px; height:200px;background:#F00; border:1 solid red;left:-200px;top:0px;position:relative;} #share{width:20px; height:50px; background:blue;position:absolute;left:200px;top:75px;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); //startMove(-200); } oDiv.onmouseout=function(){ startMove(-200); //startMove(-200); } } var timer=null; function startMove(xTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); if(oDiv.offsetLeft >xTarget){ var speed=0; speed=-1; }else{ speed=1; } timer=setInterval(function(){ if(oDiv.offsetLeft == xTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },50) } </script> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>查看全部
-
通过学习了解了简单js框架的书写，知道json的简单用法。查看全部
-
speed=speed>0?Math.ceil(speed):Math.floor(speed);查看全部
-
<head> <title>无标题文档</title> <style type="text/css"> *{padding:0px; margin:0px;} #div1{width:200px; height:200px;background:#36C; border:1 solid red;left:-200px;top:0px;position:relative;} #share{width:20px; height:50px; background:blue;position:absolute;left:200px;top:75px;} </style> <script type="text/javascript"> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(0); //startMove(-200); } oDiv.onmouseout=function(){ startMove(-200); //startMove(-200); } } var timer=null; function startMove(xTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); if(oDiv.offsetLeft >xTarget){ var speed=0; speed=-1; }else{ speed=1; } timer=setInterval(function(){ if(oDiv.offsetLeft == xTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },50) } </script> </head>查看全部
-
Ps1：animate 时间参数还有：‘slow’‘fast’。 Ps2：防止鼠标事件多次触发，采用onmouseenter代替onmouseover；////mouseenter不带on 注意：图上第2、3个 this 指的是 find('i');。 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
@模仿淘宝转一圈效果 _this.style.top=30+'px';//这样的思想很赞！ 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
-
Ps1：/*JSON格式：*/ var json={a:0};//键值对{name:key} var json={a:0,b:1};//键值对{name1:key1,name2:key2}，多对 Ps2：/*for-in（for-each）*/ for(var i in json){ alert(i);//name值 alert(json[i]);//key值 } Ps3：/*最终封装的'完美移动框架'*/ 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]; } }查看全部
-
@多物体同时运动 这样写看似同时运动，但是会遇到覆盖前者和清除前者动画的冲突。 Ps：JS中，形参个数大于等于实参。Java SE中必须要等于。 【温馨提示：JavaSE/EE、SSH/SSM、Hybrid APP、JQ/JS/CSS3/H5等编程爱好者关注我，加我慕课好友，互相学习，共同进步！】查看全部
举报
0/150
提交
取消