<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>朋友圈</title>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="css/iconfont.css">
<link rel="stylesheet prefetch" href="css/photoswipe.css">
<link rel="stylesheet prefetch" href="css/default-skin/default-skin.css">
</head>
<body style="background-color: #fff;">
<div id="_contain">
<div class="banner" style="position: relative;">
<div class="top_bg"></div>
<div style="width:80px; height:80px;position: absolute;background-color: #F3F3F7;right: 10px;bottom: -30px;">
<img src="img/tx.jpg" style="width:96%; margin: 2%;">
</div>
<div style="position: absolute;right: 100px;bottom: 10px;color: white;">
在路上的愚人
</div>
</div>
<div class="contain" style="margin: 40px 0 0;">
<ul>
<li>
<div class="body">
<div class="logo">
<img src="img/tx2.jpg">
</div>
<div class="text">
<div class="title">小黄人</div>
<div class="txt">在宇宙中未知的地方有一个由12个人类殖民地组成的星际国家，人类为了方便制造了Cylons（机器人）为人类服务，但Cylons起来反抗人类，双方在血战之后停火，Cylons离开了殖民地去建立自己的家园。40年的和平让<span id="p1">...</span><span id="txt1" style="display:none;">人类放松了警惕，Cylons通过人类内部的间谍瘫痪了人类的防御系统，摧毁了Battlestar舰队，用核武器将殖民地的城市化为灰烬。Battlestar Galactica是唯一一艘幸存的航母，它在舰长Adama的指挥下带领几十艘各式各样的民船和近5万名幸存者逃离了殖民地的行星系统，开始了寻找人类的第13个殖民地——地球——的旅程。</span></div>
<div style="color: #88B1C5;" onclick="more(this,'1')">全文</div>
<div class="my-gallery" data-pswp-uid="1">
<figure><span>
<a href="img/m3.jpg" data-size="670x712">
<img style="width:80%;" src="img/th1.jpg">
</a></span>
</figure>
</div>
<div class="tm">
<div class="fl">1分钟前</div>
<div class="fr">评论</div>
</div>
<div class="cmt">
<div class="fav line"><i class="iconfont"></i>小豪,李小爱</div>
<div><span>小豪：</span>什么</div>
<div><span>淘淘：</span>I use owl carousel to generate a slider, but at the same time I want to use Photoswipe, but I can't. When I use the Owl carousel plugin, the slider's inserted into the code with a speciel markup, where each item (image) has a class of .item and the image is located 3 layers deep into that div.</div>
</div>
</div>
</div>
</li>
<li>
<div class="body">
<div class="logo"><img src="img/tx3.jpg"></div>
<div class="text">
<div class="title">小清新</div>
<div class="txt">买了一个更帅的电饭锅，可以手机远程操制的，开心</div>
<!--data-pswp-uid 是每个gallery的id不能重复-->
<div class="my-gallery" data-pswp-uid="2">
<figure>
<div><a href="img/s5.jpg" data-size="286x220"><img style="height:100%;" src="img/s5.jpg"></a></div>
<figcaption style="display:none;">在这里可增加图片描述</figcaption>
</figure>
<figure>
<div><a href="img/sb1.jpg" data-size="640x426"><img style="height:100%;" src="img/sb1.jpg"></a></div>
<figcaption style="display:none;">在这里可增加图片描述2</figcaption>
</figure>
<figure>
<div><a href="img/sb3.jpg" data-size="768x1024"><img style="width:100%;" src="img/sb3.jpg"></a></div>
<figcaption style="display:none;">在这里可增加图片描述3</figcaption>
</figure>
<figure>
<div><a href="img/sb4.jpg" data-size="900x596"><img style="height:100%;" src="img/sb4.jpg"></a></div>
<figcaption style="display:none;">在这里可增加图片描述4</figcaption>
</figure>
<figure>
<div><a href="img/y1.jpeg" data-size="1200x1200"><img style="height:100%;" src="img/y1.jpeg"></a></div>
<figcaption style="display:none;">在这里可增加图片描述5在这里可增加图片描述5在这里可增加图片描述5</figcaption>
</figure>
</div>
<div class="tm">
<div class="fl">2分钟前</div>
<div class="fr">评论</div>
</div>
<div class="cmt">
<div class="fav"><i class="iconfont"></i>ANTHONY,☆Sanly☆</div>
<div><span>ANTHONY：</span>这么先进，和我家的那台一样，打个电话，照样有饭吃，一键式，还带做菜功能，还能洗碗聊天晾衣服</div>
<div><span>☆Sanly☆:</span>远程？还有洗米放水功能？</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don't modify these 3 pswp__item elements, data is added later on. -->
<div class="pswp__container">
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<div class="pswp__counter"></div>
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
<button class="pswp__button pswp__button--share" title="Share"></button>
<button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>
<button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
<!-- element will get class pswp__preloader--active when preloader is running -->
<div class="pswp__preloader">
<div class="pswp__preloader__icn">
<div class="pswp__preloader__cut">
<div class="pswp__preloader__donut"></div>
</div>
</div>
</div>
</div>
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<div class="pswp__share-tooltip"></div>
</div>
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
</button>
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
</button>
<div class="pswp__caption">
<div class="pswp__caption__center"></div>
</div>
</div>
</div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script src="js/photoswipe.js"></script>
<script src="js/photoswipe-ui-default.min.js"></script>
<script type="text/javascript">
var initPhotoSwipeFromDOM = function(gallerySelector) {
// 解析来自DOM元素幻灯片数据（URL，标题�
html仿微信朋友圈页面实现图片放大.zip （32个子文件） 
html仿微信朋友圈页面实现突破放大 css 
photoswipe.css 4KB iconfont.eot 45KB iconfont.ttf 45KB
iconfont.svg 74KB default-skin 
default-skin.png 547B default-skin.svg 2KB default-skin.css 11KB
preloader.gif 866B iconfont.woff 29KB demo.css 2KB iconfont.css 5KB img 
QQ截图20160417220145.jpg 132KB th1.jpg 13KB QQ截图20160417220027.jpg 146KB QQ截图20160417220111.jpg 72KB sb1.jpg 115KB m3.jpg 63KB sb3.jpg 87KB tx2.jpg 7KB sb4.jpg 127KB bg.jpeg 202KB QQ截图20160417220046.jpg 76KB y1.jpeg 153KB tx.jpg 25KB s5.jpg 8KB tx3.jpg 6KB
index.html 15KB js jquery.min.js 82KB photoswipe.min.js 31KB photoswipe-ui-default.min.js 10KB photoswipe.js 91KB demo.js 10KB资源评论
