图片技巧，javascript图片处理，js图片技巧，js图片-CSDN博客

本文链接：https://blog.csdn.net/heisetoufa/article/details/83265357

滚动图片

连续滚动的图片
脚本说明:

把如下代码加入<body>区域中
<script language="JavaScript1.2">

//Specify the slider's width (in pixels)
var sliderwidth=300
//Specify the slider's height
var sliderheight=150
//Specify the slider's slide speed (larger is faster 1-10)
var slidespeed=3
//configure background color:
slidebgcolor="#EAEAEA"

//Specify the slider's images
var leftrightslide=new Array()
var finalslide=''
leftrightslide[0]='<a href="http://."><img src="" border=1></a>'
leftrightslide[1]='<a href="http://."><img src="" border=1></a>'
leftrightslide[2]='<a href="http://."><img src="." border=1></a>'
leftrightslide[3]='<a href="http://."><img src="." border=1></a>'
leftrightslide[4]='<a href="http://."><img src="." border=1></a>'

NO NEED TO EDIT BELOW THIS LINE

var copyspeed=slidespeed
leftrightslide='<nobr>'+leftrightslide.join(" ")+'</nobr>'
var iedom=document.all||document.getElementById
if (iedom)
document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100;left:-3000">'+leftrightslide+'</span>')
var actualwidth=''
var cross_slide, ns_slide

function fillup(){
if (iedom){
cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2
cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth
cross_slide2.style.left=actualwidth+20
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+20
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval("slideleft()",30)
}
window.οnlοad=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+30

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+30

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+30

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+30
}
}

if (iedom||document.layers){
with (document){
document.write('<table border="0" cellspacing="0" cellpadding="0"><td>')
if (iedom){
write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">')
write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">')
write('<div id="test2" style="position:absolute;left:0;top:0"></div>')
write('<div id="test3" style="position:absolute;left:-1000;top:0"></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>')
write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>')
write('</ilayer>')
}
document.write('</td></table>')
}
}
</script>

图片集旋转显示
脚本说明:

第一步:把如下代码加入<body>区域中
<script type="text/javascript">
// 7 variables to control behavior
var Car_Image_Width=140;
var Car_Image_Height=225;
var Car_Border=true;  // true or false
var Car_Border_Color="white";
var Car_Speed=4;
var Car_Direction=true;  // true or false
var Car_NoOfSides=8;  // must be 4, 6, 8 or 12

/* array to specify images and optional links.
For 4 sided carousel specify at least 2 images
For 6 sided carousel specify at least 3
For 8 sided carousel specify at least 4
For 12 sided carousel specify at least 6
If Link is not needed keep it ""
*/
Car_Image_Sources=new Array(
  "photo/200310171/photo1.jpg","http://www.cctv.com",
  "photo/200310171/photo2.jpg","http://www.cctv.com",
  "photo/200310171/photo3.jpg","", //this slide isn't linked
  "photo/200310171/photo4.jpg","http://www.cctv.com" // NOTE No comma after last line
  );

/***************** DO NOT EDIT BELOW **********************************/
CW_I=new Array(Car_NoOfSides/2+1);C_ClcW=new Array(Car_NoOfSides/2);
C_Coef=new Array(
3*Math.PI/2,0,3*Math.PI/2,11*Math.PI/6,Math.PI/6,3*Math.PI/2,7*Math.PI/4, 0,
Math.PI/4,3*Math.PI/2,5*Math.PI/3,11*Math.PI/6,0,Math.PI/6,Math.PI/3);
var C_CoefOf=Car_NoOfSides==4?0:Car_NoOfSides==6?2:Car_NoOfSides==8?5:9;
C_Pre_Img=new Array(Car_Image_Sources.length);
var C_Angle=Car_Direction?Math.PI/(Car_NoOfSides/2):0,C_CrImg=Car_NoOfSides,C_MaxW,C_TotalW,
C_Stppd=false,i,C_LeftOffset,C_HalfNo=Car_NoOfSides/2;

