<!--
作者：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. ubuntu14.04下的NVIDIA Tesla K80显卡驱动的安装教程

    搞深度学习如何能够不与浑身是“核”的显卡打交道呢? 人工智能的兴起除了数据量的大量提升,算法的不断改进,计算能力的逐步提高,还离不开软件基础设施的逐步完善.当下的主流的深度学习工具软件无论是Caffe ...

  2. 创建Windows Azure内部负载均衡器

    与普通的负载均衡器一样,Windows Azure内部负载均衡器也是四层的.内部负载均衡器会被分配一个内网地址,只能从虚拟网络内部访问,包括VPN和ExpressRoute. 内部负载均衡器通常被用于 ...

  3. ZooKeeper开发手册中文翻译（转）

    本文Github地址:https://github.com/sundiontheway/zookeeper-guide-cn 本文假设你已经具有一定分布式计算的基础知识.你将在第一部分看到以下内容: ...

  4. JAVA设计模式之工厂模式

    工厂模式概念: 实例化对象,用工厂方法代替new操作 工厂模式包括工厂方法模式和抽象工厂模式 抽象工厂模式是工厂方法模式的扩展 工厂模式的意图: 定义一个接口来创建对象,但是让子类来决定哪些类需要被实 ...

  5. Windows 常用 CMD 命令行介绍

    看下面的链接: http://www.jianshu.com/p/76ff5d16f113

  6. 05章项目: QuickHit快速击键

    一.项目分析 根据输入速率和正确率将玩家分为不同等级,级别越高,一次显示的字符数越多,玩家正确输入一次的得分也越高.如果玩家在规定时间内完成规定次数的输入,正确率达到规定要求,则玩家升级.玩家最高级别 ...

  7. [No00003B]string格式的日期时间字符串转为DateTime类型

    新建console程序,复制粘贴直接运行: /**/ //using System.Globalization;//代码测试大致时间2015/11/3 15:09:05 //方法一:Convert.T ...

  8. Y2161 Hibernate第三次考试 2016年8月18日 试卷分析

  9. java 关于多线程高并发方面

    转有关的文章链接: Java 高并发一:前言: http://www.jb51.net/article/92358.htm Java 高并发二:多线程基础详细介绍 http://www.jb51.ne ...

  10. PHP核心技术与最佳实践--笔记

    <?php error_reporting(E_ALL); /* php 5.3引入 延迟静态绑定 */ /* php5.4引入trait,用来实现多层继承 trait Hello{} trai ...