js实现点击图片翻页显示效果

作者:sky 点击:331 评论:1 发布时间:周三, 03/26/2014 - 00:38 所属分类:图像特效

用户鼠标点击图片后，自动跳转到下一张图片，很漂亮的图片翻页特效，各大网站中都会用到这个图片切换特效。

<!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>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> <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>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: