JavaScript滚动新闻类

2016-02-19 15:18 8 1 收藏

图老师小编精心整理的JavaScript滚动新闻类希望大家喜欢,觉得好的亲们记得收藏起来哦!您的支持就是小编更新的动力~

【 tulaoshi.com - Web开发 】

程序代码
!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://www.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://www.tulaoshi.com/webkaifa/)

来源:http://www.tulaoshi.com/n/20160219/1609327.html

延伸阅读
标签: Web开发
现在有一个横向的IFRAME,需要通过点击iframe外的一个图片来横向滚动iframe内的一个html页,但又不想让看见iframe的滚动条,请问如何解决啊????  img   src="demo.gif"   onmousedown="window.timer=setInterval('a.document.body.scrollTop++',10)"   onmouseup="clearInterval(window.timer...
标签: Web开发
     在Javascript中,一切都是对象,包括函数。在Javascript中并没有真正的类,不能像C#,PHP等语言中用 class xxx来定义。但Javascript中提供了一种折中的方案:把对象定义描述为对象的配方(先看一下例子会比较容易理解)。      定义类的方法有很多种,这里有两中较为通用的方法,大家参考一下。 ...
标签: Web开发
参考地址:http://aboutplayer.com 代码如下: var lrc0, lrc1, lrc2; moveflag = false; var top, bottom; var lrcobj; var lrctop; predlt = 0; curdlt = 0; function lrcClass(tt) {   this.inr = [];   this.oTime ...
标签: Web开发
用两个div嵌套链接文字,最外面的div设置 overflow:hidden,并用js动态控制它的width,实现伸展与收缩。 !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&...
标签: Web开发
From:http://www.ajaxwing.com/index.php?id=2 一,背景 回顾一下编程语言的发展,不难发现这是一个不断封装的过程:从最开始的汇编语言,到面向过程语言,然后到面向对象语言,再到具备面向对象特性的脚本语言,一层一层封装,一步一步减轻程序员的负担,逐渐提高编写程序的效率。这篇文章是关于 JavaScript 的,所以我们先来...

经验教程

483

收藏

72
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部