淘寶首頁左右擺動圖標效果

2024-09-05 12:18:20

字體：大中小

來源：轉載

供稿：網友

淘寶首頁左右擺動圖標效果，只判斷了火狐和IE，其它瀏覽器沒有做兼容，方法跟上面一樣。

<!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("/jscss/demoimg/201203/T1hp1UXhJoXXXXXXXX-375-75.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   id="mvbpknf"   class="top"></div><div   id="zxlgjlk"   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   id="mznmwdc"   class="solid"></div>    <div   id="dqwrblv"   class="ico" id="Lico"></div></div><div   id="fhnmhvc"   class="box" id="right">	<div   id="kxzytoy"   class="solid"></div>    <div   id="sulvblo"   class="ico" id="Rico"></div></div></body></html>

上一篇：JS實現頁面跳轉的幾種方式，共5種

下一篇：從天而降的網頁窗口JS代碼