-
为什么同样的代码chrome可以完美运行但是在IE里甚至都不能运行起来，什么变化都没有查看全部
-
链式动画其实就是在原来的基础上多传一个参数，作为回调函数，确认一个变化执行完以后就执行该函数。嵌套函数。查看全部
-
照着老师的代码打，发现有个问题，就是flag没有定义在定时器内。因为flag如果定义在定期器外，flag只执行了一遍，当循环了一次后，flag变成了false就不会再改变了。flag一直都是false，就无法关闭定时器和执行下一个函数了。 结论：flag要定义在定期器内（旗子要立好！！）求赞！查看全部
-
<script> $(function(){ $("#move a").mouseenter(function(){ $(this).find('i').animate({top:"-25x",opacity:"0"},300,function(){ $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }) }) </script>查看全部
-
css有三种样式：1.内联样式，2.嵌入样式，3.外部样式. 在js中，获取这样三种样式的方法是有限制的，style只能获取元素的内联样式，嵌入样式和外部样式使用style是获取不到的，js提供了另外的获取方式，嵌入样式和外部样式可以通过currentStyle(IE浏览器),getComputedStyle(Firefox,opera,safari,chrome浏览器)的方式获取.使用方法:window.currentStyle[attr]和window.getComputedStyle(obj,false)[attr];查看全部
-
这章其实有个BUG,代码应该和我一样，才行 if(iCur!=json[attr]){ flag=false; if(attr=='opacity'){ obj.style.filter=.......; obj,style.opacity=......; }else{ obj.style[attr]=....... } } 应当把这个if()else()包裹在if(iCur!=json[attr]){}这个循坏里面查看全部
-
实现思路查看全部
-
【同时运动】 如果写成startMove(oLi,"width",400);startMove(oLi,"height",200); 只有高改变了，因为第二句覆盖了第一句（startMove一上来第一件事就是清除计时器）查看全部
-
【getStyle】如果页面不仅仅有宽和高，而是有好多别的样式，那么前面学的offsetLeft之类的都应该换成getStyle function getStyle(obj,attr){ if(obj.currentStyle){//IE浏览器 return obj.currentStyle[attr]; }else{//firefox浏览器 return getComputedStyle(obj,false)[attr]; } } 使用方法为parseInt(getStyle(oDiv,"width")) 【封装函数】有的需要改变宽，有的需要改变高obj.style.width也可以写成obj.style['width'] function startMove(obj,attr,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ 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); }else{ obj.style[attr] = icur + speed + "px"; } },30) } 调用方式如startMove(this,"height",400);查看全部
-
【多个物体的透明度变化】 var oDiv= document.getElementsByTagName("div"); for(var i=0; i<oDiv.length; i++){ aLi[i].onmouseover = function(){ startMove(this,100); } aLi[i].onmouseout = function(){ startMove(this,30); } } var alpha = 30; function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = 0; if(alpha > iTarget){ speed = -10; }else{ speed = 10; } if(alpha == iTarget){ clearInterval(obj.timer); }else{ alpha += speed; obj.style.filter = "alpha(opactiy:"+alpha+")"; obj.style.opactiy = alpha/100; },30) } 【bug】与上次现象相同，鼠标移动足够快的时候回看到多个物体的透明度同时为100% 分析：虽然这里的timer已经分开了，但alpha还是公共的。 【只要是多物体运动，所有的东西都不能公用】 解决方法：跟前面类似，定义oDiv.alpha[i] = 30;然后需要用到alpha的地方换成oDiv.alpha查看全部
-
首先css样式表有三种样式， 一、内联样式 在HTML标签用style属性设置，如 ： <p >这是内联样式</p> 二、嵌入样式 通过<head>标签内通过<style>标签设置。如： <style type="text/css"> /*这是嵌入样式*/ .stuff{color:#f90} </style> 三、外部样式 通过<link>标签设置。如： <link rel="stylesheet" href="path/style.css" type="text/css"> 而在javascript中，获取这三种样式表的方法是有限制的，style只能获取元素的内联样式， 嵌入样式和外部样式使用style是获取不到的，javascript提供了另外的获取方式，嵌入样式和外部样式可以通过currentStyle（IE浏览器）、getComputedStyle（Firefox、opera、safari、chrome浏览器）的方式获取。 使用方法分别是window.currentStyle["attr']和window.getComputedStyle(ob, pseudoElt)["attr']。查看全部
-
json数据格式{a:value,b:value} 取数据时要用到for-in语句 for(var i in json){alert(i);alert(json[i]);}//alert(i)输出的是a和b，alert(json[i])输出的是value. 此外，将对象转换为json数据时，可使用google开发的gson，里面封装了fromJson和toJson2个方法。查看全部
-
<script> window.onload=function(){ var aList=document.getElementsByTagName('a'); for(var i=0;i<aList.length;i++){ aList[i].onmouseenter=function(){ var _this=this.getElementsByTagName('i')[0]; move(_this,{top:-15,opacity:0},function(){//注意top后面不要带px _this.style.top=25+'px';//为了图标回来的时候是从下面回来.这里必须用+来连接字符串 move(_this,{top:15,opacity:100}) }) } } } // 由于onmouseover事件冒泡，所以当鼠标在a标签内不断移动（不出a标签的范围）会不断碰到a标签内的子元素，事件再冒泡到a,使得不断出发a.onmouseover事件，结果就是里面的小图片不停地动，改成onmuseenter,这个事件不冒泡或者写代码取消onmouseover的冒泡。 </script>查看全部
-
Ps3：动画大致模版（思路）： <script type="text/javascript"> var timer=null; function startMove (iTarget) { clearInterval(timer); var obj=document.getElementById('obj'); timer=setInterval(function () { var speed=0; if(obj.属性>iTarget){ spped=-num; } else{ speed=num; } if(obj.属性==iTarget){ clearInterval(timer); } else{ obj...=obj.属性+speed... } }, 毫秒) } </script> var speed = (iTarget-oDiv.offsetLeft)/10; //如果速度是正的 则向上取整。速度是负的向下取整 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); 由于数值设置的原因，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。查看全部
-
jQuery动画案例 通过改变setInterval()的时间值，改变动画的快和慢 jq方法实现动画效果： <script src="js/move.js"></script> <script> $(function(){ $('#move a').mouseenter(function(){ $(this).find('i').animate({top:"-25px",opacity:"0"},300,function(){ //300表示速度，以毫秒为单位，也可用非数值的"slow"、"fast"等表示 $(this).css({top:"30px"}); $(this).animate({top:"20px",opacity:"1"},200) }) }) }) </script> <body> <div id="move"> <a href="#"><i><img src="..."/></i><p>...</p></a> ...... <a href="#"><i><img src="..."/></i><p>...</p></a> </div> </body>查看全部
举报
0/150
提交
取消