<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. MySQL性能指标及计算方法(go)

    绝大多数MySQL性能指标可以通过以下两种方式获取: (1)mysqladmin 使用mysqladmin extended-status命令获得的MySQL的性能指标,默认为累计值.如果想了解当前状 ...

  2. 启动ECLIPSE时，提示找到不 eclipse\jre\bin\javaw.exe

    原因:在PATH中未配置 jre\bin目录 %JAVA_HOME%\jre\bin - 无论是用:D:\Asoft\Java\jdk1.7.0_45\jre\bin 还是:D:\Asoft\Java ...

  3. SpringBoot中实现依赖注入功能

    本文转载自:https://blog.csdn.net/linzhiqiang0316/article/details/52639888 今天给大家介绍一下SpringBoot中是如何实现依赖注入的功 ...

  4. 【Spring学习笔记-5】Spring中的抽象bean以及bean继承

    *.hl_mark_KMSmartTagPinkImg{background-color:#ffaaff;}*.hl_mark_KMSmartTagBlueImg{background-color:# ...

  5. Centos 6.5 升级python到版本2.7.12

    查看python版本: python --version 1.下载Python-2.7.12 wget https://www.python.org/ftp/python/2.7.12/Python- ...

  6. 共享存储（ISCSI网络存储）

    server端:(192.168.100.11) 分区sdb 分别为10G和5G #fdisk /dev/dab …… 同步分区表 #partprobe /dev/sdb # yum install ...

  7. Nginx的ip_hash指令

    ip_hash 语法:ip_hash 默认值:none 使用环境:upstream 当对后端的多台动态应用服务器做负载均衡时,ip_hash指令能够将某个客户端IP的请求通过哈希算法定位到同一台后端服 ...

  8. Android logcat命令详解

    一.logcat命令介绍 1.android log系统 2.logcat介绍 logcat是android中的一个命令行工具,可以用于得到程序的log信息 log类是一个日志类,可以在代码中使用lo ...

  9. configure: error: You need a C++ compiler for C++ support.

    安装pcre包的时候提示缺少c++编译器 报错信息如下: configure: error: You need a C++ compiler for C++ support. 解决办法,使用yum安装 ...

  10. How to use POST method in Tornado?

    http://stackoverflow.com/questions/10367981/how-to-use-post-method-in-tornado