<html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>test</title>

 <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

 <style type="text/css">

 *{

     padding:0;

     margin:0;

     border:none;

 }

 #news{

     width:300px;

     height:100px;

     margin:20px auto;

     background-color:rgb(236, 231, 159);

     border:#039 solid 1px;

     overflow:hidden;/*这里必须设置哦，否则滚动会消失的，如果设置为scroll，更容易明白原理*/

 }

 #news li{

     line-height:30px;

 }

 </style>

 </head>

 <body>

 <div id="news" onmouseover="tz()" onmouseout="ks()">

 <ul id="p1">

 <li><a href="">1这是测试新闻滚动效果</a></li>

 <li><a href="">2这是测试新闻滚动效果</a></li>

 <li><a href="">3这是测试新闻滚动效果</a></li>

 <li><a href="">4这是测试新闻滚动效果</a></li>

 <li><a href="">5这是测试新闻滚动效果</a></li>

 <li><a href="">6这是测试新闻滚动效果</a></li>

 <li><a href="">7这是测试新闻滚动效果</a></li>

 <li><a href="">8这是测试新闻滚动效果</a></li>

 </ul>

 <ul id="p2">

 </ul>

 </div>

 <script type="text/javascript">

 var n=document.getElementById("news");

 var p1=document.getElementById("p1");

 var p2=document.getElementById("p2");

 p2.innerHTML=p1.innerHTML;

 //alert(n.offsetHeight+" 1  "+p1.offsetHeight);

 var f=function(){

     n.scrollTop++;

     if(n.scrollTop>=p1.offsetHeight){

         //alert(n.scrollTop+" 1  "+p1.offsetHeight);

         n.scrollTop=0;

     }

 }

 var i=setInterval(f,20);

 var tz=function(){

     clearInterval(i);

 }

 var ks=function(){

     i=setInterval(f,20);

 }

 </script>

 </body>

 </html>

请注意：有jQuery的封装函数

知识点：

js实现新闻滚动实例的更多相关文章

  1. js实现新闻滚动-单行滚动或者多行滚动

    注明:都是转载. 先说单行滚动: --------直接复制以下代码即可试验 转载http://www.3lian.com/edu/2011/06-30/4986.html----------- < ...

  2. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  3. JS平滑无缝滚动实现———实现首页广告自动滚动效果（附实例）

    本文我们实现纯JS方式的滚动广告效果. 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. borde ...

  4. 微信小程序调用后台接口+热点新闻滚动展示

    1.微信JS文件,发送请求调用:  //将返回接口数据,写入Page({data})里面 //获取热点新闻,这个也是写在onload:function(){//code)里面的 wx.request( ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. WOW.js – 在页面滚动时展现动感的元素动画效果

    在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感.WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格.延迟.长度.偏移和迭代等 ...

  7. 使用JavaScript实现新闻滚动效果

    最近要实现一个滚动新闻效果,在网上查了一些资料,发现基本的实现方法有两种: 使用Marquee标签.这个标签的使用我已经转载了一篇比较详细的文章,这个标签的优点是便于使用,缺点是人们已经逐渐不适用它了 ...

  8. js文字向上滚动代码

    js文字向上滚动代码 <style>.pczt_pingfen_jhxs_news1{ width:397px;  background:#edfafd; padding-top:2px; ...

  9. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

随机推荐

  1. C 语言预编译 #if #else

    这个方法我一般用来调试的时候用,有时候串口打印信息太多,一条条注释就很麻烦,于是就用这种方法,定义个宏变量,判断宏变量的条件,来达到改变宏变量的值控制那些代码编译,那些不编译的目的,这样就不用一条条代 ...

  2. JavaScript(DOM编程一)

    在什么位置编写js代码 一般把js代码写在window.onload方法中 执行该方法时页面已经加载完毕,可以获取到所有的dom元素 --------------------------------- ...

  3. rails new app的时候设置skip-bundle

    rails new app的时候设置skip-bundle rails new app --skip-bundle 这样可以越过bundle install阶段:

  4. 关于synchronized与volatile的一点认识

    贪婪是一种原罪,不要再追求性能的路上离正确越来越远. 内存模型 java内存模型 pageId=27903261#%E5%85%B3%E4%BA%8Esynchronized%E4%B8%8Evola ...

  5. Codeforces Round #260 (Div. 1)——Civilization

    题目链接 题意: n个点,m条边的森林.q次操作. 每次操作:1.询问x所在树的直径 2.合并x和y所在的树,使得合并后的直径最小 ) 分析: 没有读到图是森林.. .做的好纠结 最開始将每一个树都求 ...

  6. UESTC--1265--宝贵资源（简单数学）

    宝贵资源 Time Limit: 1000MS   Memory Limit: 65535KB   64bit IO Format: %lld & %llu Submit Status Des ...

  7. hdoj--5532--Almost Sorted Array(正反LIS)

    Almost Sorted Array Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 262144/262144 K (Java/Ot ...

  8. Java-MyBatis：MyBatis 3 | SQL 语句构建器类

    ylbtech-Java-MyBatis:MyBatis 3 | SQL 语句构建器类 1.返回顶部 1. SQL语句构建器类 问题 Java程序员面对的最痛苦的事情之一就是在Java代码中嵌入SQL ...

  9. roboware-studio 使用教程

    一.创建工作区 1.1 新建工作区 1.2 选择路径并添加工作区的名字 catkin_ws 二.创建程序包 创建ROS包并添加依赖 my_package roscpp std_msgs 三.添加并编写 ...

  10. WPF动态控件生成查找不到问题

    2012 08 10 遇到此类问题,已经找到解决方案 记录以备后用   动态往界面添加控件 在页面未显示的情况时,虽然对控件增加了id name等属性但是使用 TextBox txtOtherNati ...