滚动字幕，鼠标经过停留

最新推荐文章于 2023-04-05 17:32:50 发布

Spring

最新推荐文章于 2023-04-05 17:32:50 发布

阅读量2.3k

点赞数 4

分类专栏：程序人生文章标签： function constructor 测试 xhtml border json

本文链接：https://blog.csdn.net/hljflp/article/details/7082985

版权

程序人生专栏收录该内容

14 篇文章 0 订阅

订阅专栏

做了一天的滚动字幕，鼠标经过停留，终于弄出来了，给大家总结下代码如下，直接可复制粘贴用，希望对大家有所帮助，如有问题，联系qq:523132661

<!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" οnmοuseοver="myStop();" οnmοuseοut="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>

Spring

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
滚动字幕，鼠标经过停留

做了一天的滚动字幕，鼠标经过停留，终于弄出来了，给大家总结下代码如下，直接可复制粘贴用，希望对大家有所帮助，如有问题，联系qq:523132661 无标题文档 window.onload = function(){ var m = new XX.Fx.Marquee(document.getElementById('demo'), {direction:'to
复制链接

扫一扫