<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. Python中图像的缩放 resize（）函数的应用

    cv2.resize(src, dsize[, dst[, fx[, fy[, interpolation]]]]) -> dst 参数说明: src - 原图 dst - 目标图像.当参数ds ...

  2. xml00

    <?xml verson="1.0" encoding="ISO-8859-1"?> xml声明<note> <to>jon ...

  3. 这个过人真是NB

  4. 【翻译自mos文章】 在错误的从os级别remove掉 trace file 之后，怎么找到该trace file的内容？

    在错误的从os级别remove掉 trace file 之后,怎么找到该trace file的内容? 參考原文: How to Find the Content of Trace File Gener ...

  5. nyist oj 115 城市平乱 (最短路径）

    城市平乱 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描写叙述 南将军统领着N个部队.这N个部队分别驻扎在N个不同的城市. 他在用这N个部队维护着M个城市的治安.这M个城市 ...

  6. android:QQ多种側滑菜单的实现

    在这篇文章中写了 自己定义HorizontalScrollView实现qq側滑菜单 然而这个菜单效果仅仅是普通的側拉效果 我们还能够实现抽屉式側滑菜单 就像这样 第一种效果 另外一种效果 第三种效果 ...

  7. DNS隧道之DNS2TCP实现——dns2tcpc必须带server IP才可以，此外ssh可以穿过墙的，设置代理上网

    我自己的命令: server端: dns2tcpd -F -d 1 -f ./dns2tcpd.conf 输出: 09:08:59 : Debug options.c:97 Add resource ...

  8. windows bat更改系统时间 & 同步internet时间

    最近刚好用到一款软件学习版,30天试用期满,但是还想继续用,不具体透露是什么软件了. 发现更改了系统时间后,这个软件就又能启动了,不过每次改来改去很麻烦,就写了段脚本 @echo off date 1 ...

  9. 32.QT绘图

    widget.h #ifndef WIDGET_H #define WIDGET_H #include <QWidget> #include <QPainter> #inclu ...

  10. ROS集成开发环境RoboWare Studio安装教程

    前言:很多人说vim是最快的,所以我选择用roboware. ROS 自带的编辑器vim增加插件,效果如下: RoboWare Studio,效果如下: 下面开始安装. 一.安装 去官网 http:/ ...