轻量级javascript库不用写CSS3动画 Move.js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .box{ /* margin:10px; */ width:100px; height:100px; background:red; /* -webkit-transition:margin 1s; */ } .box:hover{ /* margin-left:100px; */ } </style> </head> <body> <h1 id="btn">你点我啊</h1> <div class="box"></div> <script type="text/javascript" src="jquery-1.10.1.min.js"></script> <script type="text/javascript" src="move.js"></script> <script type="text/javascript"> var Btn = document.getElementById("btn"); Btn.onclick = function(){ // 后面没有add、sub参数或者回调需要加引号和单位 // add来增加已经设置的属性值包括两个参数 属性:属性值(不用引号和单位) 数值不用引号和单位 // move(".box").set("margin-left",100).add("margin-left",500).end(); // move(".box").set("margin-left",100).end(); //写法错误 没有引号和单位 因为后面没有回调 或者一些别的方法 // move(".box").set("margin-left",'100px').end();//可运行 // move(".box").rotate(90).duration("2s").end(); //连用方式 // move(".box").set("margin-left",200).set("background-color","#ccc").rotate(90).duration("2s").end(); //平移位置 第一值为x值 第二个值 为y值 // move(".box").translate(200,400).end(); //x() and y() x()方法用于调整元素的x坐标,y()方法用于调整元素的y坐标。两个方法的参数可以使整数也可也是负数 // move(".box").skew(30,40).end(); //scale(x,y)该方法用于放大或压缩元素的大小,按照提供的每一个值,将调用transform的scale 两个值一个是scaleX 另一个是scaleY() // move(".box").scale(3,1).end(); //delay(n) 时间延迟 // move('.box').set('background-color', 'blue').delay(1000).end(); //then()该方法是move.js中一个最重要的函数,他用于分割动画为两个集合,并按顺序执行 // move(".box").set("background-color","yellow").x(500).then().y(400).set("background-color","green").end(); move(".box").to(500,200).rotate(100).scale(.5).set('background-color',"#ff0551").set("border-color","black").duration("3s").skew(50,-10).then().set("opaction",0).duration("0.3s").scale(0.1).pop().end(); // 回调使用 // move(".box").set("margin-left",500).end(function(){ // move(".box").set("background","blue").end(); // } // ); } </script> </body> </html>