<html>
<head>
<title>scrollTop实现图像循环滚动（实例1）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body{margin:0px 0px 0px 0px}
</style>
</head>
<body>
<div id="container" style="height:75px; width:480px; overflow:hidden ;border:1px red solid;margin-bottom:0px;margin-top:0px">
<div id="banner1" style="height:75px;border:0px blue dotted;margin-bottom:0px;margin-top:0px;">
<div align="center" style="border:0px;margin-bottom:0px;line-height:75px">
<img src="data:images/001.png" border=0 />
<img src="data:images/002.gif" border=0 />
<img src="data:images/003.png" border=0 />
<img src="data:images/004.png" border=0 />
<img src="data:images/005.png" border=0 />
<img src="data:images/006.png" border=0 />
</div>
</div>
<div id="banner2" style="height:75px;border:0px green dotted;margin-bottom:0px;margin-top:0px"></div>
</div>
<script>
var scrollSpeed=50;
banner2.innerHTML=banner1.innerHTML;
function myMarquees(){
//向上循环滚动
if(banner2.offsetTop-container.scrollTop<=0)
{
document.getElementById("showresult").value='banner2.offsetTop='+banner2.offsetTop+" container.scrollTop="+container.scrollTop;
container.scrollTop-=banner1.offsetHeight; //清零，重新开始
}
else{
document.getElementById("showresult").value='banner2.offsetTop='+banner2.offsetTop+" container.scrollTop="+container.scrollTop;
container.scrollTop++; //相当于将demo容器的垂直滚动条滑块向下滚动
}

}
var mqs=setInterval(myMarquees,scrollSpeed)
container.onmouseover=function() { clearInterval(mqs) }
container.onmouseout=function() { mqs=setInterval(myMarquees,scrollSpeed) }

</script>

<textarea id="showresult" style="width:300px"></textarea>

</body>
</html>

scrollTop实现图像循环滚动（实例1）的更多相关文章

  1. JS实例——间歇循环滚动

    间歇滚动:滚动一行后,延迟2秒后继续滚动 具体实现代码如下: <!doctype html> <html lang="en"> <head> & ...

  2. ul 仿 table 循环滚动

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

  3. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  4. JavaScript学习笔记——简单无缝循环滚动展示图片的实现

    今天做了一个简单的无缝循环滚动的实例,这种实例在网页中其实还挺常见的,下面分享一下我的学习收获. 首先,无缝滚动的第一个重点就是——动.关于怎么让页面的元素节点动起来,这就得学明白关于JavaScri ...

  5. NGUI实现的一套不同大小 Item 的循环滚动代码

    测试: 数据 & Item  的 Ctrl : using UnityEngine; public class ScrollViewItemData { public int index; p ...

  6. IOS实现自动循环滚动广告--ScrollView的优化和封装

    一.问题分析 在许多App中,我们都会见到循环滚动的视图,比如广告,其实想实现这个功能并不难,用ScrollView就可以轻松完成,但是在制作的过程中还存在几个小问题,如果能够正确的处理好这些小问题, ...

  7. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  8. marquee 实现首尾相连循环滚动效果

    <marquee></marquee>可以实现多种滚动效果,无需js控制.使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等  marquee标签不是HTML3.2 ...

  9. Expression Blend4经验分享：文字公告无缝循环滚动效果

    这次分享一个类似新闻公告板的无缝循环滚动效果,相信很多项目都会应用到这个效果.之前我也百度了一下,网上的一些Silverlight的文字或图片滚动效果,都是一次性滚动的,如果要做到无缝循环滚动,多数要 ...

随机推荐

  1. Angular 4 管道

    一.date管道 1.html 2. 控制器中的定义brithday 3.效果图 如果时间格式 为: 我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}} 则效 ...

  2. 关于h5屏幕适配

    1)使用rem进行等比缩放 rem作用于非根元素时,相对于根元素字体大小:rem作用于根元素字体大小时,相对于其出初始字体大小 比如根元素(html)设置font-size=12px; 非根元素设置w ...

  3. 【python】class之类属性

    class Foo(object): x=1.5 foo=Foo() print foo.x#通过实例访问类属性 >>>1.5 print Foo.x #通过类访问类属性 >& ...

  4. 如何在ASP.NET页面中使用异步任务(PageAsyncTask)

    在页面加载期间,可能有些操作是要比较耗用时间的(例如调用外部资源,要长时间等待其返回),正常情况下,这个操作将一直占用线程.而大家知道,ASP.NET在服务端线程池中的线程数是有限的,如果一直占用的话 ...

  5. debian之apt源

    美国的 deb http://ftp.us.debian.org/debian stable main contrib non-freedeb-src http://ftp.us.debian.org ...

  6. Excel 公式CORREL算出相关系数

    当对 N 个主体中的每一个变量进行观测时,CORREL 工作表函数可计算两个测量变量之间的相关系数.(缺少任何主体的观测值将导致该主体在分析中被忽略.)当 N 个主体中的每一个均具备两个以上的测量变量 ...

  7. unbound域名解析

    安装unbound服务 # yum install unbound -y 开启服务 linux系统如何查看命令属于哪一个安装包 # yum provides */netstat 安装netstat命令 ...

  8. 搭建OpenStack先电云平台

    实际操作示意图 在VMware里面创建两台centos7的虚拟机作为搭建云平台的两节点配置如下: 1.第一台虚拟机   作为控制节点 2CPU 3G以上内存 硬盘50G 网络适配器一个nat 一个仅主 ...

  9. innerHTML与jquery里的html()区别介绍

    我原本一直以为innerHTML和jquery里的html其实是完全一样的,jquery是多此一举了,直到我遇到一次问题   看个示例: 复制代码 代码如下: var tbody=document.c ...

  10. BPM与ESB

    BPM:业务流程管理  --监控处理流程的轨迹以及处理过程 开源:JBPM 场景: 1.单一系统的协同工作比如审批流程,请假流程 2.多个系统的集成,复用各个子系统,构建新的处理流程(流程的优化与流程 ...