有链接的图片翻页效果及点击放大效果

最新推荐文章于 2020-10-19 09:30:10 发布

bjweb

最新推荐文章于 2020-10-19 09:30:10 发布

阅读量3k

点赞数

分类专栏： web开发类文章标签： image function border delay generator variables

本文链接：https://blog.csdn.net/bjweb/article/details/1066251

版权

web开发类专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML><HEAD><TITLE>3W交互网-动态网页:有链接的图片翻页效果</TITLE>
<META http-equiv=luxiaoqing content=no-cache>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META content="MSHTML 6.00.2900.2963" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
<STYLE>P {
FONT-SIZE: 9pt; COLOR: #8c50fc; FONT-FAMILY: "宋体"
}
TD {
FONT-SIZE: 9pt; FONT-FAMILY: "宋体"
}
LI {
FONT-SIZE: 9pt; FONT-FAMILY: "宋体"
}
SELECT {
FONT-SIZE: 9pt; FONT-FAMILY: "宋体"
}
A:link {
COLOR: #8c50fc
}
A:visited {
COLOR: #99ffcc
}
A:active {
COLOR: #ffcc99
}
A:hover {
COLOR: #99ccff
}
A {
TEXT-DECORATION: none
}
</STYLE>
</HEAD>
<BODY leftMargin=0 topMargin=0 οnlοad=ImageBook()>
<CENTER><BR><BR><BR>
<CENTER>
<TABLE width="75%" border=0>
<TBODY>
<TR>
    <TD>
      <DIV id=Book style="POSITION: relative"><IMG
      οnmοuseup=this.width+=(3-event.button*2)*10 οncοntextmenu=return(false)
      height=276 src="3W交互网-动态网页有链接的图片翻页效果.files/_01.jpg" width=206>
      </DIV><BR><BR><BR><IMG οnmοuseup=this.width+=(3-event.button*2)*10
      οncοntextmenu=return(false)
      src="3W交互网-动态网页有链接的图片翻页效果.files/20060803171332583af.jpg" width=10> <IMG
      οnmοuseup=this.width+=(3-event.button*2)*10 οncοntextmenu=return(false)
      src="3W交互网-动态网页有链接的图片翻页效果.files/20060803171332583af.jpg"><BR><BR></TD></TR></TBODY></TABLE><SPAN
οnmοuseup=this.width+=(3-event.button*2)*10 οncοntextmenu=return(false)
style="FILTER: Dropshadow(color=#FFFF66, Offx=2,
OffY=2, Positive=1); WIDTH: 630px; HEIGHT: 1px"></SPAN><BR><BR><BR><BR><BR>
<SCRIPT type=text/javascript>

// 7 variables to control behavior
var Book_Image_Width=206;
var Book_Image_Height=276;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1500; //1 second=1000
var Book_Vertical_Turn=0;

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(

  "images/czima/_1.jpg","http://www.go-cool.com",
  "images/czima/_2.jpg","http://www.2000web.net",
  "images/czima/_3.jpg","http://www.ff99.net", //this slide isn't linked
  "images/czima/_4.jpg","http://www.game123.net" // NOTE No comma after last line

);

/***************** DO NOT EDIT BELOW **********************************/
var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_Direction=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

    setTimeout("Book_Next_Delay()",Book_NextPage_Delay)}
   else setTimeout("BookImages()",50)}
  else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
   if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
   B_RI.src=B_Pre_Img[B_CrImg].src;
   B_RI.lnk=Book_Image_Sources[B_CrImg+1];
   B_MI.style.zIndex=2;
   B_LI.style.zIndex=1;
   B_Angle=0;
   B_CrImg+=2;
  setTimeout("BookImages()",50)}

效果可以看这里http://www.sgou.com/zazhi_body.asp

bjweb

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
有链接的图片翻页效果及点击放大效果

3W交互网-动态网页:有链接的图片翻页效果P { FONT-SIZE: 9pt; COLOR: #8c50fc; FONT-FAMILY: "宋体"}TD { FONT-SIZE: 9pt; FONT-FAMILY: "宋体"}LI { FONT-SIZE: 9pt; FONT-FAMILY: "宋体"}SELECT { FONT-SIZE: 9pt; FONT-FAMILY: "宋体"}A:li
复制链接

扫一扫

专栏目录