<!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>
浙公网安备 33010602011771号