图片左右循环连续滚动代码，解决marquee的留白问题

美丽的小鹿 2024-08-10 12:42:35 原文

<marquee ONMOUSEOUT="this.start()" ONMOUSEOVER="this.stop()" DIRECTION="LEFT" scrollamount=3 behavior="scroll" loop="-1" deplay="0">
<table>
<tr>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201204/23143603swol.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201204/23143603swol.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201204/23143603swol.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
<td>
<a href="http://jz.shangbao.net.cn/d/c/" target="_blank" border="0"><img src="pic/201207/231227072z7f.jpg" border="0" style="width:150px;height:100px"/></a>
</td>
</tr>
</table>
</marquee>

以上实现的图片滚动，两轮滚动之间有空白，为解决上面的问题，查找了以下资料。

实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。

在原作者的基础上做了一定修改，主要还是在样式上面，将表格更换为标签。

先了解一下对象的几个的属性：

innerHTML:设置或获取位于对象起始和结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

图片上无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

height: 100px;

text-align: center;

float: left;

}

#demo img {

border: 3px solid #F2F2F2;

display: block;

}

-->

</style>

向上滚动

<div id="demo">

<div id="demo1">

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

</div>

<div id="demo2"></div>

</div>

<script>

<!--

var speed=10; //数字越大速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

function Marquee(){

if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时

tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端

else{

tab.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

-->

</script>

图片下无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

height: 100px;

text-align: center;

float: left;

}

#demo img {

border: 3px solid #F2F2F2;

display: block;

}

-->

</style>

向下滚动

<div id="demo">

<div id="demo1">

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

</div>

<div id="demo2"></div>

</div>

<script>

<!--

var speed=10; //数字越大速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2

tab.scrollTop=tab.scrollHeight

function Marquee(){

if(tab1.offsetTop-tab.scrollTop>=0)//当滚动至demo1与demo2交界时

tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端

else{

tab.scrollTop--

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器

-->

</script>

图片左无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 500px;

}

#demo img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

-->

</style>

向左滚动

<div id="demo">

<div id="indemo">

<div id="demo1">

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

</div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

var speed=10; //数字越大速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab2.offsetWidth-tab.scrollLeft<=0)

tab.scrollLeft-=tab1.offsetWidth

else{

tab.scrollLeft++;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->

</script>

图片右无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 500px;

}

#demo img {

border: 3px solid #F2F2F2;

}

#indemo {

float: left;

width: 800%;

}

#demo1 {

float: left;

}

#demo2 {

float: left;

}

-->

</style>

向右滚动

<div id="demo">

<div id="indemo">

<div id="demo1">

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

<a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>

</div>

<div id="demo2"></div>

</div>

</div>

<script>

<!--

var speed=10; //数字越大速度越慢

var tab=document.getElementById("demo");

var tab1=document.getElementById("demo1");

var tab2=document.getElementById("demo2");

tab2.innerHTML=tab1.innerHTML;

function Marquee(){

if(tab.scrollLeft<=0)

tab.scrollLeft+=tab2.offsetWidth

else{

tab.scrollLeft--

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() {clearInterval(MyMar)};

tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};

-->

</script>

小注：

1. demo的 width: 500px是可以改动的。

2. 图片必须覆盖500px的宽度，即图片的数量要超过一定的数量，否则出不了滚动的效果，或者滚动一会就停止了。

图片左右循环连续滚动代码，解决marquee的留白问题的更多相关文章

marquee上下左右循环无缝滚动代码
一.横向滚动<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN "><HTML>< ...
AdapterView 和 RecyclerView 的连续滚动
AdapterView 和 RecyclerView 的连续滚动 android RecyclerView tutorial 概述 ListView 和 GridView 的实现方式 Recycler ...
JS连续滚动幻灯片：原理与实现
什么是连续滚动幻灯片?打开一些网站的首页,你会发现有一块这样的区域:一张图片,隔一段时间滑动切换下一张:同时,图片两端各有一个小按钮,供你手动点选下一张:底部有一排小圆圈,供你选定特定的某帧图片.这就 ...
DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
jquery图片无缝滚动代码左右上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery 写的图片左右连续滚动
<style type="text/css"> *{ margin:0; padding:0;} body { font:12px/1.8 Arial; color:# ...
marquee|各种文字滚动代码(适用公告)
marquee|各种文字滚动代码(适用公告)
多行滚动jQuery循环新闻列表代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
HTML网页图片滚动代码
 <div id=butong_net_top style=overflow:hidden;height:100;width:90;> < ...

随机推荐

HTML之Data URL（转）
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法.跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式, ...
oracle中创建一个用户，只能查看指定的视图，如何授权，创建别名
1.create user A identified by Apassword,创建用户,用户名是A,密码是Apassword2.grant connect to A --授予connect权限3.g ...
XCode的一些调试技巧
XCode 内置GDB,我们可以在命令行中使用 GDB 命令来调试我们的程序.下面将介绍一些常用的命令以及调试技巧. po 命令:为 print object 的缩写,显示对象的文本描述(显示从对象的 ...
从零开始学java（小游戏石头剪刀布）
Game.java package com.java;import java.util.Scanner;public class Game { private Player player ...
hibernate_validator_02
三种不通的注解 1. 字段级(field level) 约束 package com.mycompany; import javax.validation.constraints.NotNull; p ...
qt二维码示例
原创文章,引用请保证原文完整性,尊重作者劳动,原文地址http://blog.csdn.net/hiwubihe/article/details/38679621,qq:1269122125. 移动终 ...
理解O/R Mapping
本文的目的是以最精炼的语言,理解什么是O/R Mapping,为什么要O/R Mapping,和如何进行O/R Mapping. 什么是O/R Mapping? 广义上,ORM指的是面向对象的对象模型 ...
初涉JavaScript模式 (4) : 构造函数
什么是构造函数? 构造函数是一种特殊的方法主要用来在创建对象时初始化对象即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中特别的一个类可以有多个构造函数可根据其参数个数的不 ...
让乔布斯立足肩上的C语言之父
2011年,人们对乔布斯的去世记忆深刻,但这一年还有另一位本应获得同样关注的人物也与世长辞,他就是C语言之父丹尼斯·里奇(Dennis Ritchie). 不过,并非所有人都没能正确认识到里奇所曾作出 ...
如何打开mo文件并修改 PoEdit
mo文件是被编译了的文件,一般在汉化的时候会用到. 比如我想修改phpmyadmin 的界面信息,就需要修改phpmyadmin.mo的文件内容. 可是用编辑器editplus或者Sublime 2打 ...