摆动效果

 

今天做的测试，先记下来

<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta charset="utf-8">
        <title>Carl Test</title>
        <style>
                .bag-icon {
                    background-image: url("http://static.360buyimg.com/finance/mobile/financial/xiaobai/1.0.0/css/i/bag2.png");
                    height: 50px;
                    width: 50px;
                    background-position: left top;
                    display: block;
                    position: relative;
                    z-index: 2;
                    top:-7px;
                  
                }
                #rotateBox{
                    left:400px;
                    position:absolute;
                    top:50px;
                    transform-origin: center top 0;
                }
        </style>
          <script src="./js/jquery-1.8.0.min.js"></script>        
</head>
<body>

<div id="rotateBox" style="transform: rotateZ(0deg);"  >
    <svg id="svg_line1" height="165" width="50" style=" z-index: 4;position:relative">
        <path stroke-width="1" stroke="#ff801a" fill="none" d="M25 0 Q25 65, 25 165">
    </svg>
    <a class="bag-icon" href="javascript:;"></a>
</div>

<script>
    var intval ;    
    function rotateBox(){
        var t=500,va =Number(5);
        intval= setInterval(function(){
            var tmp = Number(Math.cos(t)).toFixed(2);
        
            tmp = tmp * va;
             $('#rotateBox').css('transform','rotateZ('+(tmp)+'deg)');
             $('#svg_line1 path').attr('d','M25 0 Q'+(Number(25)+Number(tmp*0.8))+' 65, 25 165');    
             va=va-0.1;
            if(t>0 && va>0){t=t-1;}else{
            $('#rotateBox').css('transform','rotateZ(0deg)');clearInterval(intval);
            $('#svg_line1 path').attr('d','M25 0 Q25 65, 25 165');
            }
        },100);
    }
    rotateBox();
    
    setInterval(function(){
        rotateBox();
    },10000);
</script>

</body>
</html>

 

posted @ 2015-10-03 16:41  jinhuazhe2013  阅读(226)  评论(0)  编辑  收藏  举报