符合W3C Web标准的图片连续无间隙水平滚动- Javascript

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 符合W3C Web标准的图片连续无间隙水平滚动

Javascript: 自己开发Dojo的建议框架; js每次Title显示不同的名言; 不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术; 无限级别的菜单（侧拉菜单）; 点选TOP后并不是直接跳到页顶的，而是滚动上去; js下拉菜单中自动信息轮换播放; 英文首字母全大写的js实现脚本; 实例区别onClick和onDBClick两事件方法; 改变文本框字体颜色的js脚本; js星空效果代码; 判断li是否有样式的js代码; 文本框点击时文字消失，失去焦点时文字出现; 如何让一个层关闭之后，就算刷新页面了也不显示。除非关闭页面再次打开; 右下角弹出窗口效果代码; JS控制对象移动效果; 验证用户是否修改过页面的数据的实现方法; Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]; 正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度; EXT富客户端后台管理系统初步代码; 不同浏览器javascript变量作用域的处理方法

No. « ‹ 110 111 112 113 › »

技术文章搜索

关键字

Javascript 中的符合W3C Web标准的图片连续无间隙水平滚动

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 634 ::

收藏到网摘: n/a

比较详细的javascript DOM 学习笔记 Javascript入门学习第五篇 js函数

很久以前就有这个问题，总是找不到通用的，或比较简单的“图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准” 这次又遇上一个这样的问题，找了老半天终于从网上找到一个不错的，看了下代码，思路很简单，但代码太多，通用性也不行，于是乎，自己又发明了两个函数，用起来感觉还真不错，与大家共享：

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片连续无间隙向左滚动，无间隙向右滚动，符合W3C Web标准_</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<div id="demo" style="overflow: hidden; width: 322px; height: 61px">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tr>
<td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tr align="center">
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
</tr>
</table></td>
<td id="demo2" valign="top"></td>
</tr>
</table>
</div>
<div id="demo0" style="overflow: hidden; width: 322px; height: 61px">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tr>
<td id="demo11" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tr align="center">
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
<td width="50" height="50"><img height="50" src="www.yonfa365.com.jpg" /> </td>
</tr>
</table></td>
<td id="demo22" valign="top"></td>
</tr>
</table>
</div>
<script type="text/javascript" language="JavaScript">
//调用向左滚动
toleft("demo","demo1","demo2",30,"hehe123")
//调用向右滚动
toright("demo0","demo11","demo22",20,"hehe1123")
function $(id){return document.getElementById(id)}
//向左滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。
//by 柳永法(yongfa365)'Blog　www.yongfa365.com
function toleft(demo,demo1,demo2,speed,flag){
demo=$(demo);demo1=$(demo1);demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0){
demo.scrollLeft-=demo1.offsetWidth
}
else{
demo.scrollLeft++
}
}
flag=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(flag);}
demo.onmouseout=function(){flag=setInterval(Marquee,speed);}
}
//向右滚动函数，demo包含demo1与demo2,speed是滚动速度，flag一个网页内有多个时设置为不同的任意字符。
//by 柳永法(yongfa365)'Blog　www.yongfa365.com
function toright(demo,demo1,demo2,speed,flag){
demo=$(demo);demo1=$(demo1);demo2=$(demo2)
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo.scrollLeft<=0){
demo.scrollLeft=demo2.offsetWidth
}
else{
demo.scrollLeft--
}
}
flag=setInterval(Marquee,speed)
demo.onmouseover=function(){clearInterval(flag);}
demo.onmouseout=function(){flag=setInterval(Marquee,speed);}
}
</script>
</body>
</html>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

以下为网上提供的代码

