<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title></title>

 <meta name="description" content="">

 <meta name="keywords" content="">

 <style>

 *{margin:0;padding:0}

 #slide{position:absolute;height:300px;width:260px;color:#FA8E93;overflow:hidden;border:1px solid #ccc}

 #slide p{height:34px;line-height:34px;overflow:hidden}

 #slide span{float:right}

 </style>

 </head>

 <body>

 <div id="slide">

     <div id="slide1">

         <p><span>领取了烈焰双11礼包</span>1、dqx5***</p>

         <p><span>领取了烈焰双11礼包</span>2、s376***</p>

         <p><span>领取了街机三国双11礼包</span>3、sdk1***</p>

         <p><span>领取了烈火战神双11礼包</span>4、说好〃不沋伤</p>

         <p><span>领取了街机三国双11礼包</span>5、说好〃不沋伤</p>

         <p><span>领取了烈焰双11礼包</span>6、gao6***</p>

         <p><span>领取了街机三国双11礼包</span>7、ando***</p>

         <p><span>领取了街机三国双11礼包</span>8、6813***</p>

         <p><span>领取了烈焰双11礼包</span>9、lais***</p>

     </div>

     <div id=slide2></div>

 </div>

 <script>

     var speed=40

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

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

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

     slide2.innerHTML=slide1.innerHTML

     function Marquee(){

         if(slide2.offsetTop-slide.scrollTop<=0)

             slide.scrollTop-=slide1.offsetHeight

         else{

             slide.scrollTop++

         }

     }

     var MyMar=setInterval(Marquee,speed)

     slide.onmouseover=function(){clearInterval(MyMar)}

     slide.onmouseout=function(){MyMar=setInterval(Marquee,speed)}

 </script>

 </body>

 </html>

js实现上下无缝滚动效果，代码很简洁。不过css样式上有个需要注意的地方，#slide{position:absolute}。测试发现如果盒子#slide上面还有很多内容的话，滚动效果只会持续一次，不会连续。盒子#slide加上样式position:absolute即可解决。

js实现简单易用的上下无缝滚动效果的更多相关文章

  1. liMarquee演示12种不同的无缝滚动效果

    很实用的一款liMarquee演示12种不同的无缝滚动效果 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="zh-CN"&g ...

  2. 信息无缝滚动效果marquee

    横向滚动.纵向滚动 1. 解决滚动的空白 向左向右滚动的话,可以根据父级定位left,每次加或者减可以使物体向左或右运动,用top也可以实现向上或向下运动 上下滚动实现无缝滚动1. innerHTML ...

  3. 应用JavaScript搭建一个简易页面图片无缝滚动效果

    页面图片无缝滚动JavaScript原理:移动的区块包含图片内容,区块相对父级元素进行定位脱离文档流.再令区块的left值每隔固定的时间进行等量减少(或增大)从而实现区块的匀速运动.由于每次间隔移动的 ...

  4. js 无缝滚动效果学习

    <!DOCTYPE html> <html> <head> <title>无缝滚动测试</title> <meta http-equi ...

  5. 用js实现图片的无缝滚动效果

    实现图片的无缝滚动就是要让你的图片集在一定时间里自动切换,那就需要js里的定时器来控制时间. js中关于定时器的方法有两种:setTimeout和setInterval.它们接收的参数是一样的,第一个 ...

  6. jQery无缝滚动效果

    思路: 赋值所有li,添加到ul末尾,重新计算ul宽度 每次移动一个固定的值,当超出一半时,将ul拉回原位 以下代码 <!DOCTYPE html> <html> <he ...

  7. javascript小例子：實現四方向文本无缝滚动效果

    实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class= ...

  8. jq封装-无缝滚动效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

随机推荐

  1. html标签marquee实现走马灯效果（文字浮动）

    marquee标签实现文字或图片的移动效果 <marquee direction = "right">文字<marquee>

  2. 一个socket发送调试信息的类

    using UnityEngine; using System.Collections; using System; using System.Net.Sockets; using System.Ne ...

  3. HDU 1394 树状数组求逆序对

    Minimum Inversion Number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java ...

  4. 在oracle中使用Trigger

    1.初始目标 在对表h1插入一条数据时,同时插入一条重复的数据(只有主键不同) 2.在PL/SQL里New一个Trigger或者手动敲入代码 先说明一下,表h1包括4列ID.C1.C2.C3 crea ...

  5. 倍增 LCA

    以NOIP2013提高组day1 最后一道题为例来学的倍增和lca.其实这套题早就做过了,倍增和lca也学过,只不过当时没有理解清楚,所以今天再次学了一遍,虽然没有时间编程序了,但是先把思路和做法在这 ...

  6. Failed to instantiate the default view controller for UIMainStoryboardFile 'Main'

    给UITableViewController 展示数据时候 删除系统自带viewController 然后拖过来一个UITableViewController 指定class后没有指定main入口 报 ...

  7. 百胜集团李磊：BPM实现业务流程全过程无缝链接

    作为全球最大的餐饮企业之一,百胜集团在形成规模化连锁经营效应的同时,战略地利用信息化手段,强化管理和运营水平,打造企业的核心竞争力.通过流程梳理,百胜集团实现了以规模化.规范化.信息化和现代化为主题的 ...

  8. VMWare Workstation 10.0 Preview CN

    What's New in the VMware Workstation Technology Preview July 2013 The VMware Workstation team is exc ...

  9. java基础－007

    41.Servlet Servlet 是处理客户端请求并产生动态网页内容的Java类．Servlet主要是用来处理或者存储HTML表单提交的数据,产生动态内容,在无状态的HTTP协议下管理状态信息．所 ...

  10. Oracle GoldenGate 12c中的协同交付（Coordinated Delivery）

    OGG 12c中,并行交付有2种模式:集成交付.协同交付.不过集成交付只能针对目标端是oracle数据库(有版本要求)使用,而协同交付则可以在非oracle数据库上使用. 先来看2个问题, l 为什么 ...