JS动画效果_学习笔记

首页免费课 JS动画效果笔记

JS动画效果

最热最新

专注的前端工程师

鼠标快速移入移出有bug，待解决 △一般使用动画时，都要运用向上向下取整 1、速度的定义： var speed=(目标值-当前值（offset）)/参数； 2、取整函数：向下取整：Math.floor(3.55);//3.55是取整的数值，结果为：3 向上取整：Math.ceil(3.35);//结果为：4 3、速度的取整判断： speed=speed>0?Math.ceil(speed):Math.floor(speed);//

查看全部

1 采集收起来源：JS缓冲动画
2018-03-22
Merlini_zc

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js动画效果</title> <style> *{ margin: 0; padding: 0; font-family: "微软雅黑"; } #box1{ position: absolute; left: -200px; background-color: blue; height: 200px; width: 200px; cursor: pointer; } #box1 span{ background-color: red; position: absolute; left: 200px; top: 80px; } </style> </head> <body> <div id="box1"> <span>分享</span> </div> </body> <script src="script.js"></script> </html>

查看全部

1 采集收起来源：JS速度动画
2018-03-22
萝卜蛋蛋

<!doctype html> <html> <head> <title></title> <meta charset='UTF-8'/> <style type='text/css'> *{ padding:0; margin:0; } #div1{ width:200px; height:100px; background:red; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.onmouseover=function(){ startMove(1000); } oDiv.onmouseout=function(){ startMove(100); } var timer=null; function startMove(iTarget){ clearInterval(timer); timer=setInterval(function(){ var speed=0; if(iTarget>200){ speed=10; }else{ speed=-10; } if(oDiv.offsetWidth==iTarget){ clearInterval(timer); }else{ oDiv.style.width=oDiv.offsetWidth+speed+'px'; } },30); } } </script> </head> <body> <div id='div1'></div> </body> </html>

查看全部

1 采集收起来源：JS速度动画
2018-03-22
陌熙

<title>多物体-透明度运动</title> <meta charset="utf-8"/> <style type="text/css"> *{margin:0; padding:0;} div{width:200px; height:200px; margin:10px; float:left; background: #F00; opacity:0.3; filter:alpha(opacity:30);} </style> <script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementsByTagName('div'); for(var i=0 ;i<oDiv.length ;i++){ oDiv[i].timer = null; oDiv[i].alpha = 30; oDiv[i].onmouseover = function(){ startMove(this,100); } oDiv[i].onmouseout = function(){ startMove(this,30); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = 0; if(obj.alpha < iTarget){ speed = 10; } else { speed = -10; } if(obj.alpha == iTarget){ clearInterval(obj.timer); } else { obj.alpha += speed; obj.style.filter = 'alpha(opacity:'+obj.alpha+')'; obj.style.opacity = obj.alpha / 100; } },50); } </script> </head> <div id="div1"></div> <div id="div2"></div>

查看全部

1 采集收起来源：JS多物体动画
2018-03-22
陌熙

<!DOCTYPE html> <html> <head> <title>多物体运动</title> <meta charset="utf-8"/> <style type="text/css"> *{margin:0;padding:0;} ul{list-style:none;} ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;} </style> <script type="text/javascript"> window.onload = function(){ var olis = document.getElementsByTagName('li'); for(var i=0; i<olis.length; i++){ olis[i].timer = null; olis[i].onmouseover = function(){ startMove(this,400); }; olis[i].onmouseout = function(){ startMove(this,200); } } } function startMove(obj,iTarget){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var speed = (iTarget-obj.offsetWidth)/8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(obj.offsetWidth == iTarget){ clearInterval(obj.timer); } else { obj.style.width = obj.offsetWidth + speed + 'px'; } },50); } </script> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>

查看全部

1 采集收起来源：JS多物体动画
2018-03-22
陌熙

缓冲运动 <html> <head> <meta charset="utf-8"/> <title>js动画-速度变化</title> <style type="text/css"> *{margin:0;padding:0;} #div1{width:200px; height:200px;background:#F00; position: relative; left:-200px;top:0;} #div1 span{width:20px;height:50px;background:#0F0;position:absolute;left:200px;top:75px;} </style> <script type="text/javascript"> var timer = null; window.onload = function(){ div1.onmouseover = function(){ move(0); }; div1.onmouseout = function(){ move(-200); }; } function move(iTagert){ var div1 = document.getElementById('div1'); clearInterval(timer); timer = setInterval(function(){ var speed = (iTagert - div1.offsetLeft)/20; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(div1.offsetLeft == iTagert){ clearInterval(timer); } else { div1.style.left = div1.offsetLeft+speed+'px'; } },50); } </script> </head> <body> <div id="div1"> <span id="share">分享</span> </div> </body> </html>

