<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. Zabbix二次开发_02获取数据

    最近准备写一个zabbix二次页面的呈现.打算调用zabbix api接口来进行展示. 具体流程以及获取的数据. 1.  获得认证密钥    2.  获取zabbix所有的主机组    3.  获取单 ...

  2. sikuli 安装

    1     简介 官方介绍: Sikuli脚本自动化,你在屏幕上看到的任何东西.它使用图像识别,识别和控制GUI组件.这是有用的,当有一个GUI的内部或源代码的访问是不容易的. Sikuli(在墨西哥 ...

  3. java web 程序---javabean代码，出现错误。奇怪，无法解释的运行问题

    深夜吧.这个点11点半了 写了一个简单的javabean实例,发现没有任何代码书写的错误,但是问题就是程序运行会有问题,然后换一个包,重写一个,问题没了? 请问问题出现在哪里了?巧合?还是操作有误?这 ...

  4. MySQL工具 Navicat

    F6打开命令行窗口 ctrl+shift+r  运行选中语句   #不过不建议使用,因为ctrl+r是执行当前所有语句,如果语句当中有delete update 后果不堪设想

  5. ECCV 2018 | UBC&腾讯AI Lab提出首个模块化GAN架构，搞定任意图像PS组合

    通常的图像转换模型(如 StarGAN.CycleGAN.IcGAN)无法实现同时训练,不同的转换配对也不能组合.在本文中,英属哥伦比亚大学(UBC)与腾讯 AI Lab 共同提出了一种新型的模块化多 ...

  6. 小朋友学Python（2）

    本节学习python的第一个程序:输出“Hello World!”.咱们用两种方法实现 方法(一) 进入python环境,直接使用print方法   hello world.png 方法(二) 先编程 ...

  7. python-django-ORM，常用查询方式

    介绍django model 的一些常用查询方式 首先是一些文档性的帮助 __exact 精确等于 like ‘aaa’ __iexact 精确等于 忽略大小写 ilike ‘aaa’ __conta ...

  8. Python - Django - ORM 实例

    准备工作: 首先创建一个名为 Py_Django 的数据库 新建项目,名为 mysite0 创建完成后需要进行几项配置 mysite0/settings.py 下 首先是 html 文件相关 其次是数 ...

  9. DOS中判断进程是否存在的方法

    这里分享的主要是通过批处理中先判断进程是否存在,然后再做出操作的实现代码,需要的朋友可以参考下   检测进程是否存在,并做出预定动作. tasklist /nh>d:\tddown~1\1.tx ...

  10. 1_Utilities__bandwidthTest

    使用三种模式(QUICK_MODE,RANGE_MODE,SHMOO_MODE),测试三种拷贝情况下的显存带宽(HostToDevice,DeviceToHost,DeviceToDevice) ▶ ...