手机版 js图片浏览插件(附源代码下载)-幸凡学习网

手机版 js图片浏览插件(附源代码下载)

关注我吧

2015/5/20 20:33:39 阅读次数:12973Tags:js 手机插件图片下载

在新的手机项目中有要求对多张图片进行浏览，所以本人也是在网上找了很多都没有找到合适的代码，后来在某网站上找了一个改成了自己的比较好用，而且没有某网站那样调用JSON，这样感觉就通用，而且很方便，可以对多个区域进行调用即。底部附源代码下载

一、效果图下图所示：

手机版 js图片浏览插件附源代码

放大浏览图内容主要div 源代码如下：

<!-- 放大浏览图开始 -->
<div class="m-dt" id="Jslider">
  <div class="swipe-wrap" id="Jslider-wrap">
    <div class="swipe-con"></div>
  </div>
  <div class="slideTp"> <i id="JslideBack"></i><a href="" class="swipe-cmtCount" id="JslideCmtCount" target="_blank" title="点击下载"></a><span class="swipe-num" id="JslideNum"></span></div>
</div>
<!-- 放大浏览图结束 -->

需要包含的图片容器DIV以及整体DIV包含整个显示内容，还有值得注意的是,每张图片都有一个参数z-index，值是从1开始往上递加。弹窗显示图片时整个页面的内容都被隐藏了这样页面就不会滚动。我开始有尝试，所以印象非常深，大家可以试下,样式可以修改，但是记得跟slide.js中ID\style\class要同步这样就不会出错。

源代码如下：

<div class="body" id="Jlazy_img">
	<!-- 广告开始 -->
	<script type="text/javascript" src="http://www.86y.org/js/mobtongji.js"></script>
	<!-- 广告结束 -->
    <div id="JartCon">      
      <p><img alt="愤怒的小鸟" index="1" src="http://p5.image.hiapk.com/uploads/allimg/160523/7730-160523160941.jpg"> </p>
      <p><img alt="愤怒的小鸟" index="2" src="http://p5.image.hiapk.com/uploads/allimg/160523/7730-160523160941-50.jpg"> </p>
	  <p><img alt="愤怒的小鸟" index="3" src="http://p1.image.hiapk.com/uploads/allimg/160523/7730-160523160941-51.jpg"> </p>
	
    </div>
</div>

完整源代码如下：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
<title>手机版html5图片放大浏览模式</title>
<style>
html{padding:0px;margin:0px auto;-webkit-text-size-adjust:none;}
body{background:#FFF;padding:0px;margin:0px auto;font-size:15px;color:#444;font-family:Helvetica,Microsoft YaHei,Microsoft JhengHei;}
a{color:#444;text-decoration:none;}
ol,ul,li,dl,dd,dt{padding:0;margin:0;list-style:none;}
form,p{padding:0;margin:0;}
i,em{font-style:normal;}
textarea {resize:none}
img{border:none;}
.spanclass{display:none;}
.body {margin:0 auto;overflow:hidden;}


/* 读图模式 20141217 lianglixing */
.body{margin:0 10px;text-align:center;}
.body img {max-width:60%;border: none;}
.m-dt{width: 100%;height: 100%;overflow: hidden;display: none;}
.m-dt .swipe-wrap,.m-dt .swipe-con{height: 100%;width: 100%;text-align: center;}
.m-dt .pic{display:block;width: 100%;height: 100%;color: #fff;}
.m-dt .pic:before,.m-dt a:before{display: inline-block;content:"";height: 100%;width: 0;vertical-align: middle;}
.m-dt img{display:inline-block;max-width: 100%;max-height: 100%;width:auto;height:auto;vertical-align: middle;background:none;}
.m-dt .slideBtm,.m-dt .slideTp{width:100%;height: 40px;line-height:40px;position: fixed;left:0;background:rgba(55,64,83,.5);overflow:hidden;}
.m-dt .slideBtm{bottom: 0;}
.m-dt .slideTp{top:0;}
.m-dt .slideTp i{-webkit-transform:translate(0px, 0px) translateZ(0px);display:inline-block;width:30px;height:40px;float:left;}
.m-dt .slideTp i::before{position: absolute;left: 10px;top: 50%;margin-top: -4px;content: "";width: 8px;height: 8px;border-width: 2px;overflow: hidden;border-color: transparent transparent #fff #fff;border-style: solid;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-ms-transform: rotate(45deg);transform: rotate(45deg);}
.m-dt .swipe-num,.m-dt .swipe-cmtCount{color: #fff;font-size: 14px;}
.m-dt .swipe-num{font-family:Arial, Helvetica, sans-serif;margin:0 30px;display:block;text-align:center;}
.m-dt .swipe-cmtCount{float:right;width:30px;}
.m-dt .swipe-cmtCount::after{position: absolute;right: 10px;top:50%;margin-top:-7px;content: "";width: 8px;height: 8px;border-width: 2px;overflow: hidden;border-color: transparent transparent #fff #fff;border-style: solid;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
</style>
</head>

<body>
<div class="body" id="Jlazy_img">
	<!-- 广告开始 -->
	<script type="text/javascript" src="http://www.86y.org/js/mobtongji.js"></script>
	<!-- 广告结束 -->
    <div id="JartCon">      
      <p><img alt="愤怒的小鸟" index="1" src="http://p5.image.hiapk.com/uploads/allimg/160523/7730-160523160941.jpg"> </p>
      <p><img alt="愤怒的小鸟" index="2" src="http://p5.image.hiapk.com/uploads/allimg/160523/7730-160523160941-50.jpg"> </p>
	  <p><img alt="愤怒的小鸟" index="3" src="http://p1.image.hiapk.com/uploads/allimg/160523/7730-160523160941-51.jpg"> </p>
	  
    </div>
</div>

<script type="text/javascript" src="http://www.86y.org/js/swipe.extend.1.1-min.js"></script>
<script type="text/javascript" src="http://www.86y.org/js/slide.js"></script>

</body>
</html>

预览地址：http://www.86y.org/demo/mobpic/slide.html 用手机换用谷歌浏览器模拟手机打开此页面才有效

DEMO源文件下载：源代码下载密码: sgdr

上面说到此插件可重复利用，可新建多个slide.js但是记得slide.js里面第二行包含图片的容器要改成你所对应的ID。如果大家对我这个插件有什么看法可以在线留言或QQ联系我。471880721

（完）

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】

如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=741【手机版 js图片浏览插件(附源代码下载)】幸凡学习网

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)