多行多列的图片滚动

最新推荐文章于 2022-06-10 10:56:28 发布

weixin_33943836

最新推荐文章于 2022-06-10 10:56:28 发布

阅读量324

点赞数

文章标签： javascript ViewUI

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>多行多列的图片滚动</title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="Pattazl">
<meta name="Keywords" content="Scroll Iframe">
<meta name="Description" content="No stop for picture scroll">
<style>
table,td,tr{
border: none;
padding: 0px;
margin:0px;
}
</style>
</head>
<script language="JavaScript">
<!--
window.οnlοad=initPicScroll;

/***************************
函数
【使用说明】
此函数为图片滚动所做，当鼠标移动到图片上时候显示大图片，并且移动速度降低一半
图片名字需要从0开始
图片格式需要一致，且大图片需要有前缀
比如说，图片本例子的小图片名字依次为
logo_0.gif  logo_1.gif  logo_2.gif  logo_3.gif ....
大图片名字依次为
Blogo_0.gif  Blogo_1.gif  Blogo_2.gif  Blogo_3.gif ....
图片数目最好和行数乘以列数相等，否则不够时会显示不出图片
initPicScroll函数为最终初始化的函数，最好写在window.onload里面
【使用方法】
1.创建一个文件
里面放一个层，比如
<div id="picScroll" style="position:absolute;top:0px;left:0px"></div>
2.按照使用说明要求修改“预先需要定义的参数” 并且设置好图片
3.用一个iframe包含此文件，这样就可以作连续滚动了
比如<iframe src="picScrollTest.htm" align=default frameBorder=0 height=134 name=MyFrame scrolling=no width=320></iframe>
注意iframe的宽度要小于图片列的宽度
【其他】
函数比较简单实用，为临时应一个网友要求所写，此类代码网上也很多了，自己写个更加通用的，也算练习
本来是准备组织成一个js的类的，但是刚才试了一下比较麻烦，算了，就先这么用吧。
作者: Pattazl
时间: 2005-6-5
版权没有:-)
****************************/
// ****开始预先需要定义的参数****************
var picScrollName="picScroll"; // 需要滚动的层的ID名称
var picPath="Pics/";   // 图片路径，无路径就留空
var picPre="logo_";    // 小图片名称
var picSuf=".gif";    // 小图片格式
var picBigPre="B";    // 大图片前缀
var scrollSpeed=3;    // 滚动速度正数为向左移动
var overSpeed=1;    // 当鼠标移动图片上时,滚动速度正数为向左移动
var picRow=2;     // 图片行数
var picCol=5;     // 图片列数
// ***需要定义的参数结束********************

// *******函数正式开始*********************
var picArray=new Array()
var picArrayBig=new Array()
var picNum=picCol*picRow;
var tempSpeed=scrollSpeed;

for(var i=0;i<picNum;i++)
{
picArray[i]=new Image();
picArrayBig[i]=new Image();
picArray[i].src=picPath+picPre+i+picSuf;
picArrayBig[i].src=picPath+picBigPre+picPre+i+picSuf;
}
tableStr="<table id=\"picScrollTable\"><tr>";
var tabletemp="";
var tabletemp1="";
var tabletemp2="";
var imgy=0; //大图片的相对位置y
var imgx=0; //大图片的相对位置x

for(var i=0;i<picNum;i++)
{
tabletemp1+="<td><div id='picScrollDiv"+i+"' style='position:absolute;y:"+imgy+"px;x:"+imgx+"px;'><img id='picScrollImg"+i+"' οnmοuseοut='hidenPic(this);' style='display:none;' src=\""+picArrayBig[i].src+"\" /></div><img οnmοuseοver=\"showPic("+i+")\" src=\""+picArray[i].src+"\" /></td>";

tabletemp2+="<td><div id='picScrollDiv"+(i+picNum)+"' style='position:absolute;y:"+imgy+"px;x:"+imgx+"px;'><img id='picScrollImg"+(i+picNum)+"' οnmοuseοut='hidenPic(this);' style='display:none;' src=\""+picArrayBig[i].src+"\" /></div><img οnmοuseοver=\"showPic("+(i+picNum)+")\" src=\""+picArray[i].src+"\" /></td>";

  if(i%picCol==(picCol-1)&&i!=(picNum-1))
  {
   tabletemp+=tabletemp1+tabletemp2+"</tr><tr>";
   tabletemp1="";
   tabletemp2="";
  }else if(i==(picNum-1)) // 最后一行
  {
  tabletemp+=tabletemp1+tabletemp2;
  }
}
tableStr+=tabletemp+"</tr></table>";
tempDivScroll.innerHTML=tableStr;
//table生成，然后需要移动此table
movePicScroll();
}
// ****函数结束************
//-->
</script>
<body>
<div id="picScroll" style="position:absolute;top:0px;left:0px"></div>
</body>
</html>

假设以上内容存为picScrollTest.htm 使用时<body οnmοuseοut="frames['MyFrame'].showPic(-1);">
<iframe src="picScrollTest.htm" align=default frameBorder=0 height=204 name="MyFrame" scrolling=no width=400></iframe>
</body>

weixin_33943836

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
多行多列的图片滚动

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt;&lt;html&gt;&lt;head&gt;&lt;title&gt;多行多列的图片滚动&lt;/title&gt;&lt;meta name="Generator" content="EditPlus"&a
复制链接

扫一扫