十万火急：做的无缝滚动字幕，鼠标放上去要静止，如何实现

Spring 2011-12-15 11:10:15



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript">

window.onload = function(){

    var m = new XX.Fx.Marquee(document.getElementById('textdiv'), {direction:'top', speed:20, step:1});

    m.start();

    

};

</script>

<script>

window.XX = window.XX || {};

XX.Fx =  XX.Fx || {};





/*

走马灯构造函数；

参数elem:要进行包装的dom元素，即包装后，其内部元素会实现走马灯效果

opts:JSON格式的数据，可传入的参数包括:

    {

       speed //滚动速度，以毫秒为单位，默认为1000

       step //滚动像素，    默认为5

       direction //滚动方向，包括'left', 'right', 'top', 'bottom'，默认'left'

    }

*/

XX.Fx.Marquee = function(elem, opts){

    opts = opts || {};

    this.el = elem;

    this.speed = opts.speed || 1000;

    this.step  = opts.step || 5;

    var dir = this.direction = opts.direction || 'left';

    

    if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') {

        throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"');    

    }

    

    elem.style.overflow = 'hidden';

    elem.style.whiteSpace = 'nowrap';

    if(dir === 'right' || dir === 'bottom'){

        this.step = - this.step ;    

    } 

    this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop';

    this.size   = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight);

};



XX.Fx.Marquee.prototype.start = function(){

    if(this.timer){

        clearTimeout(this.timer);    

    }

        

    this.el.innerHTML += this.el.innerHTML;

    var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null;

    switch (this.direction){

        case 'right':

        case 'bottom':

            move =     function(){

                if(el[offset] > 0){

                    el[offset] += step;

                    setTimeout(move, speed)

                } else{

                    el[offset] = that.size;

                    setTimeout(move, speed)    

                }    

            };    

            break;

        default:

            move =     function(){

                if(el[offset] < size){

                    el[offset] += step;

                    setTimeout(move, speed)

                } else{

                    el[offset] = 0;

                    setTimeout(move, speed)    

                }    

            };    

    }



    this.timer = setTimeout(move, speed);

};



XX.Fx.Marquee.prototype.stop = function(){

    clearTimeout(this.timer);    

};

</script>

</head>



<body>

<hr color="#ff0000" />

<div id="textdiv" style="border:1 solid #c0c0c0;text-align:left;width:650px;height:100px" onmousemove="">

<h2>--------------------走马灯演示测试--------------------------</h2><br />

文字滚动测试1<br />

文字滚动测试2<br />

文字滚动测试3<br />

<br />

制作者：Exodia<br />

联系方式:QQ39942816<br />

<a href="http://blog.csdn.net/dxx1988">BLOG地址</a>

</div>

</body>

</html>

...全文

337 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

Spring 2011-12-19

打赏
举报

[Quote=引用 13 楼 easyuu 的回复:]
JScript code

window.XX = window.XX || {};
XX.Fx = XX.Fx || {};

楼主，问下，为啥要这么弄呢，我一直不明白
[/Quote]
无缝滚动就是连续滚动，中间没有间隙，祝你好运。

sxabu 2011-12-19

打赏
举报

弱弱问一下，无缝滚动是什么意思

easyuu 2011-12-19

打赏
举报



window.XX = window.XX || {};

XX.Fx =  XX.Fx || {};

楼主，问下，为啥要这么弄呢，我一直不明白

Spring 2011-12-19

打赏
举报

谢谢大家对我的支持和帮助，我终于做出来了，写了两个函数，myStop(),myStart()，两个控制函数，代码如下，直接就能用，希望对大家有所帮助。



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<script type="text/javascript"> 

	window.onload = function(){

	    var m = new XX.Fx.Marquee(document.getElementById('demo'), {direction:'top', speed:80, step:1});

	    m.start();

	    myStop = function(){

	    	m.stop();

	    };



	    myStart = function(){

	    	m.start();

	    }

	};

window.XX = window.XX || {};

XX.Fx =  XX.Fx || {};

/*

走马灯构造函数；

参数elem:要进行包装的dom元素，即包装后，其内部元素会实现走马灯效果

opts:JSON格式的数据，可传入的参数包括:

    {

       speed //滚动速度，以毫秒为单位，默认为1000

       step //滚动像素，    默认为5

       direction //滚动方向，包括'left', 'right', 'top', 'bottom'，默认'left'

    }

*/



/* XX.Fx.Marquee实现动画的函数 */

