<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. 实验 1 Java 运行环境的安装、配置与运行

    一.实验目的     1． 掌握下载 Java SDK 软件包.     2． 掌握设置 Java 程序运行环境的方法.     3． 掌握编写与运行 Java 程序的方法.     4． 了解 Ja ...

  2. bzoj4419 发微博

    Description 刚开通的SH微博共有n个用户(1..n标号),在短短一个月的时间内,用户们活动频繁,共有m条按时间顺序的记录: ! x   表示用户x发了一条微博: + x y 表示用户x和用 ...

  3. [转]预编译 ASP.NET 网站

    转自:如何:预编译 ASP.NET 网站 Visual Studio 2005   预编译 ASP.NET 网站可缩短用户的初始响应时间,因为页在第一次被请求时无需编译.这对于经常更新的大型网站尤其有 ...

  4. 用几分钟了解R语言入门知识

    第一篇——用几分钟了解R语言入门知识 第二篇——用几分钟了解R语言入门知识(续) 关于数据分析学习笔记的计划(以及目录)

  5. html_常用技巧总结

    =============  博客大全: 脚本之家:http://www.jb51.net/list/list_233_104.htm 红黑联盟: http://www.2cto.com/kf/yid ...

  6. [UE4]GetWorld()->GetDeltaSeconds()方法

    void AAvatar::Yaw(float amount) { if (Controller && amount) { // AddControllerYawInput()函数用于 ...

  7. HTC Vive的定位技术

    Lighthouse空间定位,chaperone系统避免实际障碍物 HTC vive所用的Lighthouse技术属于激光定位技术,Oculus Rift以及索尼PlayStation VR所用的定位 ...

  8. C++多线程同步之临界区（CriticalSection）

    原文链接:http://blog.csdn.net/olansefengye1/article/details/53262917 一.Win32平台 1.相关头文件和接口 #include <w ...

  9. Installation of Scylla on CentOS 7

    Scylla on CentOS 7 Use these steps to install Scylla using Yum repositories on CentOS. Prerequisites ...

  10. SpringBoot 返回json 字符串（jackson 及 fast json）

      一.jackson 1.Controller 类加注解@RestController 这个注解相当于@Controller 这个注解加 @ResponseBody 2.springBoot 默认使 ...