Javascript实现滚动新闻

最新推荐文章于 2021-05-30 21:44:52 发布

kinber

最新推荐文章于 2021-05-30 21:44:52 发布

阅读量801

点赞数 1

CC 4.0 BY-SA版权

分类专栏：网络管理文章标签： javascript function shell border div class

本文链接：https://blog.youkuaiyun.com/kinber/article/details/5264746

网络管理专栏收录该内容

18 篇文章

订阅专栏

<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>滚动新闻类</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>

DIV
<!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>
<title> new document </title>
<style>
#dhooo{
padding:20px;
background:#ddd;
float:left;
border:3px double #aaa;
}
#dhooo div{
border:1px solid #aaa;
width:350px;
overflow:hidden;
margin:10px;
background:#003399;
color:#fff;
}
ul,li{
margin:0px;
padding:0px;
list-style-type:none;
font-size:12px;
margin-left:5px;
}
</style>
</head>

<body>
<div id="dhooo">
<div id="shell1"></div>
<div id="shell2"></div>
<div id="shell3"></div>
<div id="shell4"></div>
</div>
</body>
<script type="text/javascript">
/*
滚动类；
*/
news={
scroller:function(shell){
   var Class=function (shell){
    this.list=[];
    this.pauseTime=1000;
    this.speed=20;
    this.lineHeight=20;
    this.pauseSpace=0;
    this.dir=1;
    this.shell=document.getElementById(shell);
   };
   Class.prototype={
    add:function (x){
     if(x instanceof Array){this.list=this.list.concat(x);}
     else{this.list.push(x);}
     return this;
    }
    ,set:function (fn){fn.call(this);return this;}
    ,run:function(){
     var inner=document.createElement('UL');
     this.shell.appendChild(inner);
     for (var i=0;i<this.list.length;i++ ) {
      var li=inner.appendChild(document.createElement('LI'));
      li.innerHTML=this.list[i];
      li.style.lineHeight=this.lineHeight+'px';
     }
     this.shell.appendChild(inner.cloneNode(true));
     var Hidden=this;
     (function (){
      with(Hidden){
       if(dir>0){
        if(++shell.scrollTop==inner.offsetHeight){shell.scrollTop=0;}
       }else{
        if(--shell.scrollTop<=0){shell.scrollTop=inner.offsetHeight;}
       }
       var interval=shell.scrollTop%pauseSpace?speed:pauseTime;
      }
      setTimeout(arguments.callee,interval);
     })();
    }
   };
   return new Class(shell);
}
}

/*
通用配制函数
*/
set1=function (){
this.speed=10;
this.pauseSpace=50;
this.lineHeight=50;
this.shell.style.height='50px';
this.list=[
   '英法国防部证实两国核潜艇相撞',
   '中国赴欧采购清单敲定涉及金额150亿元'
];
}
set2=function (){
this.speed=20;
this.pauseTime=20;
this.shell.style.height='54px';
this.shell.style.background="#CC3300";
this.list=[
   '剑仙李横握锋利嚣张的地铜剑，左右晃动',
   '你的奴隶【剑仙李】奋起反抗，被你狠狠地教训了一顿！',
   '我的奴隶 Su.新武将在奴隶市场输给了金光灿烂'
];
}
/*
向上间断滚动
*/
news.scroller('shell1').set(set1).run();
/*
向下间断滚动
*/
news.scroller('shell2').set(set1).set(function (){this.dir=-1;this.shell.style.background="#339933";}).run();
/*
向上连续滚动
*/
news.scroller('shell3').set(set2).run();
/*
向下连续滚动
*/
news.scroller('shell4').set(set2).set(function (){this.dir=-1;this.shell.style.background="#CC9900";}).run();