|
|
基于css3的transform实现淘宝首页淘工图像的自由摇摆，不过没有淘宝首页那么逼真，我只是简单的按照匀速摇摆，但是现实情况摇摆速度和角度有关，这就需要一些物理公式进行处理，这里只是简单的写了个demo，没有物理公式的计算，目前demo只支持webkit内核的浏览器，如chrome，safari。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><script type="text/javascript" src="./jquery-1.7.1.min.js"></script><script type="text/javascript"> (function($){ $.fn.animateNum = function(start1,end,duration,fun){ var _t = this; var start = start1; var distance = ((end-start)/duration).toFixed(9); var tt = setInterval(function(){ start= start/1+distance/1; fun.call(_t,start); if(start>=end ||start<=start1){ //clearInterval(tt); distance = 0-distance; } },1); return $(_t);}})(jQuery);$(document).ready(function(){//$('.rotat').animate( {-webkit-transform:rotate(-7deg)},1000);//$('.rotat').css('-webkit-transform','rotate(-7deg)');//$('.rotat').animate({'-webkit-transform':'rotate(7deg)'},2000)});$('.rotat').animateNum(-10,10,200,function(i){ $(this).css('-webkit-transform','rotate('+i+'deg)');});});</script><style type="text/css">html,body {padding: 0;margin: 0;}.rotat {width: 70px;height: 270px;margin: 0 auto;-webkit-transform-origin-x: 50%; -webkit-transform-origin-y: 0px;-moz-transform-origin-x: 50%; -moz-transform-origin-y: 0px;-o-transform-origin-x: 50%; -o-transform-origin-y: 0px;/*background-color:grey;*/ /* opacity:0.2;*//*-webkit-transform: rotate(7deg);*//*-moz-transform: rotate(7deg);*//*-o-transform: rotate(7deg);*/}.line {width: 2px;background-color: grey;height: 200px;margin: 0 auto;opacity: 0.2;}.rimg {background: url(./t.png) no-repeat 0 -8px;height: 70px;}</style></head><body><div class="rotat" style="-webkit-transform: rotate(7deg)"><div class="line"></div><div class="rimg"></div></div></body></html> |
|
京ICP备14020293号-2
本网站内容均收集于互联网，如有问题请联系QQ:389897944予以删除
窥视卡
雷达卡
楼主
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