-
window.onload = function(){ var oDiv = document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null function startMove(offleft){ clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function(){ var speed = 0; if(oDiv.offsetLeft > offleft ){ speed = -10; }else if(oDiv.offsetLeft < offleft) { speed = 10; }else{ clearInterval(timer); } oDiv.style.left = oDiv.offsetLeft+speed+'px'; },30); }查看全部
-
匀速运动：<br> 1、设置定时器，每隔一段时间更改位置，达到匀速运动<br> 2、设置定时器前需清除定时器，以防多次触发重复生成多个定时器<br> 3、当运动位置达到目标值时，可通过清除定时器停止运动<br> 4、当定义函数多处相同时，可封装为一个函数，用不同参数调用，尽量少传递相同的参数<br>查看全部
-
setInterval无法执行问题已解决，代码太长，放不到笔记上，已放博客http://blog.csdn.net/need_just_word/article/details/79032185查看全部
-
写定时器setInterval函数第一条要清楚定时器，否则会多次触发多个定时器查看全部
-
写动画前要清楚浏览器默认样式*{margin:0;padding:0} 否则px会跳跃查看全部
-
offsetLeft和style.left的区别： offsetLeft返回的是数字，style.left返回的是字符串，除了数字还有‘px’; offsetLeft只读，style.left可写。 这里style.left是随定时器而变动的。查看全部
-
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。 clientWidth是对象看到的宽度（含padding，不含border） offsetWidth是指对象自身的宽度（含padding，含border） scrollWidth是对象实际内容的宽度（含padding，含border，含滚动条） JS中 obj.style.attr 只能获取行内样式 要获取非行内样式要通过obj.currentStyle[attr]或者getComputedStyle(obj,false)[attr]方法获取 可以封装为 function getStyle(obj,attr){ //currentStyle针对IE浏览器； if(obj.currentStyle){ return bj.currentStyle[attr]; }else{ //getComputedStyle 针对Firefox浏览器 return getComputedStyle(obj,false)[attr] } } obj.offsetWidth 返回值是数值所以不用parseInt（）；而obj.style.width获取的是像素值 （当给div增加边框值时，且宽度在内联样式里设置，js中obj.offsetWidth返回值中包括有边框，所以会导致js程序中数值的判断有误。当把宽度设置到行内样式时，上述的现象则没有。）查看全部
-
1.速度（改变值left,right,width,height.opacity透明度） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动查看全部
-
一：如果将var flag=true 放在定时器外，定时器内部函数只能将flag变为false,不能完成链式运动。 二：如果将var flag=true 放在定时器内，假设json参数第一二个分别是width、height，若width已经到达final值，flag仍为true，不会设置为false，就会清除定时器 结论：只有当json内的所有参数都达到final值，才能执行消除定时器的操作。将var flag=true放在定时器内部最开头，在定时器内部设置一个getFlag()的函数，此函数遍历json所有参数是否到达final值，只有所有参数都达到final值，flag才会为true。查看全部
-
样式： <style> * { margin: 0; padding: 0; } #move { padding: 10px; width: 300px; background: #f4f4f4; margin : 10px auto; border: 1px solid #ccc; margin: 10px auto; } #move a { display: inline-block; width: 58px; height: 25px; border: 1px solid #ddd; border-radius: 3px; background-color: #fff; text-align: center; margin: 10px 17px; 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; filter: alpha(opacity = 100); opacity: 1; } #move a:hover { color: #F00; } #move img { border: none; } </style>查看全部
-
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。查看全部
-
getStyle函数查看全部
-
// 设置timer var moveFlag = null; /** * 定义移动函数 * moveTarget 移动的目标位置 * moveObject 需要移动的对象 */ function startMove(moveObject, moveTarget) { clearInterval(moveFlag); moveFlag = setInterval(function() { //移动速度等于目标减去实时的位移，放慢15倍 var speed = (moveTarget - moveObject.offsetLeft) / 15; //从负数到0向上取整，从0到负数向下取整 speed = moveTarget == 0 ? Math.ceil(speed) : Math.floor(speed); //移动操作 if (moveObject.offsetLeft !== moveTarget) { moveObject.style.left = moveObject.offsetLeft + speed + "px"; } else { clearInterval(moveFlag); } }, 10); }查看全部
-
1.offsetWidth属性可以返回对象的padding+border+width属性值之和，style.width返回值就是定义的width属性值。 2.offsetWidth属性仅是可读属性，而style.width是可读写的。 3.offsetWidth属性返回值是整数，而style.width的返回值是字符串。 4.style.width仅能返回以style方式定义的内部样式表的width属性值。查看全部
-
<!-- 使用js实现透明度运动而不采用直接设置css的style.opacity属性来改变透明度,这是因为css的透明度的设置是一步到位，瞬时完成的，而使用js可以实现渐隐特效 --> opacity是不透明度，opacity为0时表示不透明度是0也就是完全透明(效果等同于css的隐藏) filter: alpha(opacity:30); /*IE浏览器专用，opacity属性值为0~100*/ opacity:0.3; /*所有主流浏览器都支持opacity属性。查看全部
举报
0/150
提交
取消