<!--
作者：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. android 实现ImageView按压效果和解决背景图片拉申问题

    建立一个.XML文件,名为:image_tab_bg.xml <?xml version="1.0" encoding="utf-8"?> < ...

  2. TeamTalk源码分析之login_server

    login_server是TeamTalk的登录服务器,负责分配一个负载较小的MsgServer给客户端使用,按照新版TeamTalk完整部署教程来配置的话,login_server的服务端口就是80 ...

  3. 贪吃蛇（C++实现，VC6.0编译，使用了EasyX图形库）

    程序效果: 代码: //main.cpp 1 #include <iostream> #include<fstream> #include <graphics.h> ...

  4. 对RTMP视频流进行BitmapData.draw()出错的解决办法

    source on github 在对Flash Media Server中的视频流使用BitmapData.draw()进行绘制的时候,会抛出这样异常: cannot access rtmp://x ...

  5. u3d_shader_surface_shader_3

    参考http://my.oschina.net/u/138823/blog/181131 加了个凹凸贴图: 抱歉把女神苏菲做成这样. 一:Normal Texture的制作: 1.首先是Normal ...

  6. 父元素与子元素之间的margin-top问题

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...

  7. ubuntu下解析udt数据包

    udt是通过udp进行端到端可靠传输的一个协议,有其默认拥塞控制算法. 之前ubuntu下wireshark的版本是1.10,不能直接解析udt数据包[1],升级到最新的2.0.0即可过滤udt数据包 ...

  8. 改变图片的颜色,UIImage改变颜色

    定义 #import <UIKit/UIKit.h> @interface UIImage (ChangeImageColor) /** * 改变图片的颜色 * * @param tint ...

  9. viewTemplate

    今天发现maya的属性编辑器界面似乎可以用xml来写,放在 /文档/maya/20xx/prefs这样的地方 发现一个很牛的maya插件SOuP,其中把一些近年论文的算法也集成进去了,网站在这里: h ...

  10. WEBAPI 怎么保证安全

    先记录下   客户端登陆,服务端验证然后生成session,客户端每次调用接口的时候都把session带过去.服务端路由请求的时候都去验证session. 另外一种app的做法是,参数+用户名密码做s ...