javaScript实现滚动新闻的方法


Posted in Javascript onJuly 30, 2015

本文实例讲述了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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
js 遍历对象的属性的代码
Dec 29 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
js数组去重的hash方法
Dec 22 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
Node.js模块全局安装路径配置方法
May 17 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
vue服务端渲染页面缓存和组件缓存的实例详解
Sep 18 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
javascript中递归函数用法注意点
Jul 30 #Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
Jul 30 #Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 #Javascript
使用js复制链接中的部分文字的方法
Jul 30 #Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 #Javascript
js代码实现随机颜色的小方块
Jul 30 #Javascript
js代码验证手机号码和电话号码是否合法
Jul 30 #Javascript
You might like
PHP 正则表达式常用函数
2014/08/17 PHP
PHP按指定键值对二维数组进行排序的方法
2015/12/22 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
thinkPHP5.0框架安装教程
2017/03/25 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
JavaScript URL参数读取改进版
2009/01/16 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
2011/10/29 Javascript
JavaScript 5 新增 Array 方法实现介绍
2012/02/06 Javascript
JavaScript的事件绑定(方便不支持js的时候)
2013/10/01 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
JS实现超精简的链接列表在固定区域内滚动效果代码
2015/11/04 Javascript
JavaScript函数柯里化详解
2016/04/29 Javascript
JavaScript toUpperCase()方法使用详解
2016/08/26 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
2017/03/03 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
2017/03/27 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
基于layui table返回的值的多级嵌套的解决方法
2019/09/19 Javascript
原生js实现移动小球(碰撞检测)
2020/12/17 Javascript
pycharm 使用心得(九)解决No Python interpreter selected的问题
2014/06/06 Python
Python脚本文件打包成可执行文件的方法
2015/06/02 Python
web.py在SAE中的Session问题解决方法(使用mysql存储)
2015/06/24 Python
Mac在python3环境下安装virtualwrapper遇到的问题及解决方法
2019/07/09 Python
Django CBV与FBV原理及实例详解
2019/08/12 Python
python字典setdefault方法和get方法使用实例
2019/12/25 Python
python中元组的用法整理
2020/06/15 Python
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
生产现场工艺工程师岗位职责
2013/11/28 职场文书
应届电子商务毕业自荐书范文
2014/02/11 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
2016年公司新年寄语
2015/08/17 职场文书
《失物招领》教学反思
2016/02/20 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL
Linux下使用C语言代码搭建一个简单的HTTP服务器
2022/04/13 Servers
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript
Win10 Anaconda安装python-pcl
2022/04/29 Servers