点击图片翻页效果

稿源：互联网 2022-04-02 21:43:14 点击： 27319 撤稿纠错

点击图片后，自动跳转到下一张图片，很漂亮的图片翻页特效。

以下讨论的是和点击翻页相关的点击图片翻页效果教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<meta name="keywords" content="站长,网页特效,网页特效代码,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 非常酷的仿杂志翻页效果 站长特效网欢迎您。</title>
<style type="text/css">
html,body{
 width:100%;
 height:100%;
 overflow:hidden;
 border:0px;
 margin:0px;
 background:transparent;
}
.www_zzjs_net{
 float:left;
 width:50%;
 height:100%;
}
#left{
 display:none;
 float:right;
 width:0px;
 height:395px;
 background:#000;
 border:1px solid #999;
}
#right{
 display:none;
 float:left;
 width:300px;
 height:395px;
 background:#000;
 border:1px solid #999;
}
#_zzjs_net{
 position:absolute;
 width:300px;
 height:395px;
 top:36px;
 background:#111;
 border:1px solid #999;
 display:none;
}
#zzjs_net{
 position:absolute;
 width:300px;
 height:395px;
 top:36px;
 background:#000;
 border:1px solid #999;
 display:none;
}
.con{
 width:260px;
 height:355px;
 margin:20px;
 font-size:14px;
 line-height:160px;
 color:#fff;
}
.con,.con *{
 display:block;
 width:260px;
 text-align:center;
}
</style>
<script language="javascript" src="/img/jquery_zzjs.js"></script>
<script language="javascript">
//作者：kubau0
var om=true;//设置同一时间只能进行一个效果
$(document).ready(function(){
 var user="美女一|美女二|美女三|美女四|美女五|第一章标题|第二章标题|第三章标题|第四章标题|第五章标题".split("|");
 var content="<img src='/img/200406301.jpg'>|<img src='/img/200406302.jpg'>|<img src='/img/200406303.jpg'>|<img src='/img/200406304.jpg'>|<img src='/img/200406305.jpg'>|第一章内容|第二章内容|第三章内容|第四章内容|第五章内容".split("|");
 var bw=$(document).width();
 var cu=0;
 $("#zzjs_net").css({left:(bw-300)/2});//封面居中
 setTimeout(function(){
  $("#zzjs_net").slideDown("slow");//封面下拉效果
 },1000);
 $("#zzjs_net").click(function(){//开始效果
  if(om){
   om=false;//禁止其他效果
   $("#zzjs_net").animate({left:bw/2},"slow",function(){//封面从居中右移至右衬底位置
    $("#right").html("<div class=con>"+content[cu]+"</div>");//右衬底加载第一页内容
    $("#right").show();//右衬底显示
    $("#zzjs_net").animate({width:0},"slow",function(){//封面向中间收缩
     $("#zzjs_net").hide();//隐藏封面
     $("#left").html("<div class=con>"+user[cu]+"</div>");//左衬底加载第一页信息
     $("#left").show();//左衬底显示
     $("#left").animate({width:300},"slow");//左衬底向左展开
     om=true;
    });
   });
  }
 });
 $("#right").click(function(){//后翻页效果
  if(om){
   if(cu==user.length-1){//已翻到最后一页
   }else{
   cu++;
   om=false;//禁止其他效果
   $("#_zzjs_net").html($("#right").html());//设置效果层显示右衬底内容
   $("#_zzjs_net").css({left:bw/2,width:300});//效果层右定位展开
   $("#_zzjs_net").show();//效果层显示
   $("#right").html("<div class=con>"+content[cu]+"</div>");//右衬底显示下页内容
   $("#_zzjs_net").animate({width:0},"slow",function(){//效果层左收缩至中
    $("#_zzjs_net").html("<div class=con>"+user[cu]+"</div>");//设置效果层显示下页内容
     $("#_zzjs_net").animate({width:300,left:bw/2-300-2},"slow",function(){//效果层左展开至左衬底位置，2为border值
    $("#left").html($("#_zzjs_net").html());//设置左衬底显示效果层内容
     $("#_zzjs_net").hide();//隐藏效果层
     om=true;
    });
   });
  }
  }
 });
 $("#left").click(function(){//前翻页效果
  if(om){
   if(cu==0){//前翻到封面
    $("#left").animate({width:0},"slow",function(){//左衬底向左收缩至中
     $("#left").hide();//左衬底隐藏
     $("#zzjs_net").show();//显示封面
     $("#zzjs_net").animate({width:300},"slow",function(){//封面向右展开
      $("#right").hide();//右衬底隐藏
      $("#zzjs_net").animate({left:bw/2-150},"slow");
     });
    });
   }else{
   cu--;
   om=false;//禁止其他效果
   $("#_zzjs_net").html($("#left").html());//设置效果层显示左衬底内容
   $("#_zzjs_net").css({left:bw/2-300-2,width:300});//效果层左定位展开，2为border值
   $("#_zzjs_net").show();//效果层显示
   $("#left").html("<div class=con>"+user[cu]+"</div>");//左衬底显示上页内容
   $("#_zzjs_net").animate({width:0,left:bw/2},"slow",function(){//效果层右收缩至中
   $("#_zzjs_net").html("<div class=con>"+content[cu]+"</div>");//设置效果层显示上页内容
    $("#_zzjs_net").animate({width:300,left:bw/2},"slow",function(){//效果层左展开至右衬底位置
     $("#right").html($("#_zzjs_net").html());//设置右衬底显示效果层内容
     $("#_zzjs_net").hide();//隐藏效果层
     om=true;
    });
   });
  }
  }
 });
});//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
</script>
</head>

<body onselectstart="return false;">
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。 需要加载js文件，请刷新页面看效果。<hr>

<div class="www_zzjs_net">
 <div id="left"></div>
</div>
<div class="www_zzjs_net">
 <div id="right"></div>
</div>
<div id="zzjs_net">
 <div class="con">杂志封面，点击这里<br><img src="/img/1_192312.jpg"></div>
</div>
<div id="_zzjs_net"></div>
</body>
</html>

关于点击图片翻页效果的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010091564688.shtml方便下次再访问哦。

·上一篇： 网站顶部伸缩广告
·下一篇： 点击输入框弹出一个选择层

点击图片翻页效果

文章分类LIST >>返回首页

最新游戏

最新新闻