JavaScript滚动新闻类

yuan306801350

yuan306801350

2016-02-19 15:18

图老师小编精心整理的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 = {};    //http://www.knowsky.com  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");
        }

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)        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

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

JavaScript滚动新闻类

Web开发
JavaScript滚动新闻类

Javascript Chinaz的不间断滚动新闻函数

Web开发
Javascript Chinaz的不间断滚动新闻函数

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

JS新闻无缝滚动封装函数

Web开发
JS新闻无缝滚动封装函数

JavaScript类

Web开发
JavaScript类

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript制作滚动文本效果

Web开发
JavaScript制作滚动文本效果

javascript之循环停顿上下滚动

Web开发
javascript之循环停顿上下滚动

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

sgtool.exe应用程序错误

sgtool.exe应用程序错误

js滚动的进度条的3种编程方式

js滚动的进度条的3种编程方式
下拉加载更多内容 ↓