登录
0800800.com
    
 频道栏目

 查询

标题 内容

 最新评论

 最新图库

 博客统计
  • 今日数:0
  • 文章数:587
  • 收藏数:4
  • 图片数:67
  • 评论数:94
  • 开设时间:2006-3-2
  • 更新时间:2019年12月8日

  •  网友正查看的网页

     友情链接


    2009-9-3 11:55:31   晴天 
    开新窗口访问该主题 JavaScript滚动新闻类

    程序代码


    <!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" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>滚动新闻类 - 51js.com - biyuan</title>
    <style type="text/css">
    body {
    text-align:center;
    }
    td {
    font-size:12px;
    line-height:20px;
    text-align:left;
    }
    .marquee {
    width:100%;
    height:100%;
    overflow:hidden;
    }
    .m {
    height:20px;
    }
    .m2 {
    height:90px;
    }
    </style>
    </head>
    <body>
    <table border='1'>
    <tr>
    <td height='20' width='250'><div id='marquee1' class='marquee m'></div></td>
    <td height='20' width='300'><div id='marquee2' class='marquee m'></div></td>
    </tr>
    <tr>
    <td height='99' colspan='2'>基本上够用了吧!</td>
    </tr>
    <tr>
    <td height='90' colspan='2'><div id='marquee3' class='marquee m2'></div></td>
    </tr>
    </table>
    <script language="JavaScript">
    function BYMarquee(){
    this.Content = []; //显示内容
    this.Speed = 20; //上移速度
    this.Object = {}; //marquee容器对象
    this.Pause = true; //是否停留
    this.Start = function(){
    var o = this.Object;
    var Pause = this.Pause;
    var Stop = false;
    var Stop2 = false;
    o.onmouseover = function(){
    Stop = Stop2 = true;
    }
    o.onmouseout = function(){
    Stop = Stop2 = false;
    }
    var BodyHtml = [];
    for(var i in this.Content){
    BodyHtml.push("<a href=\"" + this.Content[i].link + "\">" + this.Content[i].text + "</a>");
    }
    var Dv = document.createElement("div");
    Dv.innerHTML = BodyHtml.join("<br />");
    o.appendChild(Dv);
    var DvHeight = Dv.offsetHeight;
    while(Dv.offsetHeight / 2 < o.offsetHeight){
    Dv.innerHTML += "<br />" + Dv.innerHTML;
    }
    Dv.innerHTML += "<br />" + Dv.innerHTML;
    setInterval(function(){
    if(!Stop){
    o.scrollTop ++;
    if(o.scrollTop == o.scrollHeight - o.offsetHeight){
    o.scrollTop = DvHeight - o.offsetHeight;
    }
    if(Pause){
    if(o.scrollTop % o.offsetHeight == 0){
    Stop = true;
    setTimeout(function(){
    Stop = Stop2;
    }, 3000);
    }
    }
    }
    }, this.Speed);
    }
    }
    //实例1
    var marquee1 = new BYMarquee();
    marquee1.Content = [
    {link : '#', text : '英法国防部证实两国核潜艇相撞'},
    {link : '#', text : '中国赴欧采购清单敲定 涉及金额150亿元'}
    ];
    marquee1.Object = document.getElementById('marquee1');
    marquee1.Start();
    //实例2
    var marquee2 = new BYMarquee();
    marquee2.Content = [
    {link : '#', text : '剑仙李横握锋利嚣张的地铜剑,左右晃动'},
    {link : '#', text : '你的奴隶【剑仙李】奋起反抗,被你狠狠地教训了一顿!'},
    {link : '#', text : '我的奴隶 Su.新武将 在奴隶市场输给了 金光灿烂'}
    ];
    marquee2.Speed = 10;
    marquee2.Object = document.getElementById('marquee2');
    marquee2.Start();
    //实例3
    var marquee3 = new BYMarquee();
    marquee3.Content = [
    {link : '#', text : '关于封装的方法之间调用的问题求助'},
    {link : '#', text : '如何用Javascript来删除浏览器的历史记录?'},
    {link : '#', text : '请高手帮忙破解一段代码'}
    ];
    marquee3.Speed = 50;
    marquee3.Pause = false;
    marquee3.Object = document.getElementById('marquee3');
    marquee3.Start();


    //销毁
    marquee1 = marquee2 = marquee3 = null;
    </script>
    </body>
    </html>



    点击查看效果


    Admin 发表于 代码 | 评论(0) | 阅读(1203)


    评论

    您的昵称:
    文章内容:
        您可以使用[Ctrl+Enter]或[Alt+S]来提交