关于文字水平方向向左滚动

最新推荐文章于 2023-12-15 11:30:46 发布

Sam零雨

最新推荐文章于 2023-12-15 11:30:46 发布

阅读量1.9k

点赞数

分类专栏： PHP 文章标签： PHP javascript 水平滚动文字 marquee

PHP 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文字滚动效果可以使用Html自带的标签<marquee>来实现，首先声明的是<marquee>是所有浏览器都支持的。其中<marquee>标签带有很多的属性，我们平常最常用的可以归结为一下几个：

（1）width //定义滚动条的宽度（2） height //定义滚动条的高度（3） bgcolor //定义背景颜色（4）direction //定义滚动方向，默认为向左滚动（5） behavior //行为（滚动方式）值有scroll（连续不断的滚动）slide（滚动一次并停止）alternate（交替式滚动）（6）scrollamount //单位时间内移动多少像素（7）scrolldelay //延迟的时间停顿（8）loop //循环次数，默认为无限循环（9）οnmοuseοver="this.stop()" οnmοuseοut="this.start()" //鼠标经过的时候停止，离开的时候继续滚动。

例子：<marquee width="300" height="30" bgcolor="red">宽300像素，高30像素。</marquee>

所有浏览器都兼容，但是仔细发现marquee实现的滚动效果太挫了，一闪一闪地滚动，用户体验不好。

于是找到了一个原生的JavaScript的代码，用户体验也不错。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>文字滚动效果</title>
 6 <style type="text/css">
 7 #container{
 8     background:#CCCCCC;  //滚动内容DIV背景颜色
 9     position:relative;
10     overflow:hidden;
11     width:550px;
12     height:25px;
13     line-height:25px;
14     margin:100px;
15 }
16 
17 #content{
18     position:absolute;
19     left:0;
20     top:0;
21     white-space:nowrap;
22 }
23 </style>
24 </head>
25 
26 <body>
27 <div id="container">
28     <div id="content">文字滚动测试！水平方向滚动！</div>
29 </div>
30 <script type="text/javascript">
31 if(!window.rollWord){
32      var rollWord = {
33            container:document.getElementById("container"),
34            content:document.getElementById("content"),
35            _containerWidth:1,
36            _contentWidth:1,
37            _speed:1,
38            setSpeed:function(opt){
39                  var This = this;
40                  This._speed = opt;
41            },
42            setContainerWidth:function(){
43                  var This = this;
44                  This._containerWidth = This.container.offsetWidth;
45            },
46            setContentWidth:function(){
47                  var This = this;
48                  This._contentWidth = This.content.offsetWidth;
49            },
50            roll:function(){
51                  var This = this;
52                  This.content.style.left = parseInt(This._containerWidth) + "px";
53                  var time = setInterval(function(){This.move()},20);
54                  This.container.onmouseover = function(){
55                       clearInterval(time);
56                  };
57                  This.container.onmouseout = function(){
58                       time = setInterval(function(){This.move()},20);
59                  };
60            },
61            move:function(){
62                  var This = this;
63                  if(parseInt(This.content.style.left)+This._contentWidth > 0)
64                  {
65                       This.content.style.left = parseInt(This.content.style.left)-This._speed + "px";
66                  }
67                   else
68                   {
69                       This.content.style.left = parseInt(This._containerWidth) + "px";
70                   }                 
71            },
72            init:function(opt){
73                 var This = this;
74                 var speed = opt.speed || 1;
75                 This.setSpeed(speed);
76                 This.setContainerWidth();
77                 This.setContentWidth();
78                 This.roll();
79            }
80       }
81 }
82       rollWord.init({speed:2});  //数值越小，滚动速度越慢。
83 </script>
84 </body>
85 </html>

Sam零雨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于文字水平方向向左滚动

文字滚动效果可以使用Html自带的标签来实现，首先声明的是是所有浏览器都支持的。其中标签带有很多的属性，我们平常最常用的可以归结为一下几个：（1）width //定义滚动条的宽度（2） height //定义滚动条的高度（3） bgcolor //定义背景颜色（4）direction //定义滚动方向，默认为向左滚动（5） behavior //行为（滚动方式）值有s
复制链接

扫一扫

专栏目录