function C_LdLnk(){if(this.lnk)window.location.href=this.lnk}
function C_Stp(){this.style.cursor=this.lnk?"pointer":"default";C_Stppd=true;}
function C_Rstrt(){C_Stppd=false}
</script>
<div id="Carousel" style="position:relative">
<img src="photo/200310171/placeholder.gif" width="371" height="225">
</div>

第二步:把如下代码加入<body>区域中<body οnlοad="Carousel()">

图片一张张显示
脚本说明:

把如下代码加入<body>区域中
<style type="text/css">
<!--

td {font-family: Verdana, Arial, sans-serif, Helvetica; font-size: 12px; color: #F0F0F0;}
a {font-family: Verdana, Arial, sans-serif, Helvetica; font-size: 12px; color: #F0F0F0; text-decoration: none}
#btnStyle {font-family: Verdana, Arial, sans-serif, Helvetica; font-size: 12px; background-color: #C0C020; border-top: 0px solid; border-bottom: 0px solid; border-left: 0px solid; border-right: 0px solid;}

//--></style>
<script language="JavaScript" type="text/JavaScript"><!--

var img = new Array(10); //array to hold the images
var start = null; //start pointer
var counter = 1; //counts the image sequences
var delayTime = null; //user defined

if(document.images) //pre-load all the images
{
   /* change the looping condition if you want
      to add or remove images. Do not load too
      many images, it will slow down the program's
      loading time [e.g. 30 or above images] */

   for(i = 1; i <= 10; i++)
   {
     img[i] = new Image();
     img[i].src = "photo/20030519/pic" + i + ".jpg";
   }
}

//function for getting the user defined delay time
function getDelayTime(dlTime)
{
   var temp = parseInt(dlTime);
   if(temp != NaN)
    delayTime = temp * 1000;

else
delayTime = 4000;
}

//function for changing the images
function anim()
{
counter++;
document.images[0].src = img[counter].src;

if(counter == 10)
counter = 0; //sets the counter value to 0
}

//function for starting the slide show
function slide()
{
getDelayTime(document.form1.delay.value);

   with(document.form1)
   {
     start = setInterval("anim()", delayTime);
     stShow.disabled = true;
     spShow.disabled = false;
   }
}

//function to stop the slide show
function stopSlide()
{
   clearInterval(start);
   document.form1.stShow.disabled = false;
   document.form1.spShow.disabled = true;
}

//--></script>
<table align=center border=0 cellspacing=0 cellpadding=4 bgcolor=#000000>
<tr><td valign=top align=center>
<img src="photo/20030519/pic1.jpg" border=0 width=400 height=300><br>
<form name="form1">
请输入图片显示间隔时间:
<input type=text size=2 value="4" name=delay><br>

图片和链接变化（向左移）
脚本说明:

把如下代码加入<body>区域中
<script language="JavaScript1.2">
///configure the below four variables to change the style of the slider///
//set the scrollerwidth and scrollerheight to the width/height of the LARGEST image in your slideshow!
var scrollerwidth='100px'
var scrollerheight='106px'
var scrollerbgcolor='white'
//3000 miliseconds=3 seconds
var pausebetweenimages=3000

//configure the below variable to change the images used in the slideshow. If you wish the images to be clickable, simply wrap the images with the appropriate <a> tag
var slideimages=new Array()
slideimages[0]='<a href="http://www.cctv.com"><img src="photo/PE01805A.gif" border=0"></a>'
slideimages[1]='<img src="photo/PE01803A.gif">'
slideimages[2]='<img src="photo/TN00411A.gif">'
slideimages[3]='<a href="http://www.sina.com"><img src="photo/PE02054A.gif" border=0"></a>'
slideimages[4]='<img src="photo/cake.gif">'
//extend this list
///Do not edit pass this line///
var ie=document.all
var dom=document.getElementById
if (slideimages.length>1)
i=2
else
i=0
function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.left>0&&tlayer.left<=5){
tlayer.left=0
setTimeout("move1(tlayer)",pausebetweenimages)
setTimeout("move2(document.main.document.second)",pausebetweenimages)
return
}
if (tlayer.left>=tlayer.document.width*-1){
tlayer.left-=5
setTimeout("move1(tlayer)",50)
}
else{
tlayer.left=parseInt(scrollerwidth)+5
tlayer.document.write(slideimages[i])
tlayer.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.left>0&&tlayer2.left<=5){
tlayer2.left=0
setTimeout("move2(tlayer2)",pausebetweenimages)
setTimeout("move1(document.main.document.first)",pausebetweenimages)
return
}
if (tlayer2.left>=tlayer2.document.width*-1){
tlayer2.left-=5
setTimeout("move2(tlayer2)",50)
}
else{
tlayer2.left=parseInt(scrollerwidth)+5
tlayer2.document.write(slideimages[i])
tlayer2.document.close()
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.left)>0&&parseInt(tdiv.style.left)<=5){
tdiv.style.left=0+"px"
setTimeout("move3(tdiv)",pausebetweenimages)
setTimeout("move4(scrollerdiv2)",pausebetweenimages)
return
}
if (parseInt(tdiv.style.left)>=tdiv.offsetWidth*-1){
tdiv.style.left=parseInt(tdiv.style.left)-5+"px"
setTimeout("move3(tdiv)",50)
}
else{
tdiv.style.left=scrollerwidth
tdiv.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.left)>0&&parseInt(tdiv2.style.left)<=5){
tdiv2.style.left=0+"px"
setTimeout("move4(tdiv2)",pausebetweenimages)
setTimeout("move3(scrollerdiv1)",pausebetweenimages)
return
}
if (parseInt(tdiv2.style.left)>=tdiv2.offsetWidth*-1){
tdiv2.style.left=parseInt(tdiv2.style.left)-5+"px"
setTimeout("move4(scrollerdiv2)",50)
}
else{
tdiv2.style.left=scrollerwidth
tdiv2.innerHTML=slideimages[i]
if (i==slideimages.length-1)
i=0
else
i++
}
}
function startscroll(){
if (ie||dom){
scrollerdiv1=ie? first2 : document.getElementById("first2")
scrollerdiv2=ie? second2 : document.getElementById("second2")
move3(scrollerdiv1)
scrollerdiv2.style.left=scrollerwidth
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.left=parseInt(scrollerwidth)+5
document.main.document.second.visibility='show'
}
}
window.οnlοad=startscroll
</script>
<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; visibility=hide>
<layer id="first" left=1 top=0 width=&{scrollerwidth}; >
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(slideimages[1])
</script>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (ie||dom){
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+'">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:1px;top:0px;">')
document.write(slideimages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px">')
document.write(slideimages[1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
</script>

超级文字滚动效果
脚本说明:

把如下代码加入<body>区域中
<script language="javascript" src="photo/ts_files/scroll.js"></script>

<tr><td bgcolor="#ffffff"><SCRIPT LANGUAGE="JavaScript">Tscroll_init (0)</SCRIPT></td></tr>

</table>

<br>

<tr><td bgcolor="#ffffff"><SCRIPT LANGUAGE="JavaScript">Tscroll_init (1)</SCRIPT></td></tr>

</table>

自制相册

脚本说明:

把如下代码加入<body>区域中
<SCRIPT LANGUAGE="JavaScript"> var javascript_version = 1.0;</SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1"> javascript_version = 1.1;</SCRIPT>
<script language=javascript>
self.name = "main"; // names current window as "main"

PicVar = 0;

// Object Fix

function Fix(DatVal, PicVal, TitVal, TxtVal) {

this.DatVal = DatVal

this.PicVal = PicVal

this.TitVal = TitVal

this.TxtVal = TxtVal

}

// Create new main array.

var SuzyArray = new Array()

// The following lines are the ONLY LINES in this whole script that you need to change!

// SuzyArray[PicVar++] = new Fix("date", "photo/picname.jpg", "pic title", "pic description")

SuzyArray[PicVar++] = new Fix("2/25/2003", "photo/2003-02-25-27.jpg", "Our house in the snow", "I took this beautiful picture this morning. The streets are <i>one solid sheet of ice</i> right now! It's insane. I don't think we'll be driving anywhere soon.")

SuzyArray[PicVar++] = new Fix("1/5/2003", "photo/2003-01-05-03.jpg", "Rain in the trees", "I had taken <b>Rainlin</b> out for a walk in the stroller, and we saw these cute little trees and stopped for a picture.")

SuzyArray[PicVar++] = new Fix("1/31/2003", "photo/2002-12-31-01.jpg", "Scott and Suzy", "I asked one of our friends to take this picture for us. Could my handsome hubby's eyes get any more <b>blue?</b> :)")

SuzyArray[PicVar++] = new Fix("12/7/2002", "photo/2002-12-07-05.jpg", "on the hayride", "Daddy was having a wonderful time on the hayride. Dylan wasn't too sure about it!")

SuzyArray[PicVar++] = new Fix("11/9/2002", "photo/2002-11-09-09.jpg", "Boys on wheels", "Daddy was holding Dylan up <i>with his knees!</i> Those skates sure are hard to stand up in, but once he got the knack for it Dylan didn't want to take them off.")

SuzyArray[PicVar++] = new Fix("10/30/2002", "photo/2002-10-30-01.jpg", "Dylan the Builder", "Here's Dylan, all dressed up and ready for Halloween! Everything in his life is Bob-the-builder related.")

SuzyArray[PicVar++] = new Fix("6/19/2002", "photo/2002-06-19-07.jpg", "Jabba's face", "It's hard, really hard, to get a picture of Jabba's face without him charging the camera.")

SuzyArray[PicVar++] = new Fix("6/11/2002", "photo/2002-06-11-11.jpg", "Rain behind the house", "The brick that makes up the outside of the house proved to be really pretty for framing pictures of the kidlets.")

SuzyArray[PicVar++] = new Fix("6/9/2002", "photo/2002-06-09-04.jpg", "Scott and Rainlin", "I just had to take some pictures of them before church. They looked so nice!")

SuzyArray[PicVar++] = new Fix("6/9/2002", "photo/2002-06-09-01.jpg", "Rainlin and Susan", "We both wore our pretty blue flower dresses that Sunday.")

SuzyArray[PicVar++] = new Fix("6/7/2002", "photo/2002-06-07-24.jpg", "Kaytlyn and Rainlin playing dress-up", "Kaytlyn has a whole bunch of dress-up clothes, and Rain loves to go over to her house and play dress-up with her.")

SuzyArray[PicVar++] = new Fix("6/2/2002", "photo/2002-06-02-13.jpg", "The Three Amigos", "Dylan, Daddy, and Rainlin were watching Castaway on the couch. We just moved all the furniture into that 'great room,' and everyone seems to like it better in there.")

SuzyArray[PicVar++] = new Fix("6/1/2002", "photo/2002-06-01-09.jpg", "Simon", "For those of you who have never met him, this is Simon. He's the tatoo I have on my left leg. I drew everything of the tattoo except for his head, which came from a greeting card my mother sent me while I was in the military.")

last = PicVar - 1;

current = 0;

function ShowSuzyPic(newpic) {

// (not working on some browsers) document.playsound.play();

current = newpic;

SelectionBox = document.SuzyForm.SuzyDropdown;

SelectionBox.options[current].selected = true;

document.getElementById("SuzySpot").innerHTML = '<a href=javascript:SuzyPicRemote("' + SuzyArray[current].PicVal + '","last");><img name="PicShowing" src=' + SuzyArray[current].PicVal + ' height=200 border=0></a>';

document.getElementById("Journal").outerHTML = '<div id=journal><br>' + SuzyArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + SuzyArray[current].TxtVal + '</div>';

if (document.SuzyForm.WhereView[1].checked) {

timerID = setTimeout("SuzyPicRemote(SuzyArray[current].PicVal,'current')",1000)

}

function RandomSuzyPic() {

randompic = Math.floor(Math.random()*PicVar);

last = current;

ShowSuzyPic(randompic);

}

function PreviousSuzyPic() {

last = current;

current--;

if(current<0) current = PicVar - 1;

ShowSuzyPic(current);

}

function NextSuzyPic() {

last = current;

TotalImages = document.SuzyForm.SuzyDropdown.options.length;

current++;

if (current>=PicVar) current = 0;

ShowSuzyPic(current);

}

function SuzyPicRemote(picName,whichPic) {

ShowingImage = new Image();

ShowingImage.src = picName;

wid = ShowingImage.width + 50;

hei = ShowingImage.height + 50;

if (wid < 30 || hei < 30) {

wid=650;

hei=490;

}

if (screen.width < wid || screen.height < hei) {

wid = screen.width - 50;

hei = screen.height - 50;

}

OpenWindow = window.open("http://www.kitykity.com/photoalbum/clear.html", "remoteWin", "resizable=1, scrollbars=1, toolbar=0, left=15, top=10, width=" + wid + ", height=" + hei);

OpenWindow.document.write('<html><body background=photo/parchment.jpg><img src=' + picName + '></body></html>');

OpenWindow.document.close();

}

function FindPic() {

TotalFound = 0;

SearchString = document.SuzyForm.SearchWord.value;

SearchString = SearchString.toLowerCase();

WriteResults = window.open("clear.html","resultwindow","height=300, width=300, toolbar=0, status=0, menubar=0, resizable=1, scrollbars=1");

WriteResults.document.open();

WriteResults.document.write('<div style="text-align:center; font:8pt verdana">'

+ 'You searched for:<br><i>' + SearchString + '</i><br><b>Results:</b><br>');

for (loop=0; loop < PicVar ; loop++) {

Keyword = SuzyArray[loop].TxtVal;

Keyword = Keyword.toLowerCase();

URL = SuzyArray[loop].PicVal;

title = SuzyArray[loop].TitVal;

title = title.toLowerCase();

SearchResult = Keyword.indexOf(SearchString);

SearchResult2 = title.indexOf(SearchString);

if (SearchResult != "-1" || SearchResult2 != "-1") {

last = current;

WriteResults.document.write('<br><a href=javascript:ShowSuzyPic(' + loop + '); target="main">' + title + '</a>');

TotalFound++;

}

WriteResults.document.write('<p><b>Returned ' + TotalFound + ' results.</b>');

WriteResults.document.close();

if(javascript_version > 1.0) {

//delay a bit here because IE4 encounters errors

//when trying to focus a recently opened window

setTimeout('WriteResults.focus();',250);

}

// -->

</script>
<form name="SuzyForm">

document.write('<a href=javascript:SuzyPicRemote("' + SuzyArray[current].PicVal + '","last");><img name="PicShowing" src=' + SuzyArray[current].PicVal + ' height=200 border=0></a>');

</script>
</div>
</td>
<td style="background:url(photo/parchmentring.jpg); width:36px; border-top:2px groove #888888; border-bottom:4px groove #888888" border=0> </td>
<td style="background:url(photo/parchment.jpg); border-top:2px groove #888888; border-right:4px groove #888888; border-bottom:4px groove #888888; padding:5px; padding-right:20px; width:225px; font:8pt verdana; color:#000044; margin-left:0px" valign=top>
<div id="Journal">
<script language=javascript>
document.write('<br>' + SuzyArray[current].DatVal + '<p style="text-align:justify; text-indent:25px">' + SuzyArray[current].TxtVal);
</script>
</div>
</td>
</tr></table>
<p>
<table border=0><tr align=center>
<td>
<input type=button value="<<" onClick="PreviousSuzyPic();" style="font:8pt verdana,helvetica,arial; text-align:center">
<input type=button value="随机" onClick="RandomSuzyPic();" style="font:8pt verdana,helvetica,arial">
<input type=button value=">>" onClick="NextSuzyPic();" style="font:8pt verdana,helvetica,arial; text-align:center">
<p>
<SELECT size=12 style='font:8pt verdana' name='SuzyDropdown' onChange='ShowSuzyPic(SuzyForm.SuzyDropdown.options.selectedIndex);'>
<script language=javascript>
TotalImages = PicVar;
for (loop=0; loop < TotalImages; loop++)
{
document.write("<option value=" + SuzyArray[loop].PicVal + ">" + SuzyArray[loop].TitVal + "</option>");
}
</script>
</SELECT>
</td>
<td style="padding-left:25px; font:8pt verdana">
<p style="text-align:left"><input type=radio name="WhereView" value="chkLocal" CHECKED>- 在本页浏览图片
<br><input type=radio name="WhereView" value="chkRemote">- 在弹出窗口浏览图片</p>
<p>搜索图片:
<br><input name="SearchWord" size=10 style="font:8pt verdana">
<br><input type="button" value="查找" onClick="javascript:FindPic();" style="font:8pt verdana">
</td></tr></table>
</td></tr></table>
</FORM>
<p><SCRIPT Language="Javascript">
document.write("总共有 " + PicVar + " 张图片。最后更新： " + document.lastModified +".");
</script>

图片的任意方向移动
脚本说明:

把如下代码加入<body>区域中
<table>
<tr><td style="padding: 5">
<div id="testDiv" style="border: buttonface 2 solid">
<img src="photo/2201.jpg">
</div>
<script language="JScript">
function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed)
{
var scrollDiv = obj
var scrollContent = document.createElement("span")
scrollContent.style.position = "absolute"
scrollDiv.applyElement(scrollContent, "inside")
var displayWidth = (oWidth != "auto" && oWidth ) ? oWidth : scrollContent.offsetWidth + parseInt(scrollDiv.currentStyle.borderRightWidth)
var displayHeight = (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth)
var contentWidth = scrollContent.offsetWidth
var contentHeight = scrollContent.offsetHeight
var scrollXItems = Math.ceil(displayWidth / contentWidth) + 1
var scrollYItems = Math.ceil(displayHeight / contentHeight) + 1

scrollDiv.style.width = displayWidth
scrollDiv.style.height = displayHeight
scrollDiv.style.overflow = "hidden"
scrollDiv.setAttribute("state", "stop")
scrollDiv.setAttribute("drag", drag ? drag : "horizontal")
scrollDiv.setAttribute("direction", direction ? direction : "left")
scrollDiv.setAttribute("zoom", zoom ? zoom : 1)
scrollContent.style.zoom = scrollDiv.zoom

var scroll_script = "var scrollDiv = " + scrollDiv.uniqueID          +"\n"+
    "var scrollObj = " + scrollContent.uniqueID         +"\n"+
    "var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)" +"\n"+
    "var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)" +"\n"+
    "var scrollx = scrollObj.runtimeStyle.pixelLeft"        +"\n"+
    "var scrolly = scrollObj.runtimeStyle.pixelTop"         +"\n"+

    "switch (scrollDiv.state.toLowerCase())"        +"\n"+
    "{"             +"\n"+
     "case ('scroll') :"         +"\n"+
      "switch (scrollDiv.direction)"        +"\n"+
      "{"           +"\n"+
       "case ('left')  :"       +"\n"+
        "scrollx = (--scrollx) % contentWidth"     +"\n"+
        "break"         +"\n"+
       "case ('right') :"        +"\n"+
        "scrollx = -contentWidth + (++scrollx) % contentWidth"   +"\n"+
        "break"         +"\n"+
       "case ('up') :"        +"\n"+
        "scrolly = (--scrolly) % contentHeight"     +"\n"+
        "break"         +"\n"+
       "case ('down') :"        +"\n"+
        "scrolly = -contentHeight + (++scrolly) % contentHeight"  +"\n"+
        "break"         +"\n"+
       "case ('left_up') :"       +"\n"+
        "scrollx = (--scrollx) % contentWidth"     +"\n"+
        "scrolly = (--scrolly) % contentHeight"     +"\n"+
        "break"         +"\n"+
       "case ('left_down') :"       +"\n"+
        "scrollx = (--scrollx) % contentWidth"     +"\n"+
        "scrolly = -contentHeight + (++scrolly) % contentHeight"  +"\n"+
        "break"         +"\n"+
       "case ('right_up') :"       +"\n"+
        "scrollx = -contentWidth + (++scrollx) % contentWidth"   +"\n"+
        "scrolly = (--scrolly) % contentHeight"     +"\n"+
        "break"         +"\n"+
       "case ('right_down') :"       +"\n"+
        "scrollx = -contentWidth + (++scrollx) % contentWidth"   +"\n"+
        "scrolly = -contentHeight + (++scrolly) % contentHeight"  +"\n"+
        "break"         +"\n"+
       "default  :"       +"\n"+
        "return"        +"\n"+
      "}"           +"\n"+
      "scrollObj.runtimeStyle.left = scrollx"       +"\n"+
      "scrollObj.runtimeStyle.top = scrolly"       +"\n"+
      "break"           +"\n"+

     "case ('stop') :"          +"\n"+
     "case ('drag') :"          +"\n"+
     "default :"          +"\n"+
      "return"          +"\n"+
    "}"

var contentNode = document.createElement("span")
contentNode.runtimeStyle.position = "absolute"
contentNode.runtimeStyle.width = contentWidth
scrollContent.applyElement(contentNode, "inside")
for (var i=0; i <= scrollXItems; i++)
{
  for (var j=0; j <= scrollYItems ; j++)
  {
   if (i+j == 0) continue
   var tempNode = contentNode.cloneNode(true)
   var contentLeft, contentTop
   scrollContent.insertBefore(tempNode)
   contentLeft = contentWidth * i
   contentTop = contentHeight * j
   tempNode.runtimeStyle.left = contentLeft
   tempNode.runtimeStyle.top = contentTop
  }
}

scrollDiv.onpropertychange = function()
{
  var propertyName = window.event.propertyName
  var propertyValue = eval("this." + propertyName)

  switch(propertyName)
  {
   case "zoom"  :
    var scrollObj = this.children[0]
    scrollObj.runtimeStyle.zoom = propertyValue
    var content_width = scrollObj.children[0].offsetWidth * propertyValue
    var content_height = scrollObj.children[0].offsetHeight * propertyValue
    scrollObj.runtimeStyle.left = -content_width + (scrollObj.runtimeStyle.pixelLeft % content_width)
    scrollObj.runtimeStyle.top = -content_height + (scrollObj.runtimeStyle.pixelTop % content_height)
    break
  }
}

scrollDiv.onlosecapture = function()
{
  this.state = this.tempState ? this.tempState : this.state
  this.runtimeStyle.cursor = ""
  this.removeAttribute("tempState")
  this.removeAttribute("start_x")
  this.removeAttribute("start_y")
  this.removeAttribute("default_left")
  this.removeAttribute("default_top")
}

scrollDiv.onmousedown = function()
{
  if (this.state != "drag") this.setAttribute("tempState", this.state)
  this.state = "drag"
  this.runtimeStyle.cursor = "default"
  this.setAttribute("start_x", event.clientX)
  this.setAttribute("start_y", event.clientY)
  this.setAttribute("default_left", this.children[0].style.pixelLeft)
  this.setAttribute("default_top", this.children[0].style.pixelTop)
  this.setCapture()
}

scrollDiv.onmousemove = function()
{
  if (this.state != "drag") return
  var scrollx = scrolly = 0
  var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1
  var content_width = this.children[0].children[0].offsetWidth * zoomValue
  var content_Height = this.children[0].children[0].offsetHeight * zoomValue
  if (this.drag == "horizontal" || this.drag == "both")
  {
   scrollx = this.default_left + event.clientX - this.start_x
   scrollx = -content_width + scrollx % content_width
   this.children[0].runtimeStyle.left = scrollx
  }
  if (this.drag == "vertical" || this.drag == "both")
  {
   scrolly = this.default_top + event.clientY - this.start_y
   scrolly = -content_Height + scrolly % content_Height
   this.children[0].runtimeStyle.top = scrolly
  }
}

scrollDiv.onmouseup = function()
{
  this.releaseCapture()
}

scrollDiv.state = "scroll"
setInterval(scroll_script, speed ? speed : 20)
}
</script>
<script language="JScript">
window.onload = new Function("scroll(document.all['testDiv'], 325)")
</script>
<br>
<button οnclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button>
<button οnclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button>
<button οnclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button>
<button οnclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button>
<button οnclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button>
<button οnclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button>
<br>
缩放：
<select οnchange="testDiv.zoom = this.options[selectedIndex].value">
<option value=1>100%</option>
<option value=2>200%</option>
<option value=3>300%</option>
</select>　　　　　
托动范围：
<select οnchange="testDiv.drag = this.options[selectedIndex].value">
<option value="both">随意</option>
<option value="horizontal" selected>横向</option>
<option value="vertical">纵向</option>
</select>
</td></tr>
</table>