用css3实现元素移动

来源：互联网发布：忆典网络机顶盒打不开编辑：程序博客网时间：2024/05/20 20:21

js:

// JavaScript Documentvar Transform={deleteTransform:function(){var originX="0%";var originY="0%";var transformOriginString="0%"+" "+"0%";var rotate=9+"deg";var scaleX=1.00;var scaleY=1.00;var translateX=0+"px";var translateY=0+"px";var skewX=0+"deg";var skewY=0+"deg";var transformString="rotate("+rotate+") scale("+scaleX+","+scaleY+") translate("+translateX+","+translateY+") skew("+skewX+","+skewY+")";//alert(transformString);$("#demo").css({"-moz-transform":transformString,"-moz-transform-origin":transformOriginString,"-webkit-transform":transformString,"-webkit-transform-origin":transformOriginString,"-o-transform":transformString,"-o-transform-origin":transformOriginString});},showTransform:function(){var i = 0;var tx = 0;for(i=0; i < 30; i++) {var tx = tx + i;var originX="0%";var originY="0%";var transformOriginString="0%"+" "+"0%";var rotate=9+"deg";var scaleX=1.00;var scaleY=1.00;var translateX=tx+"px";var translateY=0+"px";var skewX=0+"deg";var skewY=0+"deg";var transformString="rotate("+rotate+") scale("+scaleX+","+scaleY+") translate("+translateX+","+translateY+") skew("+skewX+","+skewY+")";//alert(transformString);$("#demo").css({"-moz-transform":transformString,"-moz-transform-origin":transformOriginString,"-webkit-transform":transformString,"-webkit-transform-origin":transformOriginString,"-o-transform":transformString,"-o-transform-origin":transformOriginString});}}};$(document).ready(function(){Transform.deleteTransform();Transform.showTransform();});

html:

<html><head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script><script type='text/javascript' src='transform2.js'></script><style type='text/css'>#demo {    background-color: #FFFFFF;    border: 0 none;    border-radius: 1em 1em 1em 1em;    font-size: 18px;    height: 120px;    line-height: 2;    margin: 40px auto;    padding: 0.5em;    width: 20%;}</style><head><body bgcolor="FF0000"><!-- <div class="div">this is the div</div>--><div id="demo">this is the div</div></body></html>

after alert:

// JavaScript Documentvar Transform={deleteTransform:function(objId,angle){var originX="0%";var originY="0%";var transformOriginString="0%"+" "+"0%";var rotate=angle+"deg";var scaleX=1.00;var scaleY=1.00;var translateX=0+"px";var translateY=0+"px";var skewX=0+"deg";var skewY=0+"deg";var transformString="rotate("+rotate+") scale("+scaleX+","+scaleY+") translate("+translateX+","+translateY+") skew("+skewX+","+skewY+")";$("#"+objId).css({"-moz-transform":transformString,"-moz-transform-origin":transformOriginString,"-webkit-transform":transformString,"-webkit-transform-origin":transformOriginString,"-o-transform":transformString,"-o-transform-origin":transformOriginString});},showTransform:function(objId,angle,distance){var i = 0;for(i=0; i < distance; i++) {var originX="0%";var originY="0%";var transformOriginString="0%"+" "+"0%";var rotate=angle+"deg";var scaleX=1.00;var scaleY=1.00;var translateX=i+"px";var translateY=0+"px";var skewX=0+"deg";var skewY=0+"deg";var transformString="rotate("+rotate+") scale("+scaleX+","+scaleY+") translate("+translateX+","+translateY+") skew("+skewX+","+skewY+")";$("#"+objId).css({"-moz-transform":transformString,"-moz-transform-origin":transformOriginString,"-webkit-transform":transformString,"-webkit-transform-origin":transformOriginString,"-o-transform":transformString,"-o-transform-origin":transformOriginString});}}};$(document).ready(function(){Transform.deleteTransform('demo','20');var flag=1;var i = 500;var lastTime = 500;distance/lastTime//setTimeout("Transform.showTransform("+flag+")",i);//for(i=500; i<1000; ){var flag = 30;setTimeout("Transform.showTransform('demo','20',"+flag+")",i);//i=i+30;//}});