js实现琴弦效果(兼容IE7)

来源：互联网发布：a卡游戏优化编辑：程序博客网时间：2024/09/21 11:21

<!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();       }

1 0