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程序设计有所帮助。
相关推荐
-
纯javascript实现四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]--> <!--[if IE 8 ]
-
javascript实现状态栏文字首尾相接循环滚动的方法
本文实例讲述了javascript实现状态栏文字首尾相接循环滚动的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">
-
javascript实现列表滚动的方法
本文实例讲述了javascript实现列表滚动的方法.分享给大家供大家参考.具体如下: index.html如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo
-
JavaScript实现滚动栏效果的方法
本文实例讲述了JavaScript实现滚动栏效果的方法.分享给大家供大家参考.具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } #div1 ul{ position: absolute; le
-
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html
-
JavaScript实现的Tween算法及缓冲特效实例代码
本文实例讲述了JavaScript实现的Tween算法及缓冲特效.分享给大家供大家参考,具体如下: 这里演示Tween 算法及缓冲特效的JavaScript代码,利用它可以做缓动.弹簧等很多动画效果,怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果呢,看懂了本代码你就明白了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tween-run-style-codes/ 具体代码如下: <!DOC
-
javascript 缓冲效果 实现代码
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> #divid{width:30px; height:30px;left:200px;top:0px;background:#666;position:absolute;opacity:0.1;filter:alpha(opacity=10);} span{display:block;padding:5px; cursor:pointer;font-size:12px;} //
-
javascript 缓冲效果实现代码 推荐
菜鸟版代码如下: 理解这段代码就基本上掌握了 复制代码 代码如下: function f_s() { var obj = document.getElementById("top"); obj.style.display = "block"; obj.style.height = "1px"; var sw = function () { var s_width = parseInt(obj.style.height); if (s_width
-
JavaScript控制网页平滑滚动到指定元素位置的方法
本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法.分享给大家供大家参考.具体如下: function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; cu
-
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过那一个效果是用jquery实现的<jQuery向上循环滚动(仿新浪微博未登录首页滚动微博显示)>,今天发现这款是js制作的好,不敢独享,希望需要的朋友喜欢哦. 效果图展示如下: 查看演示 源码下载 html代码 <div class="wp"> <ul id="slider" class=&quo
-
javascript 层展开/关闭，带缓冲效果
层展开/关闭 - 运动缓冲效果 /* 函数名称: Scroll Scroll(obj, h, s) 参数说明: obj,[object] id值或对象. 必需 h,[height] 展开后的高度. 可选(默认为200px) s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}. 函数返回值: true 展开(对象的高度等于展开后的高度) false 关闭(对象的高度等于原始高度) */ function Scroll(obj,
-
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码 代码如下