<!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. 使用Matrix控制图像或组件变换的步骤

    1.获取Matrix对象,该Matrix对象既可新创建,也可直接获取其他对象内封装的Matrix(例如Transformation对象内部) 2.调用Matrix的方法进行平移.旋转.缩放.倾斜等. ...

  2. [示例]NSDictionary编程题-字典的排序应用(iOS7班)

    代码: #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepo ...

  3. 铁人系列 （1） uva 10385

    uva  10385 列出n-1个一元方程,对应成单峰函数,所以用三分求解即可. #include <cstdio> #include <cstring> #include & ...

  4. 可伸缩的textview。

    在一些应用中,比如腾讯的应用市场APP应用宝,关于某款应用的介绍文字,如果介绍文字过长,那么不是全部展现出来,而是显示三四行的开始部分(摘要),预知全部的内容,用户点击展开按钮即可查阅全部内容. 这样 ...

  5. static详解

    static关键字用来修饰属性.方法,称这些属性.方法为静态属性.静态方法. static关键字声明一个属性或方法是和类相关的,而不是和类的某个特定的实例相关,因此,这类属性或方法也称为“类属性”或“ ...

  6. windows系统常见端口和木马默认使用端口

    dos命令netstat比较好用,能比较全的看到自己开放的端口及状态一般我用netstat -a端口:0服务:Reserved说明:通常用于分析操作系统.这一方法能够工作是因为在一些系统中“0”是无效 ...

  7. g++默认支持c++11标准的办法

    //第一种,直接包含在源程序文件中,如第一行代码所示 #pragma GCC diagnostic error "-std=c++11" #include <iostream ...

  8. 二模 （8） day2

    第一题: 题目描述: 有 n 个炸弹,有些炸弹牵了一根单向引线(也就是说引线只有在这一端能被炸弹点燃),只要引爆了这个炸弹,用引线连接的下一个炸弹也会爆炸.每个炸弹还有个得分,当这个炸弹被引爆后就能得 ...

  9. Ibatis.Net各类的作用说明(三)

    一.SqlMapper类 Ibatis中,加载.分析配置以及映射文件是在创建SqlMapper实例的时候进行的,另外对数据库的操作,也是在SqlMapper实例上调用方法来完成.在IBatis外部的程 ...

  10. ToolBar+DrawerLayout + NavigationView

    http://www.jianshu.com/p/9471b87f2c61 很好的博客可以瞅瞅 <android.support.design.widget.NavigationView and ...