-
setInterval（函数，毫秒）；定时器
ele.style.left 修改left
ele.offsetLeft 当前的left
ele.style.left = ele.offsetLeft + n + 'px' 记得加px
timer = 定时器
clearInterval（timer）；清空定时器
记得一开始执行函数的时候应该清空定时器
onmouseover 鼠标移入
onmouseout鼠标移除
position:relative;指相对于自己原本的位置偏移；position:absolute;指相对于父元素的定位
<span></span>是行内元素，要添加position或者display才能设置宽度和高度
设置圆角半径border-radius
元素运动的单位距离跟运动范围长度相关，距离为非整数时，单位距离设置成整数可能出现问题，要注意调整
查看全部 -
其他方法发获取属性 特别是增加很多了属性时 用这个函数 传入参数 判断参数 实现效果 注意 透明度是opacity是小数 用parseInt不合适 应该parseFloat 四舍五入 Math.round(opacity)查看全部
-
parseInt（）获取整数
透明度都是以小数get到，
透明度没有单位
obj.style.filter = 'alpha(opacity:' + (当前值+变量) + ')'; //针对IE浏览器
obj.style.opacity = (当前值，+ 变量）/100;//针对Firefox和Chrome浏览器
Math.round()//四舍五入的函数
查看全部 -
在有边框的时候offset会出现很多问题
框架思想，当框架差不多但是有一点区别的时候，可以将区别变为参数
查看全部 -
function getStyle(obj,attr){//获取样式
if(obj.currentStyle){
return obj.currentStyle[attr];//currentStyle针对IE浏览器
}
else{
return getComputedStyle(obj,false)[attr];//针对Firefox浏览器
}
}
获取的时候：parseInt（getStyle（obj，‘width’））
查看全部 -
多物体动画的时候，为了防止鼠标移动过快导致的定时器争抢，我们定义
obj.timer
每个obj用一个定时器就不会出现争抢了
多物体运动的时候，避免公用变量，
查看全部 -
Math.floor(num);向下取整
Math.ceil(num);向上取整
var speed = (iTarget-ele.offsetLeft)/20;
speed = speed>0?Math.ceil(speed):Math.floor(speed);//凡是运动，要添加向下向上取整，以防出现错误
ele.style.left = ele.offsetLeft + speed + 'px';
查看全部 -
ele.offsetXX 只有宽高左右
filter：alpha（opacity：30）；css中透明度30
opacity：0.3
ele.style.fiter = 'alpha(opactiy:'+alpha + 速度+')';
ele.style.opacity = (alpha+速度)/100;
查看全部 -
setInterval（函数，毫秒）；定时器
ele.style.left 修改left
ele.offsetLeft 当前的left
ele.style.left = ele.offsetLeft + n + 'px' 记得加px
timer = 定时器
clearInterval（timer）；清空定时器
记得一开始执行函数的时候应该清空定时器
查看全部 -
运动框架实现思路
查看全部 -
运动框架的实现思路
1，速度（left,right,width,height,opacity）
2 ，缓冲运动
3,，多物体运动
4，任意值变化
5，链式运动
6，同时运动
查看全部 -
css透明度{
opacity：0-1；
filter：Alpha（opacity = 0-100）；
}
查看全部 -
运动框架实现思路
查看全部 -
window.onload=function(){
var para=document.getElementsByTagName("li");
for(var i=0;i<para.length;i++){
para[i].timer=null;
para[i].onmouseover=function(){
startMove(this,500);
}
para[i].onmouseout=function(){
startMove(this,300);
}
}
function startMove(obj,target){
clearInterval(obj.timer);
obj.timer=setInterval(function()
{
var speed=(target-obj.offsetWidth)/20;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.offsetWidth==target){
clearInterval(obj.timer);
}
else{
obj.style.width=obj.offsetWidth+speed+"px";
}
},30)
}
}查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS速度动画</title> <style> *{ padding:0; margin: 0; } .shareWrap{ width: 200px; height: 150px; background: burlywood; margin-top: 50px; position: relative; left: -200px; } .shareWrap .share{ display: inline-block; width: 22px; background: aquamarine; padding: 2px 4px; position: absolute; top: 0; right: -30px; } </style> </head> <body> <div class="shareWrap" id="shareWrap"> <span class="share">分享</span> </div> <script> window.onload = function() { var oDiv = document.getElementById('shareWrap'); var timer = null; // 鼠标移入按钮动画 oDiv.onmouseover = function(){ startMove(0); }; function startMove(iTarget){ clearInterval(timer); timer = setInterval(function(){ var speed = 0; if (oDiv.offsetLeft > iTarget){ // 当左侧偏移量大于目标位置时，那么速度是向左移动，为负值， 否则为正值 speed = -10; }else{ speed = 10; } if (oDiv.offsetLeft === iTarget){ //当元素移动到目标位置时，清除定时器停止移动 clearInterval(timer); }else{ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30); } // 鼠标移出按钮动画 oDiv.onmouseout = function(){ startMove(-200); } } </script> </body> </html>查看全部
举报