<!--
作者：chenyehuacecil@163.com
时间：2015-02-04
描述：实现整篇文章从下到上的无缝连接滚动
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无缝垂直文章图片滚动</title>
</head>
<body>
<div id=demo style=overflow:hidden;height:100;width:180;>
<div id=demo1>

<p class="article" onclick="javascript:window.open(this.src);">
2015年2月3日，北京胡润研究院发布《2015星河湾胡润全球富豪榜》。上榜富豪的财富计算截止日期为2015年1月17日。这是胡润研究院连续第四年发布“全球富豪榜”。
《2015星河湾胡润全球富豪榜》共计来自68个国家的2089位十亿美金富豪上榜，比去年增加222人，达历年最高。649位财富比去年增长。341位新上榜者。230位财富与去年保持不变。869位财富缩水。去年上榜的95位富豪今年跌出了榜单。尽管上榜人数增加了222人，上榜富豪的总财富比去年下降1.5%，为41万亿人民币，但仍超过日本和韩国的GDP总和。上榜富豪的平均年龄为64岁，与去年相同[2] 。
2015年，胡润研究院采取计分的形式来划分富豪们财富继承或是白手起家的等级。从1级到5级，1级表示完全继承家族财富，自身并未积极参与，5级表示在没有父母帮助下白手起家。白手起家的4级和5级中，25%是女性。1级中，72%都是女性。2级中的大多数中国人都来自香港。69%的上榜富豪都是白手起家，另外19%大体上也是白手起家，他们继承小企业，并将其发展壮大。在31%的继承财富的上榜富豪中，82位(4%)是富过三代的，这82位来自52家公司。
</p>
</div>
<div id=demo2></div>
</div>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>

关于图像文章垂直无缝连接滚动——JS实现的更多相关文章

  1. jquery垂直公告滚动实现代码

    公告滚动想必大家都有见到过吧,实现方法也有很多,下面为大家介绍使用jquery实现垂直公告滚动,感兴趣的朋友不要错过 复制代码代码如下: <!DOCTYPE html PUBLIC " ...

  2. 利用自定义动画 animate() 方法，实现某图书网站中“近 7 日畅销榜”中的图书无缝垂直向上滚动特效:当光标移入到图书上时，停止滚动，鼠标移开时，继续滚动

    查看本章节 查看作业目录 需求说明: 利用自定义动画 animate() 方法,实现某图书网站中"近 7 日畅销榜"中的图书无缝垂直向上滚动特效:当光标移入到图书上时,停止滚动,鼠 ...

  3. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

  4. 禁止uiscrollview垂直方向滚动，只允许水平方向滚动；或只允许垂直方向滚动

    禁止UIScrollView垂直方向滚动,只允许水平方向滚动 scrollview.contentSize =  CGSizeMake(你要的长度, 0); 禁止UIScrollView水平方向滚动, ...

  5. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. 不间断图片滚动JS

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-05-07) MSClass是一款通用不间断滚动JS封装类,几乎支持目前所有流行风格的图片或文字滚动,横向/竖向/连续/间断 ...

  7. JS表单内容垂直循环滚动

    参考博客:https://blog.csdn.net/yubo_725/article/details/52839493  大佬是真的厉害,保存一下,以方便后续使用 效果: 源码: <!DOCT ...

  8. 图片滚动js 实现图片无缝滚动

    在改章节中,我们主要介绍图片滚动的内容,自我感觉有个不错的建议和大家分享下 非常平滑的JS图片滚动特效代码,无缝循环,速度可自定义,鼠标悬停时停止.它的特点是JS和图片地址分离,这样做你就经易的从数据 ...

  9. php无缝连接滚动

    最近用到了,仿照别人的写了一个 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

随机推荐

  1. 用php生成静态html页面(通用2种方法)

    因为每次用户点击动态链接的时候都会对服务器发送数据查询的要求 对于一个访问量可能达百万千万级别的网站来说 这无疑是服务器一个大大的负担 所以把动态数据转换成静态html页面就成了节省人力物力的首选 因 ...

  2. Eclipse 无线调试（利用ADB工具）

    首先:1.你的手机必髯要有ROOT权限才可以安装ADB工具:2.手机开启WLAN(WIFI): (1)安装ADB工具: (2)添加环境变量PATHA;(我的是ADB路径是:D:\adt-bundle- ...

  3. 配置nginx好了，html能打开，index.php打不开？

    启动这2个  #service nginx restart  # service php-fpm restart

  4. ubuntu 安装配置jdk+eclipse+android sdk

    共5步: 1.安装jdk 2.安装eclipse 3.安装android-sdk 4.安装adb 5.在eclipse中安装ADT 1.安装jdk 之前已经安装好了. 用下面的命令安装,只需一些时间, ...

  5. 【原创Android游戏】NinOne V2.3.1 --加载模式的学习，界面的重新设计

    上次更新后又发现了一些bug,而且是非常明显的bug,一一加以改正了过来. 猜数字游戏的功能已基本实现,不过我觉得一个应用单做一个游戏有点不太过瘾,略显单调,于是我打算基于这个,写一个n合1的游戏集成 ...

  6. JAVA单例

    单例模式: 1 public class Person{ 2 public static Person per//定义一个静态变量,用来储存当前类的对象 3 private Person()//构造方 ...

  7. 【Unity3d】Ray射线初探-射线的原理及用法

    http://www.xiaobao1993.com/231.html 射线是一个无穷的线,开始于origin并沿着direction方向. 当射线碰到物体后.它就会停止发射. 在屏幕中拉一个CUBE ...

  8. linux下截取给定路径中的目录部分

    在日常运维中,有时会要求截取一个路径中的目录部分.截取目录的方法,有以下两种:1)dirname命令(最常用的方法):用于取给定路径的目录部分.很少直接在shell命令行中使用,一般把它用在shell ...

  9. linux下sendmail邮件系统安装操作记录

    电子邮件系统的组成:1)邮件用户代理(Mail User Agent , MUA),MUA是一个邮件系统的客户端程序,它提供了阅读,发送和接受电子邮件的用户接口. 最常用的 MUA 有: linux ...

  10. Delphi项目的构成

    Hello.cfg 項目配置文件 Hello.dof 項目選項文件 Hello.dpr 項目文件 Hello.exe 應用程序 Hello.res 資源文件 HelloWorld.dcu 窗口編譯文件 ...