点击运行可以看到效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
</head>
<body>
<img src="images/butt_arrowl.gif" style="cursor:pointer" /> <img src="images/butt_arrowr.gif"style="cursor:pointer" />
<div>
<div id="demo" style="OVERFLOW: hidden; WIDTH: 322px; HEIGHT: 61px">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tbody>
<tr>
<td id="demo1" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tbody>
<tr align="center">
<td width="50" height="50"><img height="50" src="images/photo_small01.jpg" /> </td>
<td width="50" height="50"><img height="50" src="images/photo_small02.jpg" /> </td>
<td width="50" height="50"><img height="50" src="images/photo_small03.jpg" /> </td>
<td width="50" height="50"><img height="50" src="images/photo_small06.jpg" /> </td>
<td width="50" height="50"><img height="50" src="images/photo_small05.jpg" /> </td>
</tr>
</tbody>
</table></td>
<td id="demo2" valign="top"></td>
</tr>
</tbody>
</table>
</div>
</div>
<div>
<div id="demo_a" style="OVERFLOW: hidden; WIDTH: 322px; HEIGHT: 61px">
<table cellpadding="0" align="left" border="0" cellspace="0">
<tbody>
<tr>
<td id="demo_b" valign="top"><table cellspacing="0" cellpadding="0" width="322" bgcolor="#fffbf7" border="0">
<tbody>
<tr align="center">
<td width="50" height="50"><img height="50" src="images/photo_small04.jpg" /> </td>
<td width="50" height="50"><img height="50" src="images/photo_small07.jpg" /> </td>
<td width="50" height="50"><img height="50" src="images/photo_small08.jpg" /> </td>
<td width="50" height="50"><img height="50" src="images/photo_small09.gif" /> </td>
<td width="50" height="50"><img height="50" src="images/photo_small01.jpg" /> </td>
</tr>
</tbody>
</table></td>
<td id="demo_c" valign="top"></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
<script type="text/javascript">
/*
**兼容IE,Firefox 遵循W3C标准写法的图片无缝滚动代码（支持左移/右移功能）(本示例为上下两行图片进行双行滚动)
**
**实现思路：一个设定宽度并且隐藏超出它宽度的内容的容器demo，里面放demo1和demo2，demo1是滚动内容,demo2为demo1的直接克隆，
**通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的，当滚动至demo1与demo2的交界处时直接跳回初始位置，
**因为demo1与demo2一样，所以分不出跳动的瞬间，从而达到“无缝”滚动的目的。
*/
var speed1=0 //图片左移的速度
var MyMar1 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar2 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var lefthit=0 //记录左移按钮点击次数
var righthit=0 ////记录右移按钮点击次数
//调用右移方法前,先让左移停止（clearInterval清除setInterval对方法的调用）
function clearleft(){
clearInterval(MyMar1)
clearInterval(MyMar2)
}
//图片左移的方法
function toleft(){
//判断是否是第一次按下左移按钮（图片往左开始移动的时候，不会在调用此方法。只有当按了右移按钮时，才会把lefthit重设为0）
if(lefthit==0){
speed1=30;//图片左移速度时间毫秒
//让的内容demo2与demo1内容一样
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
//上行图片移动的方法
function Marquee1(){
//当demo滚动至demo2的交界处。与就是与demo2重合时。offsetWidth与scrollLeft刚好相等
if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0){
//demo跳回初始位置
document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
}
else{
//demo开始重新移动
document.getElementById("demo").scrollLeft++
}
}
//setInterval让Marquee1方法每隔多少秒执行一次，并把返回的调用次数ID
MyMar1=setInterval(Marquee1,speed1)
//当鼠标移动demo上面时。调用clearInterval清除MyMar1.这样图片便不会在移动了。移到图片时，第一行和第二行的图片都会停止
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar1);clearInterval(MyMar2)}
//当鼠标移除demo时,重新setInterval让方法执行，这样图片会继续移动
document.getElementById("demo").onmouseout=function()
{MyMar1=setInterval(Marquee1,speed1);clearInterval(MyMar2);MyMar2=setInterval(Marquee2,speed1)}
//下面的方法与上面的方法一样，用于第二行的图片向左移动
document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
function Marquee2(){
if(document.getElementById("demo_c").offsetWidth-document.getElementById("demo_a").scrollLeft<=0){
document.getElementById("demo_a").scrollLeft-=document.getElementById("demo_b").offsetWidth}
else{
document.getElementById("demo_a").scrollLeft++
}
}
MyMar2=setInterval(Marquee2,speed1)
document.getElementById("demo_a").onmouseover=function()
{clearInterval(MyMar2);clearInterval(MyMar1)}
document.getElementById("demo_a").onmouseout=function()
{MyMar2=setInterval(Marquee2,speed1); document.getElementById("demo").onmouseout()}
lefthit=1 //设置左移按钮，当按了一次左移后(不管按多少次)，在没按右移按钮之前，toleft方法里的的代码不会再被执行
righthit=0 //把右移按钮设为0,这样当下次点了右移按钮的时候，以便toright方法被调用
}
}
var MyMar3 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第一行图片)
var MyMar4 //setInterverval方法返回的间隔ID,些ID为全局的调用次数(用于第二行图片)
var speed2=0 //图片右移的速度
//调用移左方法前,先让右移停止（clearInterval清除setInterval对方法的调用）
function clearright(){
clearInterval(MyMar3)
clearInterval(MyMar4)
}
//图片右移方法(与图片左移方法思路一样)
function toright(){
//判断是否是第一次按下右移按钮（图片往右开始移动的时候，不会在调用此方法。只有当按了左移按钮时，才会把righthit重设为0）
if(righthit==0){
speed2=30;
document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
function Marquee_a(){
if(document.getElementById("demo").scrollLeft<=0){
document.getElementById("demo").scrollLeft=document.getElementById("demo2").offsetWidth
}
else{
document.getElementById("demo").scrollLeft--
}
}
MyMar3=setInterval(Marquee_a,speed2)
document.getElementById("demo").onmouseover=function()
{clearInterval(MyMar3);document.getElementById("demo_a").onmouseover()}
document.getElementById("demo").onmouseout=function()
{MyMar3=setInterval(Marquee_a,speed2);clearInterval(MyMar4);MyMar4=setInterval(Marquee_b,speed2)}
document.getElementById("demo_c").innerHTML=document.getElementById("demo_b").innerHTML
function Marquee_b(){
if(document.getElementById("demo_a").scrollLeft<=0){
document.getElementById("demo_a").scrollLeft=document.getElementById("demo_c").offsetWidth
}
else{
document.getElementById("demo_a").scrollLeft--
}
}
MyMar4=setInterval(Marquee_b,speed2)
document.getElementById("demo_a").onmouseover=function()
{clearInterval(MyMar4);clearInterval(MyMar3)}
document.getElementById("demo_a").onmouseout=function()
{MyMar4=setInterval(Marquee_b,speed2);document.getElementById("demo").onmouseout()}
righthit=1 //设置右移按钮，当按了一次右移按钮后(不管按多少次)，在没按左移按钮之前，toright方法里的的代码不会再被执行
lefthit=0 //把左移按钮设为0,这样当下次点了左移按钮的时候，以便toleft方法被调用
}
}
</script>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

比较详细的javascript DOM 学习笔记 Javascript入门学习第五篇 js函数

Javascript 中的 符合W3C Web标准的图片连续无间隙水平滚动

评论 (0) All

Javascript 中的符合W3C Web标准的图片连续无间隙水平滚动