模仿淘宝首页淘工头像的的自由摇摆

最新推荐文章于 2024-05-18 16:20:54 发布

narutolby

最新推荐文章于 2024-05-18 16:20:54 发布

阅读量72

点赞数

分类专栏： web前端文章标签： css css3 transform JavaScript ViewUI

本文链接：https://blog.csdn.net/narutolby/article/details/84162144

版权

web前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

[size=large]基于css3的transform实现淘宝首页淘工图像的自由摇摆，不过没有淘宝首页那么逼真，我只是简单的按照匀速摇摆，但是现实情况摇摆速度和角度有关，这就需要一些物理公式进行处理，这里只是简单的写了个demo，没有物理公式的计算，目前demo只支持webkit内核的浏览器，如chrome，safari。[/size]

<!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>

narutolby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
模仿淘宝首页淘工头像的的自由摇摆

[size=large]基于css3的transform实现淘宝首页淘工图像的自由摇摆，不过没有淘宝首页那么逼真，我只是简单的按照匀速摇摆，但是现实情况摇摆速度和角度有关，这就需要一些物理公式进行处理，这里只是简单的写了个demo，没有物理公式的计算，目前demo只支持webkit内核的浏览器，如chrome，safari。[/size][code="java"] ...
复制链接

扫一扫