JS實現跑馬燈效果(向左，向上)

gwf6 9年前發布 | 2K 次閱讀 JavaScript 

<html>
<head>
<title>JS實現跑馬燈效果</title>
<style>


    

  • {
  font-size:12px;
  font-family:宋體, Arial;
} /規定了所有的字體樣式/
body {
  overflow:auto;
}
#mq {
  width:220px;
  height:40px;
  line-height:20px;
  overflow:hidden;
  border:1px solid black;
}
#mq div {
  position:absolute;
  width:220px;
  padding:0px 10px;
}
</style>
<script> 
function init(){
  initMq($("mq"));
  $("mq").start();
}
    • 



function initMq(obj){
    var objs;
    //定義跑馬燈對象的自定義屬性
    obj.currentItem = -1;
    obj.loopDelay = 50;
    obj.loopItems = new Array();
    obj.loopTimer = null;
    obj.speedX = 2;
    obj.speedY = 2;
    //定義跑馬燈對象的自定義方法
    obj.loop = mq_loop;
    obj.start = mq_startLoop;
    obj.stop = mq_stopLoop;
    //定義跑馬燈對象的事件
    obj.onmouseover = function(){ this.stop(); }
    obj.onmouseout = function(){ this.loop(); }



//獲取跑馬燈對象的所有子元素
objs = obj.getElementsByTagName("div");
for(var i=0; i<objs.length; i++){
    //在loopItems屬性中記錄子元素
    obj.loopItems.push(objs[i]);
    //自定義子元素的屬性和方法
    objs[i].index = i;
    objs[i].move = move;
    objs[i].reset = mq_reset;
    //初始化子元素的狀態
    objs[i].reset();
}



}


function move(x, y){
    this.style.left = x + "px";
    this.style.top = y + "px";
}


function mq_loop(){
    var obj;
    clearTimeout(this.loopTimer);
    if(this.currentItem >= this.loopItems.length)this.currentItem = 0;
    obj = this.loopItems[this.currentItem];
    if(obj.offsetLeft!=this.offsetLeft){
        //向左卷動
        obj.move(obj.offsetLeft - this.speedX, obj.offsetTop);
    }else if(obj.offsetTop + obj.offsetHeight > this.offsetTop){
        //向上卷動
        obj.move(obj.offsetLeft, obj.offsetTop - this.speedX);
    }else{
        //重置該子元素
        obj.reset();
        this.currentItem++;
    }
    this.loopTimer = setTimeout("$(\""+this.id+"\").loop();", this.loopDelay);
}


function mq_reset(){
    var p = this.parentNode;
    this.move(p.offsetLeft + p.offsetWidth, p.offsetTop);
}


function mq_startLoop(){
    for(var i=0; i<this.loopItems.length; i++)this.loopItems[i].reset();
    this.currentItem = 0;
    this.loop();
}


function mq_stopLoop(){
    clearTimeout(this.loopTimer);
}


function $(str){ return(document.getElementById(str)); } 
window.onload = init;
</script>
</head>
<body>
<div id="mq">
  <div> js實現的跑馬燈效果11111 </div>
  <div> js實現的跑馬燈效果22222 </div>
</div>
</body>
</html></pre>
 本文由用戶 gwf6 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！