<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. j2ee消息中间件

    http://blog.csdn.net/apanious/article/details/51014396

  2. pycaffe 配置

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50967820 本文将继续接着上一篇博客 ...

  3. 工具-VMWARE技巧-桥接连外网-WIN7

    使用虚拟机wmware如何连接宿主主机 最简单的方法,使用直接连接主机的模式,然后把宿主机的IP更改为和虚拟机同一个网段的机器就行 但是既要上网,有要连接虚拟机,就需要使用桥接,在编辑->虚拟网 ...

  4. Web前端开发实战2：二级下拉式菜单之JS实现

    上一篇博文提到了二级下拉式菜单是用HTML和CSS实现的.我们这一篇来用JavaScript脚本实现下拉菜单的显 示和隐藏. 使用 JavaScript方法实现我们须要用的知识有: 1)JS事件:on ...

  5. Gradle for Android 第三篇( 依赖管理 )

    依赖管理 这会是一个系列,所以如果你还没有看我之前的几篇文章,请先查看以下文章: Gradle for Android 第一篇( 从 Gradle 和 AS 开始 ) Gradle for Andro ...

  6. 2017-3-6 leetcode 118 169 189

    今天什么都没发生 ================================================= leetcode118 https://leetcode.com/problems ...

  7. POJ 3185 DFS

    好像可以用高斯消元??? 但是用搜索写 这题就很水了... // by SiriusRen #include <bitset> #include <cstdio> using ...

  8. UVa512 追踪电子表格中的单元格

    https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. child和childNodes的区别

    child和childNodes区别: childNodes是标准属性, child是非标准属性 childNodes: 获取节点,不同浏览器表现不同 IE 只获取元素节点 非IE 获取元素节点和文本 ...

  10. CentOS 7.1 下载，安装，配置

    CentOS(全称 Community Enterprise Operating System)是 RHEL 源代码再编译的产物. 2014年初,CentOS 宣布加入 Red Hat. CentOS ...