查看全部

1 采集收起来源：JS缓冲动画
2018-03-22
陌熙

<!DOCTYPE html> <html> <head> <title>透明度运动</title> <meta charset="utf-8"/> <style type="text/css"> *{margin:0; padding:0;} #div1{width:500px; height:500px; background: #F00; opacity:0.3; filter:alpha(opacity:30);} </style> <script type="text/javascript"> window.onload = function(){ var div1 = document.getElementById('div1'); div1.onmouseover = function(){ startMove(100); } div1.onmouseout = function(){ startMove(30); } } var timer = null; var alpha = 30; function startMove(iTarget){ var div1 = 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; div1.style.filter = 'alpha(opacity:'+alpha+')'; div1.style.opacity = alpha / 100; } },50); } </script> </head> <body> <div id="div1"> </div> </body> </html>

查看全部

1 采集收起来源：JS透明度动画
2018-03-22
Mr_WRX

//获取样式 function getStyle(obj,attr){ if(obj.currentStyle){ return boj.currentStyle[attr]; // if IE }else{ return getComputedStyle(obj,false)[attr]; //if FireFox } };

查看全部

1 采集收起来源：获取样式
2015-12-18
Mr_WRX

本节示例代码： <script type="text/javascript"> window.onload = function(){ var oDiv =document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(0); }; oDiv.onmouseout = function(){ startMove(-200); }; }; var timer = null; function startMove(target){ var oDiv =document.getElementById("div1"); clearInterval(timer); timer = setInterval(function(){ var speed = (target - oDiv.offsetLeft)/20; speed = speed>0 ? Math.ceil(speed) : Math.floor(speed); if(oDiv.offsetLeft == target){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30); }; </script>

查看全部

1 采集收起来源：JS缓冲动画
2018-03-22
Mr_WRX

//移动的元素需要设置position <script type="text/javascript"> window.onload = function(){ var oDiv =document.getElementById("div1"); oDiv.onmouseover = function(){ startMove(10,0); }; oDiv.onmouseout = function(){ startMove(20,-200); }; }; var timer = null; function startMove(speed,target){ var oDiv =document.getElementById("div1"); if(oDiv.offsetLeft > target){ speed = 0-speed; } clearInterval(timer); timer = setInterval(function(){ if(oDiv.offsetLeft == target){ clearInterval(timer); } else{ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } },30); }; </script>

查看全部

1 采集收起来源：JS速度动画
2018-03-22
EpisodeOne

Firefox，chrom浏览器的opacity属性是小数，而IE是整数（小数*100）

查看全部

1 采集收起来源：任意属性值（二）
2015-11-29
小山_0003 00:01

额的

查看全部

1 采集收起来源：获取样式
2014-11-14
歪嘴的肖恩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>opacity</title> <style> #div1{ width:200px; height:200px; background: #cd0000; filter:alpha(opacity:30); opacity:0.3; } </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; // 当 iTarget=0时： if(alpha>iTarget){ speed=-10; }else{ // 当itarget=100的时候 speed=10; } if(alpha==iTarget){ clearInterval(timer); }else{ alpha+=speed; oDiv.style.filter='alpha(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; } },30) } </script> </head> <body> <div id="div1"></div> </body> </html>

查看全部

1 采集收起来源：JS透明度动画
2018-03-22
linvic

//最终封装的'完美移动框架' 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]; } }

查看全部

1 采集收起来源：完美运动框架
2018-03-22
sunpcn_

move.js function startMove(obj,attr,iTarget,fn){ clearInterval(obj.timer);//1.2+++ obj.timer=setInterval(function(){//1.2+++ var icur=null; //1.判断类型 if(attr=='opacity'){ icur=Math.round(parseFloat(getStyle(obj,attr))*100); }else{ icur=parseInt(getStyle(obj,attr)); } //2.算速度 var speed=(iTarget-icur)/8; speed=speed>0?Math.ceil(speed):Math.floor(speed); //3.检测停止 if(icur==iTarget){ clearInterval(obj.timer); if(fn){ fn(); } }else{ if(attr=='opacity'){ obj.style.filter='alpha(opacity:'+(icur+speed)+')'; obj.style.opacity=(icur+speed)/100; }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 采集收起来源：JS链式动画
2018-03-22