<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. devExpress Gridview添加按钮或链接

    1.进入view设计 2.增加列 3.修改Repository中相关内容

  2. JavaScriptSerializer类 对象序列化为JSON，JSON反序列化为对象 。

    JavaScriptSerializer 类由异步通信层内部使用,用于序列化和反序列化在浏览器和 Web 服务器之间传递的数据.说白了就是能够直接将一个C#对象传送到前台页面成为javascript对 ...

  3. 织梦ask标签的调用

    EDE 问答首页调用标签 标签名称: ask 功能说明:问答调用标签 适用范围:全局使用 基本语法: {dede:ask row='6' qtype='new' tid='0' titlelen='2 ...

  4. bzoj1047 理想的正方形

    Description 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. Input 第一行为3个整数,分别表示a,b,n的值第二行至第 ...

  5. 2018-2019 Exp3 免杀原理与实践

    2018-2019 Exp3 免杀原理与实践 目录 一.实验内容说明及基础问题回答 二.实验过程 Task1 1.使用msf编码器生成后门程序及检测 Task1 2.msfvenom生成jar等文件 ...

  6. hdu 1278 逃离迷宫

    逃离迷宫 Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submis ...

  7. [原]System.IO.Path.Combine 路径合并

    使用 ILSpy 工具查看了 System.IO.Path 类中的 Combine 方法 对它的功能有点不放心,原方法实现如下: // System.IO.Path /// <summary&g ...

  8. [UE4]移动设备贴图消失

    pc版本是支持直接使用psd文件作为贴图文件,但移动设备就不支持了.

  9. CSS3基础知识（一）

    结构选择器 :nth-child(n) 第几个元素 从1开始设置 :nth-child(2n) 偶数元素 从0开始设置 :nth-child(2n+1) 奇数元素 :nth-of-type(n) :f ...

  10. 生产者消费者模型(Queue,JoinableQueue)

    生产者消费者模型 主要是为解耦 借助队列来实现生产者消费者模型 栈:先进后出(First In Last Out 简称 FILO) 队列: 先进先出(First In First Out 简称 FIF ...