首页 > 代码库 > 网站滚动公告信息的实现方式

网站滚动公告信息的实现方式

2024-08-31 09:21:33   219人阅读

一、可以直接使用marquee标签来实现。

1.align设定标签内容的对齐方式
　　absbottom：绝对底部对齐（与g、p等字母的最下端对齐）
　　absmiddle：绝对中央对齐
　　baseline：底线对齐
　　bottom：底部对齐（默认）
　　left：左对齐
　　middle：中间对齐
　　right：右对齐
　　texttop：顶线对齐
　　top：顶部对齐
2.direction设定活动字幕的滚动方向，默认为left
　　up:向上
　　down:向下
　　left:向左
　　right:向右
3.behavior设定滚动的方式，默认为scroll：
　　scroll：表示由一端滚动到另一端，循环滚动。
　　alternate：表示在两端之间来回交替进行滚动。
　　slide：表示由一端滚动到另一端，只滚动一次就停止。
4.scrollamount设定活动字幕的滚动速度，单位pixels（像素）。
5.scrolldelay设定活动字幕滚动两次之间的延迟时间，单位millisecond（毫秒）。
6.loop设定滚动的次数，当loop=-1表示一直滚动下去，默认为-1。
7.width、height规定滚动字幕的矩形区域的宽度和高度
8.bgcolor设定滚动范围内的背景颜色，背景颜色可用RGB、16进制值的格式或颜色名称来设定。
9.hspace设定活动字幕里所在的位置距离父容器水平边框的距离，即滚动范围左右的空白空间。
   vspace设定活动字幕里所在的位置距离父容器垂直边框的距离，即滚动范围上下的空白空间。
10.onMouseOut="this.start();" 鼠标移开后开始滚动
11.onMouseOver="this.stop();" 鼠标放上去后停止滚动

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title>marquee标签滚动</title>
 6 </head>
 7 <body>
 8     <div>
 9         <marquee align="right" 
10                  direction="up" 
11                  behavior="scroll" 
12                  scrollamount="10" 
13                  scrolldelay="0" 
14                  loop="-1" 
15                  width="1000" 
16                  height="30" 
17                  bgcolor="#0099FF" 
18                  hspace="10" 
19                  vspace="10" 
20                  onm ouseOut="this.start();" 
21                  onm ouseOver="this.stop();">
22             这里是滚动的内容
23         </marquee>
24     </div>
25 </body>
26 </html>

 上面的代码实现的滚动不是无缝滚动，添加contenteditable="true" onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;"可以实现首尾相连的滚动效果（无缝滚动），但是仅IE有效，其他浏览器还是首尾不连的，示例代码如下：

1 <marquee behavior="scroll" 
2          contenteditable="true" 
3          onstart="this.firstChild.innerHTML+=this.firstChild.innerHTML;" 
4          scrollamount="3" 
5          width="100">
6 　　这里是要滚动的内容
7 </marquee>

 二、使用js来控制滚动内容，可以直接实现无缝滚动。

用到的DOM对象属性：

innerHTML: 设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft: 设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop: 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth: 获取对象的滚动宽度
offsetHeight: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft: 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop: 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth: 获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

示例代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>横向无缝滚动</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 </head>
 7 <body>
 8     <div>站内公告</div>
 9     <hr/>
10     <div id="demo" style="overflow: hidden; width: 860px; align: center">
11         <table cellspacing="0" cellpadding="0" align="center" border="0">
12             <tbody>
13                 <tr>
14                     <td id="marquePic1" valign="top">
15                         <table width="1800px">
16                             <tr>
17                                 <td>第1个单元格</td>
18                                 <td>第2个单元格</td>
19                                 <td>第3个单元格</td>
20                                 <td>第4个单元格</td>
21                                 <td>第5个单元格</td>
22                                 <td>第6个单元格</td>
23                                 <td>第7个单元格</td>
24                                 <td>第8个单元格</td>
25                                 <td>第9个单元格</td>
26                                 <td>第10个单元格</td>
27                             </tr>
28                         </table>
29                     </td>
30                     <td id="marquePic2" valign="top">
31                     </td>
32                 </tr>
33             </tbody>
34         </table>
35     </div>
36 </body>
37 </html>
38 <script type="text/javascript"> 
39     //横向滚动 需要设置div的宽度
40     var speed=30 
41     marquePic2.innerHTML=marquePic1.innerHTML 
42     function Marquee(){ 
43         if(demo.scrollLeft>=marquePic1.scrollWidth){ 
44             demo.scrollLeft=0 
45         }else{ 
46             demo.scrollLeft++ 
47         }
48     } 
49     var MyMar=setInterval(Marquee,speed) 
50     demo.onmouseover=function() {clearInterval(MyMar)} 
51     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
52 </script>
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>纵向无缝滚动</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 6 </head>
 7 <body>
 8     <div>站内公告</div>
 9     <hr/>
10     <div id="demo" style="OVERFLOW: hidden; height: 100px;">
11         <div id="marquePic1">
12             第1行<br/>
13             第2行<br/>
14             第3行<br/>
15             第4行<br/>
16             第5行<br/>
17             第6行<br/>
18             第7行<br/>
19             第8行<br/>
20             第9行<br/>
21             第10行
22         </div>        
23         <div id="marquePic2" valign="top">
24         </div>
25     </div>
26 </body>
27 </html>
28 <script type="text/javascript"> 
29     //纵向滚动 需要设置div的高度
30     var speed=30 
31     marquePic2.innerHTML=marquePic1.innerHTML 
32     function Marquee(){ 
33         if(demo.scrollTop>=marquePic1.scrollHeight){ 
34             demo.scrollTop=0 
35         }else{ 
36             demo.scrollTop++ 
37         }
38     } 
39     var MyMar=setInterval(Marquee,speed) 
40     demo.onmouseover=function() {clearInterval(MyMar)} 
41     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} 
42 </script>

 

网站滚动公告信息的实现方式


联系
我们