<!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 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>
淘宝首页左右摆动图标效果
时间： 2024-10-12 21:04:33