-
Notifications
You must be signed in to change notification settings - Fork 126
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
5 changed files
with
264 additions
and
24 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,211 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta name="viewport" content="initial-scale=1, user-scalable=0" charset="UTF-8"> | ||
| <title>swipeSlide</title> | ||
| <style> | ||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| /* 防止点击闪烁 */ | ||
| -webkit-tap-highlight-color:rgba(0,0,0,0); | ||
| /* 缩放网页，文字大小不变 */ | ||
| -webkit-text-size-adjust:none; | ||
| } | ||
| body{ | ||
| font-size: 14px; | ||
| } | ||
| h1{ | ||
| font-size: 16px; | ||
| } | ||
| h2{ | ||
| font-size: 14px; | ||
| } | ||
| h3{ | ||
| height: 30px; | ||
| line-height: 30px; | ||
| padding: 0 10px; | ||
| font-size: 14px; | ||
| } | ||
| .comment{ | ||
| min-width: 320px; | ||
| } | ||
| .comment .item{ | ||
| padding: 10px; | ||
| border-bottom:1px solid #ccc; | ||
| } | ||
| .comment .item:first-child{ | ||
| border-top:1px solid #ccc; | ||
| } | ||
| .comment .item p{ | ||
| line-height: 18px; | ||
| color: #333; | ||
| font-size: 12px; | ||
| } | ||
| .comment .thumbnails:after{ | ||
| content: ""; | ||
| display: table; | ||
| clear: both; | ||
| } | ||
| .comment .thumbnails img{ | ||
| float: left; | ||
| width: 50px; | ||
| height: 50px; | ||
| margin: 10px 10px 0 0; | ||
| border: 1px solid #ccc; | ||
| } | ||
|
|
||
| .slide_box{ | ||
| display: none; | ||
| position: fixed; | ||
| left: 0; | ||
| top: 0; | ||
| z-index: 8; | ||
| width: 100%; | ||
| height: 100%; | ||
| background-color: #fff; | ||
| } | ||
| .slide{ | ||
| position: absolute; | ||
| left: 0; | ||
| top: 50%; | ||
| width:100%; | ||
| max-width: 640px; | ||
| overflow: hidden; | ||
| -webkit-transform:translate(0,-50%); | ||
| transform:translate(0,-50%) | ||
| } | ||
| .slide:after{ | ||
| content: ''; | ||
| display: block; | ||
| width: 100%; | ||
| padding-top: 100%; | ||
| } | ||
| .slide ul{ | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| .slide li{ | ||
| list-style: none; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| } | ||
| /* 解决js阻塞页面显示首屏 */ | ||
| .slide li:first-child{ | ||
| z-index: 1; | ||
| } | ||
| .slide li img{ | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| border: none; | ||
| } | ||
| .btn_close{ | ||
| position: absolute; | ||
| right: 10px; | ||
| top: 10px; | ||
| width: 24px; | ||
| height: 24px; | ||
| line-height: 24px; | ||
| border-radius: 50%; | ||
| font-size: 20px; | ||
| font-family: Arial; | ||
| text-align: center; | ||
| color: #fff; | ||
| background-color: rgba(255,0,0,.5); | ||
| } | ||
| .num_box{ | ||
| position: absolute; | ||
| left: 0; | ||
| bottom: 0; | ||
| width: 100%; | ||
| height: 44px; | ||
| line-height: 44px; | ||
| background-color: #eee; | ||
| text-align: center; | ||
| font-size: 14px; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1><a href="http://ons.me/" target="_blank" title="一个热爱网络的年轻人的博客">西门的后花园</a></h1> | ||
| <h2><a href="http://ons.me/500.html" target="_blank">swipeSlide for Zepto/jQuery Plugin，移动端（基于Zepto/jQuery）的轮播插件</a></h2> | ||
|
|
||
| <h3>用户评价</h3> | ||
| <div class="comment"> | ||
| <div class="item"> | ||
| <p>选了很久选定的，色彩亮丽，无瑕疵，初始激活是机子很烫，持续了一段时间，致电苹果售后咨询，态度很好，说这个现象是正常的，别人也提出过，之后使用就不会出现了。之后使用5天，均未再出现此状况，持续关注。</p> | ||
| <div class="thumbnails"> | ||
| <img src="http://d11.yihaodianimg.com/N06/M0A/14/F2/ChEbu1UaXLeAIgkhAAoO3HXLIFs70100_100x100.jpg" alt=""> | ||
| <img src="http://d10.yihaodianimg.com/N07/M06/0D/BB/ChEbvFUWXNGAWqyLAAEtO6b0wTo28900_100x100.jpg" alt=""> | ||
| <img src="http://d11.yihaodianimg.com/V00/M0B/D6/F4/CgQDsFUtIeqAE4nfAAA4zfW_EGQ80800_100x100.jpg" alt=""> | ||
| </div> | ||
| </div> | ||
| <div class="item"> | ||
| <p>买了一箱很不错啦 很喜欢 还买了10包 这个 奥尔良味道能淡一点 烤肉味道 好吃呢 可喜欢啦 边评论边流口水了。。。</p> | ||
| <div class="thumbnails"> | ||
| <img src="http://d11.yihaodianimg.com/N07/M03/43/7D/ChEbvFUzItKAanahAADnedOSpf828300_100x100.jpg" alt=""> | ||
| <img src="http://d11.yihaodianimg.com/V00/M08/AC/24/CgQDsFUmhhCAMBYvAAGjDtmMdMg04300_100x100.jpg" alt=""> | ||
| <img src="http://d11.yihaodianimg.com/V00/M00/AC/ED/CgQDslTz7tCAS1hBAAITpIw-S4U98700_100x100.jpg" alt=""> | ||
| <img src="http://d10.yihaodianimg.com/V00/M03/40/CA/CgQDsFTIwrWAQJjXAAqRYfotQYM41800_100x100.jpg" alt=""> | ||
| <img src="http://d11.yihaodianimg.com/N06/M02/61/C5/CgQIzVUzItKAGce6AADjzCMGwkM66600_100x100.jpg" alt=""> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="slide_box"> | ||
| <span class="btn_close">×</span> | ||
| <div class="num_box"> | ||
| <span class="num"></span>/<span class="sum"></span> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script src="js/zepto.min.js"></script> | ||
| <!-- <script src="js/jquery.min.js"></script> --> | ||
| <script src="js/swipeSlide.min.js"></script> | ||
| <script> | ||
| $(function(){ | ||
| $('.comment .thumbnails img').on('click',function(){ | ||
| var $this = $(this); | ||
| var _result = ''; | ||
| var _index = $this.index(); | ||
| // 拼接swipeSlide字符串 | ||
| _result += '<div class="slide"><ul>'; | ||
| $this.parents('.thumbnails').find('img').each(function(i){ | ||
| var _src = $(this).attr('src'); | ||
| _result += '<li><img src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="' + _src.substring(0,_src.lastIndexOf('_')) + '_640x640.jpg"></li>'; | ||
| }); | ||
| _result += '</ul></div>'; | ||
| $('.slide_box').show(); | ||
| $('.slide_box').prepend(_result); | ||
|
|
||
| // swipeSlide | ||
| $('.slide').swipeSlide({ | ||
| index : _index, | ||
| continuousScroll : true, | ||
| autoSwipe : false, | ||
| lazyLoad : true, | ||
| callback : function(i,sum){ | ||
| $('.num_box .num').text(i+1); | ||
| $('.num_box .sum').text(sum); | ||
| } | ||
| }); | ||
| }); | ||
|
|
||
| // 关闭按钮 | ||
| $('.btn_close').on('click',function(){ | ||
| $('.slide').remove(); | ||
| $('.slide_box').hide(); | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.