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>
    

      

  • 相关阅读:
    HDU 4644 BWT (KMP)
    常数的值类型问题
    HDU 1395 2^x mod n = 1 (欧拉函数)
    HDU 5384 Danganronpa(AC自动机)
    9.自己实现linux中的tree
    8.底层文件库
    7.标准文件库
    7.gcc的使用
    5.文件I/O
    4.vim操作
  • 原文地址:https://www.cnblogs.com/mingjixiaohui/p/5424491.html
Copyright © 2011-2022 走看看