淘宝首页左右摆动图标效果

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝首页左右摆动图标效果</title>
<style type="text/css">
body{margin:0px;padding:0px;}
.top{width:100%;height:25px;background:#eeeeee;border-bottom:1px solid #dcdcdc;}
.box{height:300px;position:absolute;top:20px;width:200px;z-index:10000;-moz-transform:rotate(-3deg);-moz-transform-origin: 50% 0;}
#left{left:125px;}
#right{right:125px;}
.ico{display:inline;margin-left:25px;bottom:0;height:75px;left:0;position:absolute;width:75px;cursor:move;}
#Lico{background-image:url("//ku.shouce.ren/files/images/201601/56a3209c27832.png");}
#Rico{background-image:url("jscss/demoimg/201203/T12.aTXfJnXXXXXXXX-375-75.png");}
.solid{display:inline;margin-left:25px;background:none repeat scroll 0 0 #EEEEEE;height:240px;left:36px;position:absolute;top:0;width:2px;}
</style>
<script type="text/javascript">
window.onload = function(){
	var oLeft = document.getElementById('left');
	var oRight = document.getElementById('right');
	var ua = navigator.userAgent,isIE = null;
	var oLswitch = true;
	var oRswitch = true;
	var oLtimer = oRtimer = null;
	if(/msie (\d+\.\d)/i.test(ua))isIE = document.documentMode || + RegExp['\x241'];
	if(isIE){
		var i = 0.001;
		var j = 0.001;
		function ieLeft(){
			if(oLswitch){
				i =  parseFloat(i+0.002);
				j =  -parseFloat(j+0.002);
				if(i>=0.1)oLswitch = false;
			}else{
				i =  parseFloat(i-0.002);
				j =  -parseFloat(j-0.002);
				if(i<=-0.05)oLswitch = true;
			}
			oLeft.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,M11=1,M12='+i+',M21='+j+',M22=1)';
		};
		function ieRight(){
			if(oRswitch){
				i =  parseFloat(i+0.002);
				j =  -parseFloat(j+0.002);
				if(i>=0.1)oRswitch = false;
			}else{
				i =  parseFloat(i-0.002);
				j =  -parseFloat(j-0.002);
				if(i<=-0.05)oRswitch = true;
			}
			oRight.style.filter = 'progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,M11=1,M12='+i+',M21='+j+',M22=1)';
		};
		oLtimer = setInterval(ieLeft,30);
		oRtimer = setInterval(ieRight,30);
	}else{
		var i = 3;
		var j = -3;
		function left(){
			if(oLswitch){
				i = i-0.15;
				if(i<=-3)oLswitch = false;
			}else{
				i = parseFloat(i+0.15);
				if(i==3)oLswitch = true;
			}
			oLeft.style.MozTransform = 'rotate('+i+'deg)';
		}
		function right(){
			if(oRswitch){
				j = parseFloat(j+0.15);
				if(j>=3)oRswitch = false;
			}else{
				j = parseFloat(j-0.15);
				if(j<=-3)oRswitch = true;
			}
			oRight.style.MozTransform = 'rotate('+j+'deg)';
		}
		oLtimer = setInterval(left,30);
		oRtimer = setInterval(right,30);
	}
};
</script>
</head>
<body>
<div class="top"></div>
<div class="box" id="left" style="filter:progid:DXImageTransform.Microsoft.Matrix(SizingMethod=auto expand,FilterType=bilinear,M11=1,M12=-0.1,M21=0.1,M22=1)">
	<div class="solid"></div>
    <div class="ico" id="Lico"></div>
</div>
<div class="box" id="right">
	<div class="solid"></div>
    <div class="ico" id="Rico"></div>
</div>
</body>
</html>

AخA
 
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>淘宝首页左右摆动图标效果</title>
<style type="text/css">
body{margin:0px;padding:0px;}
.top{width:100%;height:25px;background:#eeeeee;border-bottom:1px solid #dcdcdc;}
.box{height:300px;position:absolute;top:20px;width:200px;z-index:10000;-moz-transform:rotate(-3deg);-moz-transform-origin: 50% 0;}
#left{left:125px;}
#right{right:125px;}
.ico{display:inline;margin-left:25px;bottom:0;height:75px;left:0;position:absolute;width:75px;cursor:move;}
#Lico{background-image:url("//ku.shouce.ren/files/images/201601/56a3209c27832.png");}
#Rico{background-image:url("jscss/demoimg/201203/T12.aTXfJnXXXXXXXX-375-75.png");}
.solid{display:inline;margin-left:25px;background:none repeat scroll 0 0 #EEEEEE;height:240px;left:36px;position:absolute;top:0;width:2px;}

CSS代码

复制格式化注释注释颜色清空

放大

CSS代码...​x
 
​

JS代码

复制格式化注释注释清空

放大

JS代码...xxxxxxxxxx
 
​

运行代码

简介

请输入代码名称！

名称

淘宝首页左右摆动图标效果

分类

网站常用

描述

淘宝首页左右摆动图标效果，只判断了火狐和IE，其它浏览器没有做兼容，方法跟上面一样。