万户资源科技
万汇资源微信公众号

微信扫码有惊喜!

使用jQuery实现相册效果

luping 2015-12-25 技术

点击图片,图片变大,出现相册效果。

代码如下:

<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery.js" language="javascript" type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="js/public.js"></script>


</head>
<body>
<div class="kePublic">
<!--效果html开始-->
<!--图库弹出层 开始-->
<div class="mskeLayBg"></div>
<div class="mskelayBox">
  <div class="mske_html">
  
  </div>
  <img class="mskeClaose" src="images/mke_close.png" width="27" height="27" />
</div>
<!--图库弹出层 结束-->
<div class="msKeimgBox">
 <ul>
      <li>
      <img src="images/skeImg.jpg" width="185" height="93" />
      <span class="hidden">
      <img src="images/bkeImg.jpg" width="974" height="488" />
      </span>
      </li>
      <li>
      <img src="images/skeImg.jpg" width="185" height="93" />
      <span class="hidden">
      <img src="images/bkeImg.jpg" width="974" height="488" />
      </span>
      </li>
      <li>
      <img src="images/skeImg.jpg" width="185" height="93" />
      <span class="hidden">
      <img src="images/bkeImg.jpg" width="974" height="488" />
      </span>
      </li>

 </ul>
</div>
<!--效果html结束-->
</div>


CSS:

body, ul,div,{margin:0;padding:0;}
/* 效果CSS开始 */
.msKeimgBox { margin: 0px auto; width: 965px; overflow: hidden; position: relative; padding-top: 30px; height: 93px; }
.msKeimgBox ul { width: 1000px; }
.mskeLayBg { background: #000; width: 100%; position: absolute; left: 0px; top: 0px; z-index: 10; opacity: 0.7; filter: alpha(opacity=70); display: none; _display:none!important }
.mskelayBox { height: 488px; width: 974px; margin-top: -251px; margin-left: -494px; position: fixed; left: 50%; top: 50%; border: 7px solid #FFF; z-index: 20; background: #FFF; display: none; _display:none!important }
.mskeImgBg { height: 57px; width: 100%; position: absolute; left: 0px; bottom: 0px; }
.mskeClaose { position: absolute; top: -17px; right: -17px; cursor: pointer; }
.mske_downIco { position: absolute; left: 0px; top: 0px; }
.mske_imgDown { background: url(../images/mke_imgMbg.png) repeat; height: 57px; width: 818px; position: absolute; right: 0px; bottom: 0px; font: 13px/57px "微软雅黑"; color: #FFF; }
.mske_imgDown a { margin-left: 34px; }
.msKeimgBox ul li { float: left; height: 93px; margin: 0 10px 10px 0; width: 185px; cursor: pointer; }
.mskeTogBtn { background: url(../images/mke_moreImg.jpg) no-repeat; height: 93px; width: 185px; position: absolute; z-index: 1; right: 0px; cursor: pointer; bottom: 0px; }
.mskeTogBtn2 { background: url(../images/mke_moreImg2.jpg) no-repeat; bottom: 10px; }
.msKeimgBox2 { height: auto; }
/* 效果CSS结束 */


jQuery代码:

jQuery(function(){
//选项卡滑动切换通用
jQuery(function(){jQuery(".hoverTag .chgBtn").hover(function(){jQuery(this).parent().find(".chgBtn").removeClass("chgCutBtn");jQuery(this).addClass("chgCutBtn");var cutNum=jQuery(this).parent().find(".chgBtn").index(this);jQuery(this).parents(".hoverTag").find(".chgCon").hide();jQuery(this).parents(".hoverTag").find(".chgCon").eq(cutNum).show();})})

//选项卡点击切换通用
jQuery(function(){jQuery(".clickTag .chgBtn").click(function(){jQuery(this).parent().find(".chgBtn").removeClass("chgCutBtn");jQuery(this).addClass("chgCutBtn");var cutNum=jQuery(this).parent().find(".chgBtn").index(this);jQuery(this).parents(".clickTag").find(".chgCon").hide();jQuery(this).parents(".clickTag").find(".chgCon").eq(cutNum).show();})})

//图库弹出层
$(".mskeLayBg").height($(document).height());
$(".mskeClaose").click(function(){$(".mskeLayBg,.mskelayBox").hide()});
$(".msKeimgBox li").click(function(){$(".mske_html").html($(this).find(".hidden").html());$(".mskeLayBg").show();$(".mskelayBox").fadeIn(300)});
$(".mskeTogBtn").click(function(){$(".msKeimgBox").toggleClass("msKeimgBox2");$(this).toggleClass("mskeTogBtn2")});

})
//屏蔽页面错误
jQuery(window).error(function(){
  return true;
});
jQuery("img").error(function(){
  $(this).hide();
});

实现效果如图:


blob.png


--597

文章关键词
相册效果
点击出现大图
jQuery相册
qq qq tel
服务热线:

134-1954-9128