主页 > 前端 > javascript >
来源:未知 时间:2021-09-09 22:29 作者:小飞侠 阅读:次
[导读] 插件地址: https://gamedown.vgs.lenovo.com.cn/public/js/animate.min.js 预览: http://www.zixuephp.com/codes/js/animate/ html: !DOCTYPEhtmlhtmllang=enheadmetacharset=UTF-8title动画/titlestyle*{margin:0px;padding:0px;}#a{width:50px;...
js动画库-支持transform,颜色,透明,圆角,平移,集成加速度。站长压缩自己时间打造的集万千宠爱(动画)于一身的动画库,想用在IE7或者8的就别看了,欢迎大家使用! 插件地址:https://gamedown.vgs.lenovo.com.cn/public/js/animate.min.js 新1.0.3版本,新增 window, dom 的 scrollTop 和 scrollLeft 动画支持 预览:http://www.zixuephp.com/codes/js/animate/ 实列简介:A.move(dom对象,{ css属性设置和jquery一致,目前集成了 width,height,top,left,right,bottom,background,color,borderColor,fontSize,opacty,transform 其中:transform 包括( rotate,scale,translate,skew) },2000,function(item){ 回调结束,item包括DOM对象和各个选项,可以打印查看 console.log('触发完成',item); },A.Easing.Quadratic.In); A.Easing.Quadratic.In,加速运动,不传就是匀速运动,包括如下选项: 和tween.js一致。 新1.0.3版 scroll针对DOM A.move(document.getElementById('scroll'), {scrollTop: 300, scrollLeft: 300}, 1000, function(item){ A.move(item.dom, {scrollTop: 10}, 1000); }); 针对window对象 A.move(window, {scrollTop: 300}, 1000, function(item){ A.move(window, {scrollTop: 10}, 1000); }); 教程:一个小方块位移A.move(document.getElementById("a"),{ left:500},1000,function(){ alert('距离左侧位移500像素,执行时间为1秒'); }) 教程:一个小方块宽高变成200A.move(document.getElementById("a"),{ width:200,height:200},1000,function(){ alert('小方块宽高变成200,执行时间为1秒'); }) 教程:一个小方块背景颜色变成红色A.move(document.getElementById("a"),{ background:"#ff0000"},1000,function(){ alert('小方块背景颜色变成红色,执行时间为1秒'); }) 教程:一个小方块软转360度A.move(document.getElementById("a"),{ transform:"rotate(360edg)"},1000,function(){ alert('小方块软转360度,执行时间为1秒'); }) 第四个参数加速度:Easing逐渐加速公式: A.Easing.Quadratic.In 目前支持如下加速度 A.Easing.Linear.None A.Easing.Quadratic.In,Out,InOut A.Easing.Cubic.In,Out,InOut A.Easing.Quartic.In,Out,InOut A.Easing.Quintic.In,Out,InOut A.Easing.Sinusoidal.In,Out,InOut A.Easing.Exponential.In,Out,InOut A.Easing.Circular.In,Out,InOut A.Easing.Elastic.In,Out,InOut A.Easing.Back.In,Out,InOut A.Easing.Bounce.In,Out,InOut 其他细节组合动画自己就写CSS样式即可,记得是驼峰法命名哦,其他子尝试吧,如有问题请联系站长邮箱 904561283@qq.com html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{ margin: 0px; padding: 0px; } #a{ width: 50px; height: 50px; background: #f00; position: absolute; left:50px; top:20px; } #b{ width: 50px; height: 50px; background: #00d6b2; position: absolute; left:0px; top:80px; } #c{ width: 200px; height: 200px; background: #00d6b2; position: absolute; left:80px; top:130px; margin-left: 10px; } #f{ width: 120px; height: 80px; background: #f00; position: absolute; left:80px; top:360px; /*border-radius: 30%;*/ transform:rotate(45deg); /* rotate(45deg) scale(0.5,0.5) rotate(15deg) skew(200deg,200deg) */ } #e{ width: 100px; height: 100px; background: #000000; position: absolute; left:300px; top:330px; } </style> </head> <body> <div id="a"></div> <div id="b"></div> <div id="c" style="width:200px;height:200px;left:80px;top:130px;"></div> <div id="f"></div> <div id="e"></div> <script src="https://gamedown.vgs.lenovo.com.cn/public/js/animate.min.js"></script> <script> var ops = 1; var type = false; function autoAnm(dom){ var op = !type?0.5:1; A.move(dom,{ //opacity:op, //background:"#00ff00", //top:"425px", //width:110.56, //borderRadius:"100px", transform:"rotate(360deg)" // rotate(45deg) scale(0.1,0.1) skew(30deg,30deg) rotate(45deg) translate(24px,0px) skew(0.1deg,0.1deg) skew(200deg,200deg) translate(100px,0px) rotate(30deg) scale(2.5,2.5) translate(100px,30px) },11500,function(item){ //A.move(item.dom,{ // //width:300, // //height:300, // //background:"#0000ff", // //borderRadius:"0px", // transform:"skew(0deg,0deg)" //},600,function(item){ //},Easing.Elastic.Out); },null); } autoAnm(document.getElementById("f"),ops); A.move(document.getElementById("a"),{ left:500, top:150 },2000,function(){ console.log('触发完成'); },A.Easing.Quadratic.In); A.move(document.getElementById("b"),{ left:500, top:180, width:300, height:190 },2000,function(item){ console.log('触发完成',item); A.move(document.getElementById("b"),{ left:100, top:50 },1200,function(item){ console.log('触发完成',item); //setTimeout(function(){ console.log(item.dom); A.move(item.dom,{ left:300, top:300, width:100, height:100 },800,function(item){ console.log('触发完成',item); }, A.Easing.Quintic.InOut); //},1000); },A.Easing.Quintic.Out); },A.Easing.Cubic.InOut); A.move(document.getElementById("c"),{ width:100, height:100, opacity:0.3, color:"#ff0" },2000,function(item){ console.log('触发完成',item); },A.Easing.Elastic.In); A.move(document.getElementById("e"),{ top:630 },1300,function(item){ A.move(item.dom,{ top:50, background:"#ff0000", opacity:0.3, width:600, height:600, },1600,function(item){ console.log('触发完成',item); A.move(item.dom,{ width:100, height:100, transform:"rotate(45edg)" },1600,function(item){ }); }, A.Easing.Quintic.InOut); }, A.Easing.Cubic.Out); </script> </body> </html> 调用方法详解: A.move(dom对象,{ css属性设置和jquery一致,目前集成了 width,height,top,left,right,bottom,background,opacty,transform 其中:transform 包括( rotate,scale,translate,skew) },2000,function(item){ 回调结束,item包括DOM对象和各个选项,可以打印查看 console.log('触发完成',item); },A.Easing.Quadratic.In); A.Easing.Quadratic.In,加速运动,不传就是匀速运动,包括如下选项: 和tween.js一致。 目前支持如下加速度 A.Easing.Linear.None A.Easing.Quadratic.In,Out,InOut A.Easing.Cubic.In,Out,InOut A.Easing.Quartic.In,Out,InOut A.Easing.Quintic.In,Out,InOut A.Easing.Sinusoidal.In,Out,InOut A.Easing.Exponential.In,Out,InOut A.Easing.Circular.In,Out,InOut A.Easing.Elastic.In,Out,InOut A.Easing.Back.In,Out,InOut A.Easing.Bounce.In,Out,InOut |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com