您的位置：首页 > Web前端 > JavaScript

找了一个在JSP页面滚动播放新闻的JS方法感觉不错。

2011-08-02 09:46 886 查看

原文地址忘记了，

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航