XX.Fx.Marquee = function(elem, opts){ 

    opts = opts || {}; //为设定滚动的方向变量

    this.el = elem;

    this.speed = opts.speed || 1000; //滚动的速度为1秒滚动一次

    this.step  = opts.step || 5;  //滚动像素设置为5

    var dir = this.direction = opts.direction || 'left'; //滚动的方向设置

    

    if( dir !== 'left' && dir !== 'right' && dir !== 'top' && dir !== 'bottom') {

        throw new Error('Constructor "XX.Fx.Marquee": direction of options must be "left","right","top","bottom"');    

    }



    /*elem表示封装的滚定元素*/

     

    elem.style.overflow = 'hidden';   

    elem.style.whiteSpace = 'nowrap';

    if(dir === 'right' || dir === 'bottom'){

        this.step = - this.step ;    

    } 

    this.Offset = (dir === 'left' || dir === 'right') ? 'scrollLeft' : 'scrollTop';

    this.size   = parseInt((dir === 'left' || dir === 'right') ? elem.scrollWidth : elem.scrollHeight);

    this.el.innerHTML += this.el.innerHTML;

};

 

XX.Fx.Marquee.prototype.start = function(){



        if(this.timer) {

        	clearTimeout(this.timer);

        	}



    var that = this, speed = this.speed, step = this.step, offset = this.Offset, el = this.el, size = this.size, move = null;

    switch (this.direction){

        case 'right':

        case 'bottom':

            move = function(){

                if(el[offset] > 0){

                    el[offset] += step;

             

                } else{

                    el[offset] = that.size;

                 

                }    

            };    

            break;

        default:

            move = function(){

                if(el[offset] < size){

                    el[offset] += step;

           

                } else{

                    el[offset] = 0;

           

                }    

            };    

    }

 

    this.timer = setInterval(move, speed);

};

 

 

XX.Fx.Marquee.prototype.stop = function(){

    clearInterval(this.timer);    

};



</script> 

</head>



<body>

<hr color="#ff0000" />

 <div id="demo" style="border:1 solid #c0c0c0;text-align:left;width:954px;height:200px" onmouseover="myStop();" onmouseout="myStart();">

<h2>--------------------走马灯演示测试--------------------------</h2><br />

文字滚动测试1<br />

文字滚动测试2<br />

文字滚动测试3<br />

<br />

制作者：Exodia<br />

联系方式:QQ39942816<br />

<a href="http://blog.csdn.net/dxx1988">BLOG地址</a>

</div>

</body>

</html>

begintransaction 2011-12-17

打赏
举报

http://www.15ae.com/archive/2011-12/11030326450.html看例子吧

easyuu 2011-12-15

打赏
举报

用我写的这个插件吧，简单几句代码
插件使用说明
里面有一个滚动功能

插件使用实例

程序猿之殇 2011-12-15

打赏
举报

clearTimeout(this.timer)
this.timer值不是当前settimeout的值，所以不可能停止。

kao331431214 2011-12-15

打赏
举报

一个实例代码



<div id="colee">

  <div id="colee1">

    <ul>

      <li>111</li>

      <li>222</li>

      <li>333</li>

      <li>444</li>

      <li>555</li>

      <li>666</li>

      <li>777</li>

      <li>888</li>

      <li>999</li>

    </ul>

  </div>

  <div id="colee2"></div>

</div>

<script type="text/javascript">

    var speed = 30;

    var colee2 = document.getElementById("colee2");

    var colee1 = document.getElementById("colee1");

    var colee = document.getElementById("colee");

    colee2.innerHTML = colee1.innerHTML; //克隆colee1为colee2

    function Marquee1() {

        //当滚动至colee1与colee2交界时

        if (colee2.offsetTop - colee.scrollTop <= 0) {

            colee.scrollTop -= colee1.offsetHeight; //colee跳到最顶端

        } else {

            colee.scrollTop++;

        }

    }

    var MyMar1 = setInterval(Marquee1, speed); //设置定时器

    //鼠标移上时清除定时器达到滚动停止的目的

    colee.onmouseover = function() {

        clearInterval(MyMar1);

    }

    //鼠标移开时重设定时器

    colee.onmouseout = function() {

        MyMar1 = setInterval(Marquee1, speed);

    }

</script>

xuzuning 2011-12-15

打赏
举报

onmouseover

Spring 2011-12-15

打赏
举报

我现在滚动实现了，就是要将鼠标放上去，让静止显示，怎么弄，谢谢大家了。

Spring 2011-12-15

打赏
举报

[Quote=引用 8 楼 ncist_jianeng 的回复:]
我这有无缝滚动实例！！！把邮箱给我，我可以给你发个..
[/Quote]

兄弟谢谢了，我的邮箱是523132661@qq.com,尽快联系我。万分感谢。

ncist_jianeng 2011-12-15

打赏
举报

我这有无缝滚动实例！！！把邮箱给我，我可以给你发个..

easyuu 2011-12-15

打赏
举报

[Quote=引用 6 楼 hljflp 的回复:]

引用 5 楼 easyuu 的回复:
用我写的这个插件吧，简单几句代码
插件使用说明
里面有一个滚动功能

插件使用实例

兄弟你的插件很好用，非常感谢你，但是我发现不是无缝的滚动，希望兄弟帮帮忙，在线等。
[/Quote]
不是无缝滚动？
实例中
网站公告和产品展示，都是无缝滚动啊

Spring 2011-12-15