JS动画效果_学习笔记

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

JS动画效果

最热最新

sunpcn_

var timer=null; function startMove(iTarget){ var oDiv=document.getElementById('div1'); clearInterval(timer); timer=setInterval(function(){ var speed=(iTarget-oDiv.offsetLeft)/10;//除法会使数值出现小数点,凡是操作速度的,就要做取整,不然会出问题 ////如果speed大于0向下取整,如果speed小于0向上取整 .2ceil2 1.2floor2 speed=speed>0?Math.ceil(speed):Math.floor(speed); if(oDiv.offsetLeft==iTarget){ clearInterval(timer); }else{ oDiv.style.left=oDiv.offsetLeft+speed+'px'; } },30); }

查看全部

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

<script> window.onload=function(){ var oDiv=document.getElementById('div1'); //移入透明度100 oDiv.onmouseover=function(){ startMove(100); } //移出透明度30 oDiv.onmouseout=function(){ startMove(30); } } /** * [startMove description] * @param {[type]} iTarget [description] * @return {[type]} [description] */ //声明定时器 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; //ie oDiv.style.filter='alpha(opacity:'+alpha+')'; //firefox .. oDiv.style.opacity=alpha/100; } },30); }

查看全部

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

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; //ie oDiv.style.filter='alpha(opacity:'+alpha+')'; oDiv.style.opacity=alpha/100; }; },30); }

查看全部

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

/*1.3精简参数, iTarget:偏移目标值用当前offsetLeft的值与传入的目标值来判断增加和减少 */ function startMove(iTarget){ clearInterval(timer); var oDiv=document.getElementById('div1'); 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); }

查看全部

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

/*1.2封装移入移出, speed:速度 iTarget:偏移目标 */ // function startMove(speed,iTarget){ // clearInterval(timer); // var oDiv=document.getElementById('div1'); // timer= setInterval(function(){ // if(oDiv.offsetLeft==iTarget){ // clearInterval(timer); // }else{ // oDiv.style.left=oDiv.offsetLeft+speed+'px'; // } // }, 30); // }

查看全部

0 采集收起来源：JS速度动画
2015-10-12
sunpcn_

//1.1移入 // function startMove(){ // clearInterval(timer); // var oDiv=document.getElementById('div1'); // timer= setInterval(function(){ // if(oDiv.offsetLeft==0){ // clearInterval(timer); // }else{ // oDiv.style.left=oDiv.offsetLeft+1+'px'; // } // }, 30); // }

查看全部

0 采集收起来源：JS速度动画
2015-10-12
sunpcn_

//1.1移出 // function startMove1(){ // //防止重复启动定时器,进入方法先关闭所有定时器 // clearInterval(timer); // var oDiv=document.getElementById('div1'); // timer= setInterval(function(){ // if(oDiv.offsetLeft==-200){ // clearInterval(timer); // }else{ // oDiv.style.left=oDiv.offsetLeft-1+'px'; // } // }, 30); // }

查看全部

0 采集收起来源：JS速度动画
2015-10-12
云枫Go

domObj.offsetWidth为width + paddingLeft + paddingRight + borderLeft + borderRight

查看全部

0 采集收起来源：获取样式
2015-10-11
后青春的诗灬 03:32

运动框架实现思路

查看全部

0 采集收起来源：JS动画效果课程介绍
2015-10-10
天羽蔚灵

getStyle obj.currentStyle[attr] IE getComputedStyle(obj,false)[attr] firefox

查看全部

0 采集收起来源：获取样式
2015-10-10
天羽蔚灵

ceil()向上取整

查看全部

0 采集收起来源：JS缓冲动画
2015-10-09
天羽蔚灵

阻止事件冒泡event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;

查看全部

0 采集收起来源：JS速度动画
2015-10-09
qiliu

图标字体，你可以到http://www.iconfont.cn/去免费下载，下载时候有demo会告诉你怎么用的。

查看全部

0 采集收起来源：JS动画案例
2015-10-08
qiliu

前端网 http://www.w3cfuns.com/forum-51-1.html

查看全部

0 采集收起来源：JS动画案例
2015-10-08
dl大雷 00:35

getstyle解决一个bug

查看全部

0 采集收起来源：任意属性值（一）
2015-10-08

首页上一页 129 130 131 132 133 134 135 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1.您至少已经具备JavaSript的知识。2.您已经具备一些开发经验。

老师告诉你能学到什么？: 1.使用定时器实现简单动画。2.如何一步步封装库。2.培养编程的思想。

微信扫码，参与3人拼团

热搜

最近搜索清空

JS动画效果