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 相关文章推荐
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
js中关于new Object时传参的一些细节分析
Mar 13 Javascript
jQuery新闻滚动插件 jquery.roller.js
Jun 27 Javascript
chrome原生方法之数组
Nov 30 Javascript
getAsDataURL在Firefox7.0下无法预览本地图片的解决方法
Nov 15 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
chrome浏览器如何断点调试异步加载的JS
Sep 05 Javascript
vue2.0 自定义日期时间过滤器
Jun 07 Javascript
React-Native之定时器Timer的实现代码
Oct 04 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
Oct 31 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 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中HTTP方式下的Gzip压缩传输方法举偶
2007/02/15 PHP
php设计模式 Visitor 访问者模式
2011/06/28 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
php时间计算相关问题小结
2016/05/09 PHP
PHP设计模式之原型模式定义与用法详解
2018/04/03 PHP
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
myFocus slide3D v1.1.0 使用方法与下载
2011/01/12 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
showModalDialog在谷歌浏览器下会返回Null的解决方法
2013/11/27 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
通过JS判断联网类型和连接状态的实现代码
2015/04/01 Javascript
浅谈JavaScript的Polymer框架中的事件绑定
2015/07/29 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
jquery与js实现全选功能的区别
2017/06/11 jQuery
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
详解使用jest对vue项目进行单元测试
2018/09/07 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
用python 制作图片转pdf工具
2015/01/30 Python
Python 转换RGB颜色值的示例代码
2019/10/13 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
pycharm远程连接服务器并配置python interpreter的方法
2020/12/23 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
Marriott中国:万豪国际酒店查询预订
2016/09/02 全球购物
为什么要使用servlet
2016/01/17 面试题
材料专业毕业生求职信
2014/02/26 职场文书
校园活动宣传方案
2014/03/28 职场文书
学校献爱心活动总结
2014/07/08 职场文书
职工擅自离岗检讨书
2014/09/23 职场文书
教师反邪教心得体会
2016/01/15 职场文书