<!--
作者：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. Linux 解压缩命令

    gzip 文件 压缩文件 gzip -d 文件 解压文件 zcat  查看以结尾为zip 文件 bzip2 压缩文件 bzip2 -d 文件 解压文件 bzcat 查看以结尾为zip2 文件 zip ...

  2. sshpass批量执行操作

    while read line do ./sshpass -p 密码 ssh root@$line “ls” done<./backup while read line ;do /usr/bin ...

  3. OpenXml入门---word里面插入图片

    下面介绍如何在word里面插入图片,顺便小弟发现MSDN官网有完整的OpenXML教程,虽然是全英文的不过还是很有帮助的. Tips,原来摘抄代码里面没有模板,在copy过来发现插入word中的图片大 ...

  4. 【2016-10-15】【坚持学习】【Day6】【组合模式】

    哈哈,今天偷懒了,在晚上只看了一个组合模式. 例子: 树结构,有一些是树节点,一些是叶子节点. 比如,文件夹树结构,一个是文件夹节点,一个是文件节点,虽然都是树的节点,但是具体的业务肯定是区别的. 代 ...

  5. 拓扑排序 POJ2367Genealogical tree[topo-sort]

    ---恢复内容开始--- Genealogical tree Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4875   A ...

  6. NOIP2003神经网络[BFS]

    题目背景 人工神经网络(Artificial Neural Network)是一种新兴的具有自我学习能力的计算系统,在模式识别.函数逼近及贷款风险评估等诸多领域有广泛的应用.对神经网络的研究一直是当今 ...

  7. oracl中的集合操作符

    1:union(并集)     union连接两条sql语句,并且去除两条sql语句重复的记录 2.union all(并集) 接两句sql语句,两句sql语句的和不用去掉重复的记录. 3:inter ...

  8. 关于oracle with as用法

    with as语法–针对一个别名with tmp as (select * from tb_name) –针对多个别名with   tmp as (select * from tb_name),   ...

  9. NPM 如何升级？

  10. mysql表名忽略大小写问题记录

    问题描述:一开发同事在linux下调一个程序老是报错说找不到表,但是登陆mysql,show tables查看明明是已经创建了这张表的!!如下: mysql> show tables; +--- ...