zoukankan      html  css  js  c++  java
  • 摆动效果

    今天做的测试,先记下来

    <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>
  • 相关阅读:
    H5图片上传、压缩
    数据库基本操作
    数组遍历
    CURL
    获取IP
    Memcached的实战笔记
    修bug总结 (基于java语言)
    java开发工作的总结
    多线程测试类
    可清除的单例对象获取类
  • 原文地址:https://www.cnblogs.com/jinhuazhe2013/p/4846990.html
Copyright © 2011-2022 走看看