js实现琴弦效果(兼容IE7)_琴弦 js-优快云博客

本文链接：https://blog.youkuaiyun.com/magicfly9527/article/details/51096358

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
        <meta http-equiv="expires" content="-1">
        <title>魔幻英雄小游戏</title>
        <style>
        #list{
            width: 302px; margin: 50px auto; padding: 0; list-style: none;
        }
        #list li{
            height: 40px; font: 12px/40px "宋体"; border:1px solid #000; position: relative;
        }
        #list span{
            height: 12px; line-height: 12px;
        }
        </style>
        <script src="move.js"></script>
        <script>
            window.onload = function(){
                var oList = document.getElementById('list');
                var aLi = document.getElementsByTagName('li');
                var iLiHeight = aLi[0].offsetHeight;
                for (var i = aLi.length - 1; i >= 0; i--) {
                    var sHtml = aLi[i].innerHTML;
                    aLi[i].innerHTML ='';
                    for(var j = 0; j<sHtml.length; j++){
                        aLi[i].innerHTML +="<span>"+sHtml.charAt(j)+"</span>";
                    }
                    var aSpan = aLi[i].children;
                    var iSpanHeight = aSpan[0].offsetHeight;
                    for(var j = 0; j<aSpan.length; j++){
                        var oSpan = aSpan[j];
                        oSpan.style.left = oSpan.offsetLeft + 'px';
                        oSpan.style.top = oSpan.offsetTop + 'px';
                        oSpan.startTop = oSpan.offsetTop;
                    }
                    for(var j = 0; j<aSpan.length; j++){
                        aSpan[j].style.position = 'absolute';
                        (function(aSpan,nub2){
                            var iStart = 0;
                            var oSpan = aSpan[nub2];
                            oSpan.onmouseover = function(ev ){
                                var ev = event || ev;
                                iStart = ev.clientY;
                            }
                            oSpan.onmousemove = function(ev ){
                                var ev = event || ev;
                                var iDis = ev.clientY - iStart;
                                var iNub = iDis >0?1:-1;
                                if(this.startTop + iDis  > 0 && this.startTop + iDis < iLiHeight - iSpanHeight){
                                   // this.style.top = this.startTop + iDis + 'px';
                                   for(var j = 0; j<aSpan.length;j++){
                                        if(Math.abs(iDis)> Math.abs(nub2-j)){
                                            aSpan[j].style.top = aSpan[j].startTop + (Math.abs(iDis) - Math.abs(nub2-j))*iNub+'px';
                                        }else{
                                            aSpan[j].style.top = aSpan[j].startTop +'px';
                                        }
                                   }
                                }
                            }
                            oSpan.onmouseout = function(ev ){
                                for(var j = 0; j<aSpan.length;j++){
                                    startMove(aSpan[j],{top:aSpan[j].startTop},500,"elasticOut");
                                }
                            }
                        })(aSpan,j)

                    }
                };

            }
        </script>
    </head>
<body>
    <ul id="list">
        <li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换1</li>
        <li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换222</li>
        <li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换3333</li>
        <li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换44444</li>
        <li>魔幻英雄小游戏文字列表图片高斯斯文模糊切换555555</li>
    </ul>
</body>
</html>

MOVE.JS

// JavaScript Document

//t 时间变化量time，B初始量 begin，C变化量change，D，时间duraction  
     var Tween = {  
        linear:function(t,b,c,d){  
             return t*c/d+b;  
         },  
         easeIn:function(t,b,c,d){  
             return c*(t/=d)*t+b;  
         },
         elasticOut:function (t, b, c, d, a, p) {
             if (t == 0) return b;
             if ((t /= d) == 1) return b + c;
             if (!p) p = d * .3;
             if (!a || a < Math.abs(c)) {
                 a = c;
                 var s = p / 4;
             }
             else var s = p / (2 * Math.PI) * Math.asin(c / a);
             return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
         }

     }  

     function startMove(obj, json,times,fx, fn) {  

         clearInterval(obj.timer);  

         var iCur = {};  

         var startTime = now();  

         for(var attr in json){  

             if (attr == 'opacity') {  

                     iCur[attr] = parseInt(parseFloat(getStyle(obj, attr)) * 100);  

                 } else {  

                     iCur[attr] = parseInt(getStyle(obj, attr));  
                 }  

         }  

         obj.timer = setInterval(function() {  

             var changeTime = now();  

             //  

             var t = times  - Math.max(0,startTime- changeTime+times);  

             for (var attr in json) {  

                 var value = Tween[fx](t,iCur[attr],json[attr]-iCur[attr],times);  

                 //console.log(value);  
                   
                 if (attr == 'opacity') {  

                     obj.style.filter = 'alpha(opacity=' + value + ') ';  

                     obj.style.opacity = value / 100;  

                 } else {  

                     obj.style[attr] = value + 'px';  
                 }  
             }  

             if (t==times) {  

                 clearInterval(obj.timer);  

                 if (fn) {  

                     fn.call(obj)  
                 }  
             }  

         }, 13)  
     }  


     function getStyle(obj, attr) {  

         if (obj.currentStyle) {  

             return obj.currentStyle[attr];  

         } else {  

             return getComputedStyle(obj, false)[attr];  
         }  
     }  


     function now(){  

         return new Date().getTime();  
     }