滚动图片
连续滚动的图片
脚本说明:
把如下代码加入<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_slidefunction 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=fillupfunction 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+30if (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+30if (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 Carousel(){
if(document.getElementById){
for(i=0;i<Car_Image_Sources.length;i+=2){
C_Pre_Img[i]=new Image();C_Pre_Img[i].src=Car_Image_Sources[i]}
C_MaxW=Car_Image_Width/Math.sin(Math.PI/Car_NoOfSides)+C_HalfNo+1;
Car_Div=document.getElementById("Carousel");
for(i=0;i<C_HalfNo;i++){
CW_I[i]=document.createElement("img");Car_Div.appendChild(CW_I[i]);
CW_I[i].style.position="absolute";
CW_I[i].style.top=0+"px";
CW_I[i].style.height=Car_Image_Height+"px";
if(Car_Border){
CW_I[i].style.borderStyle="solid";
CW_I[i].style.borderWidth=1+"px";
CW_I[i].style.borderColor=Car_Border_Color}
CW_I[i].src=Car_Image_Sources[2*i];
CW_I[i].lnk=Car_Image_Sources[2*i+1];
CW_I[i].οnclick=C_LdLnk;
CW_I[i].οnmοuseοver=C_Stp;
CW_I[i].οnmοuseοut=C_Rstrt}
CarImages()}} function CarImages(){
if(!C_Stppd){
C_TotalW=0;
for(i=0;i<C_HalfNo;i++){
C_ClcW[i]=Math.round(Math.cos(Math.abs(C_Coef[C_CoefOf+i]+C_Angle))*Car_Image_Width);
C_TotalW+=C_ClcW[i]}
C_LeftOffset=(C_MaxW-C_TotalW)/2;
for(i=0;i<C_HalfNo;i++){
CW_I[i].style.left=C_LeftOffset+"px";
CW_I[i].style.width=C_ClcW[i]+"px";
C_LeftOffset+=C_ClcW[i]}
C_Angle+=Car_Speed/720*Math.PI*(Car_Direction?-1:1);
if((Car_Direction&&C_Angle<=0)||(!Car_Direction&&C_Angle>=Math.PI/C_HalfNo)){
if(C_CrImg==Car_Image_Sources.length)C_CrImg=0;
if(Car_Direction){
CW_I[C_HalfNo]=CW_I[0];
for(i=0;i<C_HalfNo;i++)CW_I[i]=CW_I[i+1];
CW_I[C_HalfNo-1].src=Car_Image_Sources[C_CrImg];
CW_I[C_HalfNo-1].lnk=Car_Image_Sources[C_CrImg+1]}
else{ for(i=C_HalfNo;i>0;i--)CW_I[i]=CW_I[i-1];
CW_I[0]=CW_I[C_HalfNo];
CW_I[0].src=Car_Image_Sources[C_CrImg];
CW_I[0].lnk=Car_Image_Sources[C_CrImg+1]}
C_Angle=Car_Direction?Math.PI/C_HalfNo:0;C_CrImg+=2}}
setTimeout("CarImages()",50)} 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><input type=button value="Start Show" name=stShow onClick="slide();" id=btnStyle>
<input type=button value="Stop Show" name=spShow onClick="stopSlide();" id=btnStyle DISABLED><br>
</form>
</td></tr></table>图片和链接变化（向左移）
脚本说明:
把如下代码加入<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>
<table border="0" cellpadding="3" cellspacing="1" align="center" bgcolor="#336699">
<tr><td class="header2"><font color="#ffffff">窗口一</font></td></tr>
<tr><td bgcolor="#ffffff"><SCRIPT LANGUAGE="JavaScript">Tscroll_init (0)</SCRIPT></td></tr>
</table>
<br>
<table border="0" cellpadding="3" cellspacing="1" align="center" bgcolor="#336699">
<tr><td class="header2"><font color="#ffffff">窗口二</font></td></tr>
<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"><table border=0><tr><td>
<table style="padding:0px; margin:0px" border=0 cellspacing=0><tr align=center>
<td bgcolor=f9f9f9 style="background:url(photo/parchment.jpg); width:275px; border-top:2px groove #888888;border-left:4px groove #888888;border-bottom:4px groove #888888; padding:10px; margin:0px">
<div id="SuzySpot">
<script language=javascript>
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>
