仿微信朋友圈页面图片可放大资源-CSDN文库

共32个文件

jpg：13个

js：5个

css：4个

朋友圈,微信

需积分: 16 160 浏览量 2018-04-24 17:56:14 上传评论收藏 1.36MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

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

jquery.min.js 82KB

photoswipe.min.js 31KB

photoswipe-ui-default.min.js 10KB

photoswipe.js 91KB

demo.js 10KB

<!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>  <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>  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">  <div class="pswp__bg"></div>  <div class="pswp__scroll-wrap">  <div class="pswp__container"> <div class="pswp__item"></div> <div class="pswp__item"></div> <div class="pswp__item"></div> </div>  <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar">  <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>  <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，标题�

评论收藏

内容反馈