<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. vue-cli3.0 搭建项目

    1.首先我们先在安装好node   node用于npm安装[自行百度] 2.全局安装vue 通过npm命令安装vue.js 在用vue.js在用于构建大型的应用时推荐使用npm安装,npm能很好的和w ...

  2. Oracle-查看用户对象信息

    --视图(可查看拥有者.对象名称.创建时间.上次修改时间) SELECT t.OBJECT_NAME, t.CREATED, t.LAST_DDL_TIME FROM user_objects t o ...

  3. 【转】C# ArcgisEngine开发中，对一个图层进行过滤，只显示符合条件的要素

    有时候,我们要对图层上的地物进行有选择性的显示,以此来满足实际的功能要求. 按下面介绍的方法可轻松实现图层属性过滤显示: 1.当图层已经加载时 private void ShowByFilter(Ax ...

  4. Android开发之使用BroadcastReceiver实现开机自己主动启动（源码分享）

    上一节已经介绍过BroadcastReceiver实现实时监听电量的功能,这节就来介绍一下假设实现开机自己主动启动的功能.这个比监听电量还简单不少 (1)在清单文件注冊权限 <uses-perm ...

  5. HDU 4340

    好题一道啦.做这题时,抓住两个问题:一.给某点染色时,其连通的点是否已有一点以全部代价染色.二.该点染什么颜色. 嗯.第二个问题很容易,但第一个问题不容易了.我一开始就考虑祖父子三层结点的关系,认为在 ...

  6. cocos2D（六）----CCLayer

    一个游戏中能够有非常多个场景,每一个场景里面又可能包括有多个图层,这里的图层一般就是CCLayer对象.CCLayer本身差点儿没什么功能.对照CCNode,CCLayer可用于接收触摸和加速计输入. ...

  7. 精简Linux文件路径

    精简Linux的文件路径: ..回退的功能 .留在当前文件夹 //仅仅保留一个/ abc/..要返回. 报错 删除最后一个/ 主要思路: 用栈记录路径的起始位置,讨论/后的不同情况就可以: #incl ...

  8. Spark SQL Catalyst源代码分析之Analyzer

    /** Spark SQL源代码分析系列文章*/ 前面几篇文章解说了Spark SQL的核心运行流程和Spark SQL的Catalyst框架的Sql Parser是如何接受用户输入sql,经过解析生 ...

  9. asf

    这些日子我一直在写一个实时操作系统内核,已有小成了,等写完我会全部公开,希望能  够为国内IT的发展尽自己一份微薄的力量.最近看到很多学生朋友和我当年一样没有方向  ,所以把我的经历写出来与大家共勉, ...

  10. 蓝桥杯--算法提高 排列数 （简单dfs）

    算法提高 排列数   时间限制:1.0s   内存限制:256.0MB      问题描述 0.1.2三个数字的全排列有六种,按照字母序排列如下: 012.021.102.120.201.210 输入 ...