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

最新推荐文章于 2024-08-09 06:13:01 发布

weixin_30237281

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量232

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/youtianxia/p/3859901.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("/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>

转载于:https://www.cnblogs.com/youtianxia/p/3859901.html

weixin_30237281

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
淘宝首页左右摆动图标效果

<!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><...
复制链接

扫一扫