图片特效3(翻书效果)

< html >
< head >
< script  type ="text/javascript" >
var  Book_Image_Width = 140 ;
var  Book_Image_Height = 225 ;
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 ;




Book_Image_Sources
= new  Array(
" jsimg/photo1.jpg " , " http://www.smallrain.net.net " ,
" jsimg/photo2.jpg " , " http://www.jingran.org " ,
" jsimg/photo3.jpg " , "" // this slide isn't linked
" jsimg/photo4.jpg " , " http://www.b2bsky.com "   //  NOTE No comma after last line
);


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);

function  ImageBook(){
if (document.getElementById){
for (i = 0 ;i < Book_Image_Sources.length;i += 2 ){
B_Pre_Img[i]
= new  Image();B_Pre_Img[i].src = Book_Image_Sources[i]}
Book_Div
= document.getElementById( " Book " );
B_LI
= document.createElement( " img " );Book_Div.appendChild(B_LI);
B_RI
= document.createElement( " img " );Book_Div.appendChild(B_RI);
B_MI
= document.createElement( " img " );Book_Div.appendChild(B_MI);
B_LI.style.position
= B_MI.style.position = B_RI.style.position = " absolute " ;
B_LI.style.zIndex
= B_RI.style.zIndex = 0 ;B_MI.style.zIndex = 1 ;
B_LI.style.top
= (Book_Vertical_Turn ? Book_Image_Height + 1 : 0 ) + " px " ;
B_LI.style.left
= 0 + " px " ;
B_MI.style.top
= 0 + " px " ;
B_MI.style.left
= (Book_Vertical_Turn ? 0 :Book_Image_Width + 1 ) + " px " ;
B_RI.style.top
= 0 + " px " ;
B_RI.style.left
= (Book_Vertical_Turn ? 0 :Book_Image_Width + 1 ) + " px " ;
B_LI.style.height
= Book_Image_Height + " px " ;
B_MI.style.height
= Book_Image_Height + " px " ;
B_RI.style.height
= Book_Image_Height + " px " ;
B_LI.style.width
= Book_Image_Width + " px " ;
B_MI.style.width
= Book_Image_Width + " px " ;
B_RI.style.width
= Book_Image_Width + " px " ;
if (Book_Border){
B_LI.style.borderStyle
= B_MI.style.borderStyle = B_RI.style.borderStyle = " solid " ;
B_LI.style.borderWidth
= 1 + " px " ;
B_MI.style.borderWidth
= 1 + " px " ;
B_RI.style.borderWidth
= 1 + " px " ;
B_LI.style.borderColor
= B_MI.style.borderColor = B_RI.style.borderColor = Book_Border_Color}
B_LI.src
= B_Pre_Img[ 0 ].src;
B_LI.lnk
= Book_Image_Sources[ 1 ];
B_MI.src
= B_Pre_Img[ 2 ].src;
B_MI.lnk
= Book_Image_Sources[ 3 ];
B_RI.src
= B_Pre_Img[ 4 ].src;
B_RI.lnk
= Book_Image_Sources[ 5 ];
B_LI.onclick
= B_MI.onclick = B_RI.onclick = B_LdLnk;
B_LI.onmouseover
= B_MI.onmouseover = B_RI.onmouseover = B_Stp;
B_LI.onmouseout
= B_MI.onmouseout = B_RI.onmouseout = B_Rstrt;
BookImages()}}

function  BookImages(){
if ( ! B_Stppd){
if (Book_Vertical_Turn){
B_MSz
= Math.abs(Math.round(Math.cos(B_Angle) * Book_Image_Height));
MidOffset
=! B_Direction ? Book_Image_Height + 1 :Book_Image_Height - B_MSz;
B_MI.style.top
= MidOffset + " px " ;
B_MI.style.height
= B_MSz + " px " }
else {B_MSz = Math.abs(Math.round(Math.cos(B_Angle) * Book_Image_Width));
MidOffset
= B_Direction ? Book_Image_Width + 1 :Book_Image_Width - B_MSz;
B_MI.style.left
= MidOffset + " px " ;
B_MI.style.width
= B_MSz + " px " }
B_Angle
+= Book_Speed / 720 * Math.PI;
if (B_Angle >= Math.PI / 2 && B_Direction){
B_Direction
= 0 ;
if (B_CrImg == Book_Image_Sources.length)B_CrImg = 0 ;
B_MI.src
= B_Pre_Img[B_CrImg].src;
B_MI.lnk
= Book_Image_Sources[B_CrImg + 1 ];
B_CrImg
+= 2 }
if (B_Angle >= Math.PI){
B_Direction
= 1 ;
B_TI
= B_LI;
B_LI
= B_MI;
B_MI
= B_TI;
if (Book_Vertical_Turn)B_MI.style.top = 0 + " px " ;
else  B_MI.style.left = Book_Image_Width + 1 + " px " ;
B_MI.src
= B_RI.src;
B_MI.lnk
= B_RI.lnk;

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 )}

function  B_LdLnk(){ if ( this .lnk)window.location.href = this .lnk}
function  B_Stp(){B_Stppd = true ; this .style.cursor = this .lnk ? " pointer " : " default " }
function  B_Rstrt(){B_Stppd = false }
</ script >
</ head >
< body  onload ="ImageBook()" >
< div  id ="Book"  style ="position:relative" >
< img  src ="jsimg/aa.jpg"  width ="144"  height ="227" >
</ div >
</ body >
</ html >
 
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值