首页 > HTML5/CSS3

js直接操作css3属性transition/webkitTransform实现动画

发表于2015-04-21 11:56:50| --次阅读| 来源webkfa| 作者小猪仔

摘要:js直接操作css3属性transition/webkitTransform实现动画

相关:在线浏览器html5评分测试 下面代码运行要在支持html5+css3的浏览器运行代码

html5代码
运行代码
<!-- webkfa.com -->
<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8" />
	<meta name="apple-touch-fullscreen" content="YES" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="format-detection" content="telephone=no" />
	<title>js直接操作css3属性transition和webkitTransform实现动画</title>
  </head>
  
  <body>
  	<input type="button" value="往下" onclick="xia(100);"/>
  	<input type="button" value="往上" onclick="shang(0);"/>
    <div style="width:50px;height:50px;background:red;" id="webkfaid"></div>
    <script type="text/javascript">
    	function xia(sum){
    		var obj=document.getElementById("webkfaid");
    		obj.style.transition="-webkit-transform 500ms ease-out";
			obj.style.webkitTransform="translate(0px,"+sum+"px) scale(1) translateZ(0px)";
    	}
    	function shang(sum){
    		var obj=document.getElementById("webkfaid");
    		obj.style.transition="-webkit-transform 500ms ease-out";
			obj.style.webkitTransform="translate(0px,"+sum+"px) scale(1) translateZ(0px)";
    	}
    </script>
  </body>
</html>

相关文章

猜你喜欢

学到老在线代码浏览器 关闭浏览
友情链接: hao123 360导航 搜狗网址导航 114啦网址导航 博客大全
Copyright © 1999-2014, WEBKFA.COM, All Rights Reserved  京ICP备14034497号-1