javaScript实现滚动新闻的方法_javascript技巧
本文实例讲述了javaScript实现滚动新闻的方法。分享给大家供大家参考。具体如下：
rolling_new.html页面如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>
<style type="text/css">
*{margin:0;padding:0;}
#news{display:none;}
</style>
<body>
<div id="news">
太平天国医疗卫生组织，在国家制度上，有一定的组织，已经形成为一
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。
种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。种正规化的制度。它可分为朝内、军中、居民三个系统。
</div>
<div id="show_news">
</div>
</body>
<script type="text/javascript">
function $(node){
return document.getElementById(node);
}
function getElementsByClassName(str,root,tag){
if(root){
root=typeof root=="string"?document.getElementById(root):root;
}else{
root=document.body;
}
tag=tag||"*";
var els=root.getElementsByTagName(tag),arr=[];
for(var i=0,n=els.length;i<n;i++){
for(var j=0,k=els[i].className.split(" "),l=k.length;j<1;j++){
if(k[j]==str){
arr.push(els[i]);
break;
}
}
}
return arr;
}
function attachEvent(node,eventType,handler){
node=typeof node=="string"?document.getElementById(node):node;
if(document.all){
node.attachEvent("on"+eventType,handler);
}else{
node.addEventListener(eventType,handler,false);
}
}
function rolling_news(source,target,width,height,speed,direction){
this.source=$(source);
this.source_content=$(source).innerHTML;
this.target=$(target);
this.width=width; //宽
this.height=height; //高
this.speed=speed; //滚动速度
this.direction=direction;//方向
this.tag=0;
}
rolling_news.prototype={
version:"1.00",
author:"yangfeifei",
date:"2011-10-23",
initialize:function(){
var o=this;
var target=o.target;
var content=o.source_content;
var innerDiv=document.createElement("div");
innerDiv.setAttribute("class","innerDiv");
o.source.innerHTML="";
innerDiv.innerHTML=o.source_content;
target.appendChild(innerDiv);
//显示区域样式
target.style.width=o.width+"px";
target.style.height=o.height+"px";
target.style.overflow="hidden";
target.getElementsByTagName('div')[0].style.width=o.width+"px";
target.getElementsByTagName('div')[0].style.height=target.getElementsByTagName('div')[0].scrollHeight>o.height?target.getElementsByTagName('div')[0].scrollHeight+"px":o.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度
//显示区域初始化
switch(o.direction){
case "up":
target.scrollTop="0";
o.addAfterNode();
break;
case "down":
o.addBeforeNode();
target.scrollTop=target.scrollHeight-o.height;
break;
}
//初始动作
o.autoplay();
attachEvent(o.target,'mouseover',function(){o.stop()});
attachEvent(o.target,'mouseout',function(){o.autoplay()});
},
up:function(){
var x=this;
var divHeight=x.target.getElementsByTagName('div')[0].scrollHeight>x.height?x.target.getElementsByTagName('div')[0].scrollHeight:x.height;
if((x.target.scrollHeight-x.target.scrollTop)!=x.height){
x.target.scrollTop=x.tag;
}else{
x.addAfterNode();
x.target.removeChild(x.target.getElementsByTagName('div')[0]);
x.tag=x.tag-divHeight;
x.target.scrollTop=x.tag;
}
x.tag=x.tag+x.speed;
},
down:function(){
var j=this;
var divHeight=j.target.getElementsByTagName('div')[0].scrollHeight>j.height?j.target.getElementsByTagName('div')[0].scrollHeight:j.height;
if(j.target.scrollTop==0){
j.addBeforeNode();
j.target.removeChild(j.target.getElementsByTagName('div')[2]);
j.tag=j.tag-divHeight;
j.target.scrollTop=j.target.scrollHeight-j.height-j.tag;
}else{
j.target.scrollTop=j.target.scrollHeight-j.height-j.tag;
}
j.tag=j.tag+j.speed;
},
addAfterNode:function(){
var p=this;
var newDiv=document.createElement('div');
newDiv.setAttribute("class","innerDiv");
newDiv.innerHTML=p.source_content;
p.target.appendChild(newDiv);
newDiv.style.width=p.width+"px";
newDiv.style.height=p.target.getElementsByTagName('div')[0].scrollHeight>p.height?p.target.getElementsByTagName('div')[0].scrollHeight+"px":p.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度
},
addBeforeNode:function(){
var d=this;
var newDiv=document.createElement('div');
newDiv.setAttribute("class","innerDiv");
newDiv.innerHTML=d.source_content;
d.target.insertBefore(newDiv,d.target.getElementsByTagName('div')[0]);
newDiv.style.width=d.width+"px";
newDiv.style.height=d.target.getElementsByTagName('div')[0].scrollHeight>d.height?d.target.getElementsByTagName('div')[0].scrollHeight+"px":d.height+"px";//当文档实际高度大于容器时，高度为实际文档高度，否则为容器高度
},
play:function(){
var t=this;
switch(t.direction){
//向上
case "up":
t.up();
break;
//向右
case "down":
t.down();
break;
}
},
autoplay:function(){
var s=this;
s.auto=setInterval(function(){s.play()},1);
},
stop:function(){
var h=this;
clearInterval(h.auto);
}
}
var a=new rolling_news("news","show_news",200,200,1,"down");
a.initialize();
</script>
</html>希望本文所述对大家的javascript程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
如何使用WebSocket和JavaScript实现在线语音识别系统
Dec 17, 2023 pm 02:54 PM
如何使用WebSocket和JavaScript实现在线语音识别系统引言：随着科技的不断发展，语音识别技术已经成为了人工智能领域的重要组成部分。而基于WebSocket和JavaScript实现的在线语音识别系统，具备了低延迟、实时性和跨平台的特点，成为了一种被广泛应用的解决方案。本文将介绍如何使用WebSocket和JavaScript来实现在线语音识别系
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
如何利用JavaScript和WebSocket实现实时在线点餐系统
Dec 17, 2023 pm 12:09 PM
如何利用JavaScript和WebSocket实现实时在线点餐系统介绍：随着互联网的普及和技术的进步，越来越多的餐厅开始提供在线点餐服务。为了实现实时在线点餐系统，我们可以利用JavaScript和WebSocket技术。WebSocket是一种基于TCP协议的全双工通信协议，可以实现客户端与服务器的实时双向通信。在实时在线点餐系统中，当用户选择菜品并下单
如何使用WebSocket和JavaScript实现在线预约系统
Dec 17, 2023 am 09:39 AM
如何使用WebSocket和JavaScript实现在线预约系统在当今数字化的时代，越来越多的业务和服务都需要提供在线预约功能。而实现一个高效、实时的在线预约系统是至关重要的。本文将介绍如何使用WebSocket和JavaScript来实现一个在线预约系统，并提供具体的代码示例。一、什么是WebSocketWebSocket是一种在单个TCP连接上进行全双工
JavaScript和WebSocket：打造高效的实时天气预报系统
Dec 17, 2023 pm 05:13 PM
JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
javascript中如何使用insertBefore
Nov 24, 2023 am 11:56 AM
用法：在JavaScript中，insertBefore()方法用于在DOM树中插入一个新的节点。这个方法需要两个参数：要插入的新节点和参考节点（即新节点将要被插入的位置的节点）。
JavaScript和WebSocket：打造高效的实时图像处理系统
Dec 17, 2023 am 08:41 AM
JavaScript是一种广泛应用于Web开发的编程语言，而WebSocket则是一种用于实时通信的网络协议。结合二者的强大功能，我们可以打造一个高效的实时图像处理系统。本文将介绍如何利用JavaScript和WebSocket来实现这个系统，并提供具体的代码示例。首先，我们需要明确实时图像处理系统的需求和目标。假设我们有一个摄像头设备，可以采集实时的图像数
