变速动画函数详解与案例
2019-08-01 11:05
169 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yyy_wj/article/details/98033470
在之前的博客中,对于变速动画做了一个基本了解。现在我们来做进一步的了解
在进一步了解之前,我们要知道一个问题:在获取元素的相关的样式属性的值的时候是用的offset系列来获取的,但是有一个问题offset系列来获取不一定是对的,假如元素没有脱标的话就看不到效果,所以我们用的是window.getComputedStyle()
window.getComputedStyle(元素,伪选择器/伪类),第二个参数可以不写,如果没有伪选择器或者伪类的话但非要写的话可以写null,这个对象返回的是所有css中的属性
假设要获取一个id为dv的div元素距离左边的值:window.getComputedStyle(my$("dv"),null).left,一般.出来的属性都可以写成[]的形式window.getComputedStyle(my$("dv"),null)["left"],注意:[]中的是字符串
window.getComputedStyle()谷歌和火狐支持
元素.currentStyle IE8支持
所以要获取任意一个元素的任意一个样式属性的值可以用以下方式:
attr是一个变量可以变量可以存一个字符串,返回的是属性的值
[code] function getStyle(element,attr) { //判断浏览器是否支持这个方法 if(window.getComputedStyle){ return window.getComputedStyle(element,null)[attr]; }else{ return element.currentStyle[attr]; } }
也可以这么写
[code] function getStyle(element,attr) { //判断浏览器是否支持这个方法 return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; } my$("btn").onclick=function () { console.log(getStyle(my$("dv"),"width")); };
变速动画函数详解
1、变速动画函数封装增加任意一个属性
[code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding: 0; margin: 0; } #dv{ width: 200px; height: 100px; background-color: green; position: absolute; left: 0; } </style> </head> <body> <input type="button" value="移动到400" id="btn1"/> <div id="dv"></div> <script src="com.js"></script> <script> my$("btn1").onclick=function () { animate(my$("dv"),"height",400) }; function getStyle(element,attr) { return window.getComputedStyle?window.getComputedStyle(element,null)[attr]:element.columnRuleStyle[attr]; } my$("dv").onclick=function () { console.log(getStyle(my$("dv"),"left")); } //变速动画 function animate(element,attr,target) { //先清理定时器 clearInterval(element.timeId) element.timeId=setInterval(function () { //获取当前元素的位置 var current=parseInt(getStyle(element,attr));//数字类型 //移动的步数 var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current=current+step; element.style[attr]=current+"px"; if (current==target){ //清理定时器 clearInterval(element.timeId) } },20) } </script> </body> </html>
2、变速动画函数封装增加任意多个属性
[code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } div{ margin-top: 30px; width: 200px; height: 100px; background-color: green; position: absolute; left:0; top:0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1"/> <div id="dv"> </div> <script src="com.js"></script> <script> //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element,attr) { return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0; } function animate(element,json) { clearInterval(element.timeId); element.timeId=setInterval(function () { var flag=true;//默认,假设,全部到达目标 for(var attr in json){ //获取元素这个属性的当前的值 var current=parseInt(getStyle(element,attr)); //当前的属性对应的目标值 var target=json[attr]; //移动的步数 var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step;//移动后的值 element.style[attr]=current+"px"; if(current!=target){ flag=false; } } if(flag){ //清理定时器 clearInterval(element.timeId); } },20); } my$("btn1").onclick=function () { animate(my$("dv"),{"width":400,"height":500,"left":500,"top":80}); }; </script> </body> </html>
3、变速动画函数封装增加任意多个属性和回调函数
什么是回调函数:
当一个函数作为一个参数使用的时候,当所有的属性到达目标之后才执行
[code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } div{ margin-top: 30px; width: 200px; height: 100px; background-color: green; position: absolute; left:0; top:0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1"/> <div id="dv"> </div> <script src="common.js"></script> <script> //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element,attr) { return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]||0; } //element---元素 //json---对象---多个属性及多个目标值 //fn---函数 function animate(element,json,fn) { clearInterval(element.timeId); element.timeId=setInterval(function () { var flag=true;//默认,假设,全部到达目标 for(var attr in json){ //获取元素这个属性的当前的值 var current=parseInt(getStyle(element,attr)); //当前的属性对应的目标值 var target=json[attr]; //移动的步数 var step=(target-current)/10; step=step>0?Math.ceil(step):Math.floor(step); current+=step;//移动后的值 element.style[attr]=current+"px"; if(current!=target){ flag=false; } } if(flag){ //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if(fn){ fn(); } } },20); } my$("btn1").onclick 7ff7 =function () { var json1={"width":400,"height":500,"left":500,"top":80}; animate(my$("dv"),json1,function () { var json2={"width":40,"height":50,"left":50,"top":800}; animate(my$("dv"),json2,function () { var json3={"width":450,"height":550,"left":550,"top":600}; animate(my$("dv"),json3); }); }); }; </script> </body> </html>
4、变速动画函数封装增加任意多个属性和回调函数及层级还有透明度
[code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { width: 200px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } input { z-index: 10; position: absolute; left: 0; top: 0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1"/> <div id="dv"> </div> <script src="common.js"></script> <script> //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); } //zIndex:1000 //透明度: 数字类型----小数---放大100倍 my$("btn1").onclick = function () { var json1 = {"width": 400, "height": 500, "left": 500, "top": 80, "opacity": 0.2}; animate(my$("dv"), json1, function () { animate(my$("dv"), {"width": 40, "height": 50, "left": 0, "top": 0, "opacity": 1, "zIndex": 1000}); }); }; </script> </body> </html>
变速动画函数案例
1、筋斗云案例
[code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0 } ul { list-style: none } body { background-color: #333; } .nav { width: 800px; height: 42px; margin: 100px auto; background: url(images/rss.png) right center no-repeat; background-color: #fff; border-radius: 10px; position: relative; } .nav li { width: 83px; height: 42px; text-align: center; line-height: 42px; float: left; cursor: pointer; } .nav span { position: absolute; top: 0; left: 0; width: 83px; height: 42px; background: url(images/cloud.gif) no-repeat; } ul { position: relative; } </style> </head> <body> <div class="nav"> <span id="cloud"></span> <ul id="navBar"> <li>北京校区</li> <li>上海校区</li> <li>广州校区</li> <li>深圳校区</li> <li>武汉校区</li> <li>关于我们</li> <li>联系我们</li> <li>招贤纳士</li> </ul> </div> <script src="common.js"></script> <script> //变速动画 function animate(element, target) { //清理定时器 clearInterval(element.timeId); element.timeId = setInterval(function () { //获取元素的当前位置 var current = element.offsetLeft; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style.left = current + "px"; if (current == target) { //清理定时器 clearInterval(element.timeId); } }, 20); } //获取云彩 var cloud = my$("cloud"); //获取所有的li标签 var list = my$("navBar").children; //循环遍历分别注册鼠标进入,鼠标离开,点击事件 for (var i = 0; i < list.length; i++) { //鼠标进入事件 list[i].onmouseover = mouseoverHandle; //点击事件 list[i].onclick = clickHandle; //鼠标离开事件 list[i].onmouseout = mouseoutHandle; } function mouseoverHandle() {//进入 //移动到鼠标此次进入的li的位置 animate(cloud, this.offsetLeft); } //点击的时候,记录此次点击的位置 var lastPosition = 0; function clickHandle() {//点击 lastPosition = this.offsetLeft; } function mouseoutHandle() {//离开 animate(cloud, lastPosition); } </script> </body> </html>
2、手风琴案例
[code] <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ul { list-style: none; } * { margin: 0; padding: 0; } div { width: 1150px; height: 400px; margin: 50px auto; border: 1px solid red; overflow: hidden; } div li { width: 240px; height: 400px; float: left; } div ul { width: 1300px; } </style> </head> <body> <div id="box"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script src="common.js"></script> <script> //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); } //先获取所有的li标签 var list = my$("box").getElementsByTagName("li"); for (var i = 0; i < list.length; i++) { list[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)"; //鼠标进入 list[i].onmouseover = mouseoverHandle; //鼠标离开 list[i].onmouseout = mouseoutHandle; } //进入 function mouseoverHandle() { for (var j = 0; j < list.length; j++) { animate(list[j], {"width": 100});//动画效果 } animate(this, {"width": 800}); } //离开 function mouseoutHandle() { for (var j = 0; j < list.length; j++) { animate(list[j], {"width": 240});//动画效果 } } </script> </body> </html>
3、旋转木马案例
[code] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> a{cursor:pointer;} .wrap{ width:1200px; margin:100px auto; } .slide { height:500px; position: relative; } .slide li{ position: absolute; left:200px; top:0; list-style: none; } .slide li img{ width:100%; } .arrow{ opacity: 0; } .prev,.next{ width:76px; height:112px; position: absolute; top:50%; margin-top:-56px; background: url(images4/prev.png) no-repeat; z-index: 99; } .next{ right:0; background-image: url(images4/next.png); } </style> </head> <body> <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li> <a href="#"><img src="images4/slidepic1.jpg"/></a></li> <li> <a href="#"><img src="images4/slidepic2.jpg"/></a></li> <li> <a href="#"><img src="images4/slidepic3.jpg"/></a></li> <li> <a href="#"><img src="images4/slidepic4.jpg"/></a></li> <li> <a href="#"><img src="images4/slidepic5.jpg"/></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:;" class="prev" id="arrLeft"></a> <a href="javascript:;" class="next" id="arrRight"></a> </div> </div> </div> <script src="common.js"></script> <script> var config = [ { width: 400, top: 20, left: 50, opacity: 0.2, zIndex: 2 },//0 { width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 },//1 { width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 },//2 { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 },//3 { width: 400, top: 20, left: 750, opacity: 0.2, zIndex: 2 }//4 ]; //页面加载事件 window.onload=function () { var flag=true;//假设所有的动画都执行完毕了----锁 ////设置每个li,都要把宽,层级,透明度,left,top到达指定的目标位置 //把图片散开 function assign() { var list=my$("slide").getElementsByTagName("li"); for (i=0;i<list.length;i++){ animate(list[i],config[i],function () { flag=true; }); } } assign(); //右边按钮 my$("arrRight").onclick=function(){ if (flag){ flag=false; config.push(config.shift()); assign();//重新分配 } }; //左边按钮 my$("arrLeft").onclick=function(){ if (flag){ fl=false; config.unshift(config.pop()); assign(); } }; // 鼠标进入,左右焦点的div显示 my$("slide").onmouseover=function () { animate(my$("arrow"),{"opacity":1}); }; //鼠标移出,左右焦点的div隐藏 my$("slide").onmouseout=function () { animate(my$("arrow"),{"opacity":0}); }; }; </script> <script> //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } function animate(element, json, fn) { clearInterval(element.timeId);//清理定时器 //定时器,返回的是定时器的id element.timeId = setInterval(function () { var flag = true;//默认,假设,全部到达目标 //遍历json对象中的每个属性还有属性对应的目标值 for (var attr in json) { //判断这个属性attr中是不是opacity if (attr == "opacity") { //获取元素的当前的透明度,当前的透明度放大100倍 var current = getStyle(element, attr) * 100; //目标的透明度放大100倍 var target = json[attr] * 100; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current / 100; } else if (attr == "zIndex") { //判断这个属性attr中是不是zIndex //层级改变就是直接改变这个属性的值 element.style[attr] = json[attr]; } else { //普通的属性 //获取元素这个属性的当前的值 var current = parseInt(getStyle(element, attr)); //当前的属性对应的目标值 var target = json[attr]; //移动的步数 var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step;//移动后的值 element.style[attr] = current + "px"; } //是否到达目标 if (current != target) { flag = false; } } if (flag) { //清理定时器 clearInterval(element.timeId); //所有的属性到达目标才能使用这个函数,前提是用户传入了这个函数 if (fn) { fn(); } } //测试代码 //console.log("目标:" + target + ",当前:" + current + ",每次的移动步数:" + step); }, 20); } </script> </body> </html>
相关文章推荐
- 脑壳疼之变速动画之增加任意属性与回调函数
- 【第6篇】TypeScript函数function的案例代码详解
- jQuery自定义动画函数实例详解(附demo源码)
- jQuery动画高级用法(上)——详解animation中的.queue()函数
- jQuery自定义动画函数实例详解(附demo源码)
- jQuery动画高级用法(上)——详解animation中的.queue()函数
- Jquery 动画函数详解
- jQuery动画高级用法(上)——详解animation中的.queue()函数
- jQuery动画高级用法(上)——详解animation中的.queue()动画队列插队函数
- jQuery动画高级用法(上)——详解animation中的.queue()函数
- jQuery动画高级用法(下)——详解animation中的.queue()函数
- jQuery动画高级用法(上)——详解animation中的.queue()函数 http://www.cnblogs.com/hh54188/archive/2011/04/09/1996469.
- 第7.25节 Python案例详解:使用property函数定义与实例变量同名的属性会怎样?
- Vue 过渡(动画)transition组件案例详解
- [转载]jQuery动画高级用法——详解animation中的.queue()函数
- jQuery动画高级用法——详解animation中的.queue()函数
- oracle开窗函数案例详解
- jQuery动画高级用法(上)——详解animation中的.queue()函数
- MySQL自定义函数用法详解-复合结构自定义变量/流程控制--及其相关案例
- ExtJs动画函数详解