zoukankan      html  css  js  c++  java
  • 轻量级javascript库不用写CSS3动画 Move.js

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    		.box{
    			/* margin:10px; */
    			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>
    

      

  • 相关阅读:
    hadoop balance
    随笔
    ubuntu server 使用parted分区
    程序员内功续
    hadoop——hdfs多硬盘挂载
    hdfs老数据压缩备份的一些问题20120521
    hadoop balance failed
    hoj 2524 Allocate Dormitories 二分图的最大匹配
    HDOJ 分类(转)
    hoj 3008 Matryoshka Dolls Again 最大独立子集
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5424491.html
Copyright © 2011-2022 走看看