JS动画效果_学习笔记

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

JS动画效果

最热最新

FlappyBear 04:00

offsetLeft,offsetRight这两个属性就是用来描述位置，运动是调用setIntval（）函数来不断增加。

查看全部

0 采集收起来源：JS速度动画
2016-05-20
FlappyBear 03:28

运动的大体思路

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-05-20
慕仰6758459

IE:currentStyle FF:getComputeStyle

查看全部

0 采集收起来源：获取样式
2016-05-19
梦幻星辰 02:23

getStyle

查看全部

0 采集收起来源：任意属性值（一）
2016-05-19
darkone

function startMove(obj,attr,iTarget,fn){clearInterval(obj.timer);obj.timer=setInterval(function(){var icur=0;if(attr=="opacity"){icur=Math.round(parseFloat(getStyle(obj,attr))*100)}else{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);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]}};

查看全部

0 采集收起来源：JS链式动画
2018-03-22
darkone

ul li{width:200px;height:100px;background:yellow;margin-bottom:20px;opacity:0.3;filter:alpha(opacity:30);}<script>window.onload=function(){var ali=document.getElementsByTagName("li");for(var i=0;i<ali.length;i++){ali[i].timer=null;ali[i].onmouseover=function(){startMove(this,"opacity",100)};ali[i].onmouseout=function(){startMove(this,"opacity",30)}}};function startMove(obj,attr,iTarget){clearInterval(obj.timer);obj.timer=setInterval(function(){var icur=0;if(attr=="opacity"){icur=Math.round(parseFloat(getStyle(obj,attr))*100)}else{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{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]}}; </script>

查看全部

0 采集收起来源：任意属性值（二）
2018-03-22
不倒翁_BOzI

<script type="text/javascript"> 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>

查看全部

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

运动框架的实现思路 1.速度（改变left，right，width，height，opacity(透明度)） 2.缓冲运动 3.多物体运动 4.任意值变化 5.链式运动 6.同时运动

查看全部

0 采集收起来源：JS动画效果课程介绍
2016-05-17
darkone

<style type="text/css"><br> ul,li,body{padding: 0;}<br> ul,li{list-style: none;}<br> ul li{width: 200px;height: 100px;background: yellow;margin-bottom: 20px;border: solid 4px #000;}<br> </style><br> </head><br> <body><br> <ul><br> <li></li><br> <li></li><br> <li></li><br> </ul><br> <script type="text/javascript"><br> window.onload=function(){var ali=document.getElementsByTagName("li");for(var i=0,l=ali.length;i<l;i++){ali[i].timer=null;ali[i].onmouseover=function(){startMove(this,"width",400)};ali[i].onmouseout=function(){startMove(this,"width",200)}}};function getStyle(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr]}else{return getComputedStyle(obj,false)[attr]}}function startMove(obj,attr,iTarget){clearInterval(obj.timer);obj.timer=setInterval(function(){icur=parseInt(getStyle(obj,attr));var speed=(iTarget-icur)/8;speed=speed>0?Math.ceil(speed):Math.floor(speed);if(iTarget==icur){clearInterval(obj.timer)}else{obj.style[attr]=icur+speed+"px"}},30)}; </script>

查看全部

0 采集收起来源：任意属性值（一）
2018-03-22
darkone

<title>多个透明度运动</title> <style type="text/css"> div{width: 200px;height: 200px;background: red;filter: alpha(opacity:30);opacity: 0.3;margin: 10px;} </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> <div class="div4"></div> <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}},30)}; </script> </body>

查看全部

0 采集收起来源：JS多物体动画
2018-03-22
高手之路

一定要记住当获取了一个ID 想要再获取下面的标签是不要再写document 不要再document 不要再写document啦

查看全部

0 采集收起来源：JS动画案例
2016-05-16
weibo_幸福长大了_0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>offset的bug</title> <style> #div1{ margin:0; padding:0; background:#33F; border:solid 1px bold; height:100px; } </style> <script> window.onload=function(){ var oDiv=document.getElementById('div1'); oDiv.style.width=parseInt(oDiv.style.width)+1+'px'; alert(oDiv.style.width);//style为内联样式时，oDiv.style.width才起作用 }//offsetWidth指的是整个Div块的宽包括border，padding，且为数值型数据 </script> </head> <body> <div id="div1" > hhhhhhhhh </div> </body> </html>

查看全部

0 采集收起来源：任意属性值（一）
2018-03-22
吃瓜小夏 04:52

<style type="text/css"> *{margin:0;padding:0;} span{left:32px;top:20px;position:absolute;opacity:1;filter:alpha(opacity:100);} img{width:40px;height:40px;} a{float:left;display:block;height:100px;width:100px;border:1px solid #CCC;font-family:"微软雅黑";font-size:14px;color:#999;text-align:center;margin:10px;position:relative;text-decoration:none;} a:hover{color:#060;} p{top:60px;left:36px;position:absolute;} </style> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script> <script> $(document).ready(function(e) { $("a").mouseenter(function(){ $(this).find("span").animate({top:"-20px",opacity:"0"},200, function(){$(this).css({top:"50px"}); $(this).animate({top:"20px",opacity:"1"},300)}) }) }) </script> </head> <body> <a href=""><span><img src="1_1.png" /></span><p>网络</p></a> <a href=""><span><img src="1_2.jpg" /></span><p>娱乐</p></a> <a href=""><span><img src="1_3.jpg" /></span><p>酒店</p></a> </body> </html>

查看全部

0 采集收起来源：jQuery动画案例
2018-03-22
13weibo_Debbie 08:12

获取样式，实现动态变幻：<br> 1.样式写在行内：如下图 2.在外部样式表中获取所有的属性： #div1{ width:200px; height:200px; background-color:red; border:4px solid #000; } </style> <script> window.onload=function(){ startMove(); } function startMove(){ setInterval(function(){ var oDiv=document.getElementById('div1'); //alert(oDiv.offsetWidth); oDiv.style.width=parseInt(getStyle(oDiv,'width'))-1+'px'; },30) } function getStyle(obj,attr){ if(obj.currentStyle){//此函数是用于IE浏览器 return obj.crrunentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr];//此函数是用于火狐浏览器 } } </script>

查看全部

0 采集收起来源：获取样式
2018-03-22
13weibo_Debbie

当缓冲运动是多运动时，用来进行变化的变量不能进行公用。需要在每次触发事件是进行单独的传入，否则在执行时会出现混乱。 div{width:200px; height:200px;margin:10px;float:left;background-color:red;filter:alpha(opacity:30);opacity:0.3;} </style> <script> window.onload=function(){ var oDiv=document.getElementsByTagName('div'); for(var i=0;i<oDiv.length;i++){ oDiv[i].alpha=30; oDiv[i].onmouseover=function(){ startMove(this,100); } oDiv[i].onmouseout=function(){ startMove(this,30); } } } //var timer=null; //var alpha=30; function startMove(obj,iTarget){ //var obj=document.getElementsByTagName('div'); 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(opactiy:'+obj.alpha+')'; obj.style.opacity=obj.alpha/100; } },30) } </script>

查看全部

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