-
Math.round()，四舍五入 设置透明度： 对IE浏览器：filter:alpha(opacity:30); 对其他浏览器：opacity: 0.3; startMove(this,'opacity',100),this指代这个Li1,opacity是参数，也可以是width或者height,100为目标值，透明度的目标值。 Li1.onmouseover=function(){ startMove(this,'opacity',100); } 用getStyle这个方法去获取样式比用setoffWidth,更加准备，getStyle(obj,'width');是获取属性值，setoffWidth是获取整个盒子的值。（加边框） 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]; } }查看全部
-
1.过程：obj.stlye.width是样式中的块width；而obj.offsetWidth是显示的width(包括padding、border)，故obj.style.width=obj.offsetWidth-1=obj.style.width+borderWidth-1,当borderWidth＞1时,其实这是在加宽度而不是减宽度;<br><br><br> 2.原型为parseInt ( String s , [ int radix ] )，用于解析一个字符串，并返回一个整数。还有parseFloat,则解析一个字符串，返回一个浮点数;<br><br><br> 3.用js的style属性可以获得html标签的样式，但是不能获取非行间样式。即： 用document.getElementById(‘element').style.xxx可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就拿不到我们要的信息了。所以js用currentStyle和getComputedStyle获取css的非行间样式；<br><br><br> 3.var style = window.getComputedStyle("元素", "伪类");第二个参数“伪类”（如果不是伪类，设置为null）<br><br> 2、万能方法。<br><br> getComputedStyle(div,null).xxx 这个是标准方法，需要做一下兼容<br><br> currentStyle 是IE的<br><br> 3、友情赠送获取任何样式的代码<br><br> <br><br> function getStyle(obj,style){<br><br> if(obj.currentStyle){<br><br> return obj.currentStyle[style];<br><br> }else{<br><br> return getComputedStyle(obj,null)[style];<br><br> }<br><br> }查看全部
-
多物体运动 for循环来为每一个TagNameList[i]添加事件 并添加属性来区分各自的定时器(用于取消) 利用参数中的this来指定所选择的当前元素 多物体不要共用一个值,在对象上定义一个单独的属性保持值 存在多项共用一个值，并且这个值会发生改变时，最好单独给赋值，避免出现争用的情况。 <script> window.onload=function(){ var aLi=document.getElementsByTagName('li'); for(var i=0;i<aLi.length;i++){ // 给每一个li设置一个timer，才不会致使他们去抢timer aLi[i].timer=null; aLi[i].onmouseover=function(){ startMove(this,400); }; aLi[i].onmouseout=function(){ startMove(this,200) } } var oDivLi=document.getElementsByTagName('div'); for(var j=0;j<oDivLi.length;j++){ oDivLi[j].timer=null; oDivLi[j].alpha=30; oDivLi[j].onmouseover=function(){ startMove1(this,100); }; oDivLi[j].onmouseout=function(){ startMove1(this,30); } } };查看全部
-
Ps1：opacity：所有浏览器都支持 opacity 属性。 注释：IE8 以及更早的版本支持替代的 filter 属性。例如：filter:Alpha(opacity=50)。 Ps2：缓冲运动的速度值一定要转换成整数，不然将到达不了终点，是用Math.ceil(),还是Math.floor(),要看就提情况。 <body> <div id="d"> <div class="d1"></div> <div class="d2"></div> </div> <script type="text/javascript"> window.onload=function(){ var d=document.getElementById('d'); d.onmouseover=function(){ startMove(0); }; d.onmouseout=function(){ startMove(-500); }; }; var timer=null; function startMove(itarget){ var d=document.getElementById('d'); var speed; clearInterval(timer); timer=setInterval(function(){ speed=(itarget-d.offsetLeft)/10; speed=speed>0?Math.ceil(speed):Math.floor(speed); if(d.offsetLeft!=itarget){ d.style.left=d.offsetLeft+speed+'px'; }else{ clearInterval(timer); } }, 30); } </script>查看全部
-
原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小，即floor），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。 这一点可以用console.log(speed)可以验证，speed的log会一直输出，因为程序死循环了。 所以，需要ceil or floor来解决这个问题，让程序进入if的判断，终止循环查看全部
-
<!doctype html> <html> <head> <meta charset="utf-8"> <title>js动画制作</title> </head> <style> body,div,span{ margin:0; padding:0; } #div1{ height: 200px; width: 200px; background-color: #f00; position: relative; left: 0px; top: 0; opacity:0.3; filter:alpha(opacity：30） } </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(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.opacity = alpha/100 } },30) } </script> 所有主流浏览器(IE,Firefox,Opera,Chrome,Safari)都支持opacity属性 注意：IE8和早期版本支持另一种过滤器属性。像：filter:Alpha(opacity=50)查看全部
-
原因：因为有除法，当offsetLeft值变的越来越小时，最后相除会使speed变成小数，从而offsetLeft与speed相加会有小数，又因显示器的最小像素单位是1px，所以浏览器默认向下取整（变小，即floor），将小数省略，小数省略后，最终的值会变小，从而导致程序无法进入if判断，进入死循环。 这一点可以用console.log(speed)可以验证，speed的log会一直输出，因为程序死循环了。 所以，需要ceil or floor来解决这个问题，让程序进入if的判断，终止循环。查看全部
-
匀速运动：<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); }查看全部
-
运动框架实现思路： 1.速度（改变值left、right、width、height、opacity） 2.缓冲运动 3.多物体运动 4.任意值变动 5.链式运动 6.同时运动查看全部
-
onmouseenter 事件在鼠标指针移动到元素上时触发。 提示： 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发。 提示： onmouseenter 事件类似于 onmouseover 事件。 唯一的区别是 onmouseenter 事件不支持冒泡 。查看全部
-
滑块匀速查看全部
-
先把js学号，jquery就好理解德多了查看全部
-
filter：opcity：70 这是针对ie进行优化的，其它浏览器不行查看全部
-
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的非行间样式； 4.var style = window.getComputedStyle("元素", "伪类")；第二个参数“伪类”（如果不是伪类，设置为null） function getStyle(obj,style){ //引用时style要带引号 if(obj.currentStyle){ return obj.currentStyle[style]; }else{ return getComputedStyle(obj,null)[style]; }}查看全部
举报
0/150
提交
取消