<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. spring bean的作用域和自动装配

    1 Bean的作用域 l  singleton单列:整个容器中只有一个对象实例,每次去访问都是访问同一个对象  默认是单列 l  prototype原型: 每次获取bean都产生一个新的对象,比如Ac ...

  2. 如何使用GUID类

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  3. IOS-2-C语言和Objective-C语言衔接学习资料

    前言:在IOS学习中.通常会先学习一周的C语言,两周的Objective-C语言,这是今后开发的最基础最重要的部分,以下给大家分享一下培训课上的精简资料: C语言和Objective-C语言衔接学习资 ...

  4. 关于server和虚拟主机的差别

    文章都是先由本人个人博客,孙占兴:www.teilim.com,先更新,随后CSDN博客才会更新.掌握第一动态请关注本人主站. 原文链接:http://www.teilim.com/guan-yu-y ...

  5. hdoj--2098--分拆素数和（枚举）

    分拆素数和 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  6. [AHOI 2009] 同类分布

    [题目链接] https://www.lydsy.com/JudgeOnline/problem.php?id=1799 [算法] 数位DP [代码] #include<bits/stdc++. ...

  7. c++ set_union set_intersection使用

    自定义类型也可以构造set,但同样必须定义“小于”运算符,set中的元素从小到大排列好了 #include<iostream>#include<string>#include ...

  8. Spark基本运行流程

    不多说,直接上干货! Spark基本运行流程 Application program的组成 Job : 包含多个Task 组成的并行计算,跟Spark action对应. Stage : Job 的调 ...

  9. Eclipse键盘输出文字，显示到屏幕上方法

    方法1 /*标准的思路: * 分析: * 1.来源 * 键盘:System.in * 2.目的地 * 屏幕:System.out * 文件:FIle * 3.分别分析:源,目的地流的类型(字符,字节) ...

  10. SecurityManager USE

    import java.io.DataInputStream; import java.io.File; import java.io.FileInputStream; import java.io. ...