天天看點
傳回

iScroll4插件的使用執行個體

原文網址：http://blog.csdn.net/freshlover/article/details/9790521

iScroll是Matteo Spinelli開發的一個滾動插件，使用原生js編寫，其不依賴與任何js架構。iScroll 4 完全重寫了iScroll這個架構的原始代碼。旨在解決移動webkit系浏覽器的區域滾動問題，相容mobile safari、android預設浏覽器、safari、chrome、firefox5+、opera11+、IE9+及其他webkit核心浏覽器。最新版本為iscroll4。 目前正在開發iscroll5還未釋出。iscroll 4.2版本相容：iPhone/Ipod touch >=3.1.1, iPad >=3.2, Android >=1.6, Desktop Webkit, Firefox, Opera desktop/mobile.

除了舊版本的iScroll的特性以外，iScroll 4還包括如下的特性：

     （1）縮放（Pinch/Zoom）

    （2）拉動重新整理（Pull up/down to refresh）

    （3）速度和性能提升

    （4）精确捕捉元素

    （5）自定義滾動條

最近的項目需要一個iOS頁面，這裡就采用了iScroll4來實作。下面是項目執行個體代碼：

html文檔conlist.html源碼

[html]  view plain copy

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">  
  6. <meta name="apple-mobile-web-app-capable" content="no">  
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  8. <meta name="format-detection" content="telephone=no" >  
  9. <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>  
  10. <script type="text/javascript" src="js/iscroll.js"></script>  
  11. <script type="text/javascript">  
  12. var myScroll,  
  13.     pullDownEl, pullDownOffset,  
  14.     pullUpEl, pullUpOffset,  
  15.     generatedCount = 0,  
  16.     pullcount=0;  
  17. function msgalert(msg, pos){  
  18.     //$('#swrap').css('display','-webkit-box');  
  19.     $(".pull" + pos).css('background-image','none').text(msg);  
  20.     setTimeout(function(){  
  21.         $(".pull" + pos).fadeOut(500);  
  22.     },1000);  
  23. }  
  24. function loadImg(){  
  25.     var transform = $('#scroller').css('transform');  
  26.     var aStr = transform.substring(7,transform.length-1);  
  27.     var aArr = new Array();  
  28.     aArr = aStr.split(',');  
  29.     var aScroll = parseInt(aArr[5]);  
  30.     var $scroller = $('#scroller'),  
  31.         mh = $('#wrapper').height() +50;  
  32.     $scroller.find('img').each(function(){  
  33.         var  i = {  
  34.             obj:this,  
  35.             tag:this.nodeName.toLowerCase,  
  36.             url:$(this).attr('src'),  
  37.             rurl:$(this).attr('dynamic-src'),  
  38.             offsetH:$(this).offset().top   
  39.         }  
  40.         if(!i.url && (i.offsetH<=mh)){  
  41.             $(this).attr('src',i.rurl);  
  42.         }  
  43.     })  
  44. }  
  45. function loadAjax(url,data,callback){  
  46.     $.ajax({  
  47.         url:url,  
  48.         type:'post',  
  49.         dataType:'json',  
  50.         data:data,  
  51.         success:callback,  
  52.         error: function(XMLHttpRequest, textStatus, errorThrown) {  
  53.             //msgalert('伺服器出錯~', 'DownLabel');  
  54.         },  
  55.     })  
  56. }  
  57. function dataProcess(data,html,obj){  
  58.     html = '';  
  59.     for(var i = 0, len = data.comments.length; i < len; i++){  
  60.         li = data.comments[i];  
  61.         html += '<div class="comitem">' +   
  62.                     '<div class="comitem-para">' +   
  63.                         '<div class="para-by"><em>' + li.userName + '</em><span>' + li.commentDate + '</span></div>' +   
  64.                         '<div class="para-con">' + li.content + '</div>' +   
  65.                     '</div>' +   
  66.                 '</div>';               
  67.     }  
  68.     obj.append(html);  
  69.     //loadImg();  
  70. }  
  71. function pullDownAction () {  
  72.     var html = '',$el=$('#thelist');  
  73.     //$('#pullUp').hide();  
  74.     var url = 'http://192.168.4.20:8080/';//上拉重新整理資料  
  75.     var purl = window.location.href;  
  76.     var pIndex = purl.indexOf('aid=');  
  77.     if(pIndex == -1){  
  78.         return;  
  79.     }else{  
  80.         var aid = purl.substring(pIndex+4);  
  81.         var aIndex = aid.indexOf('&');  
  82.         if(aIndex>-1){  
  83.             aid = aid.substring(0,aIndex);  
  84.         }     
  85.     }     
  86.     var posts = {"aid":aid,"start":0};  
  87.     loadAjax(url,posts,function(json){  
  88.         if(json.statuscode == 1){  
  89.             $el.html(html);  
  90.             dataProcess(json,html,$el);  
  91.             pullcount=0;  
  92.         }  
  93.         else if(json.statuscode == 2){  
  94.             msgalert('沒有資料了，已加載完成！', 'DownLabel');  
  95.         }else msgalert('重新整理資料出錯了，請重試~', 'DownLabel');  
  96.         //$('#pullUp').show();  
  97.         myScroll.refresh();  
  98.     })  
  99. }  
  100. function pullUpAction () {  
  101.     var html='',$el = $('#thelist');  
  102.     var purl = window.location.href;  
  103.     var pIndex = purl.indexOf('aid=');  
  104.     if(pIndex == -1){  
  105.         return;  
  106.     }else{  
  107.         var aid = purl.substring(pIndex+4);  
  108.         var aIndex = aid.indexOf('&');  
  109.         if(aIndex>-1){  
  110.             aid = aid.substring(0,aIndex);  
  111.         }  
  112.     }  
  113.     var start = $el.children('.comitem').length,number = 3,  
  114.         data = {start:start,aid:aid};  
  115.         //data = {start:start,number:number,aid:aid};  
  116.     var url = 'http://192.168.4.20:80/<pre name="code" class="html">appweb</pre>';//下拉加載資料loadAjax(url,data,function(json){if(json.statuscode == 2){if(pullcount==0){msgalert('已經全部加載！', 'UpLabel');pullcount =1;}$('#pullUp').hide();}else if(json.statuscode == 1){dataProcess(json,html,$el);}else{msgalert('加載資料出錯了，請重試~', 'UpLabel');//$('#pullUp').hide();}  
  117.  myScroll.refresh();});}function loaded() {pullDownEl = document.getElementById('pullDown');pullDownOffset = pullDownEl.offsetHeight;pullUpEl = document.getElementById('pullUp');pullUpOffset = pullUpEl.offsetHeight;pullDownAction();var documentHeight = document.documentElement.clientHeight  
  118.  + 50;$('#thelist').css('min-height',documentHeight+'px');myScroll = new iScroll('wrapper', {topOffset:pullDownOffset,onRefresh: function () {if (pullDownEl.className.match('loading')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML  
  119.  = '下拉重新整理...';} else if (pullUpEl.className.match('loading')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';}},onScrollMove: function () {if (this.y > 5 && !pullDownEl.className.match('flip')) {pullDownEl.className =  
  120.  'flip';pullDownEl.querySelector('.pullDownLabel').innerHTML = '釋放立即重新整理...';this.minScrollY = 0;} else if (this.y < 5 && pullDownEl.className.match('flip')) {pullDownEl.className = '';pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉重新整理...';this.minScrollY  
  121.  = -pullDownOffset;} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {pullUpEl.className = 'flip';pullUpEl.querySelector('.pullUpLabel').innerHTML = '釋放立即重新整理...';this.maxScrollY = this.maxScrollY;} else if (this.y > (this.maxScrollY  
  122.  + 5) && pullUpEl.className.match('flip')) {pullUpEl.className = '';pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加載更多...';this.maxScrollY = pullUpOffset;}},onScrollEnd: function () {if (pullDownEl.className.match('flip')) {pullDownEl.className = 'loading';pullDownEl.querySelector('.pullDownLabel').innerHTML  
  123.  = 'Loading...';pullDownAction();} else if (pullUpEl.className.match('flip')) {pullUpEl.className = 'loading';pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';pullUpAction();}}});setTimeout(function () { document.getElementById('wrapper').style.left  
  124.  = '0'; }, 800);}document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);</script><link media="all" rel="stylesheet" type="text/css" href="css/css.css"  
  125.  ><link media="all" rel="stylesheet" type="text/css" href="css/iscroll.css" ><title>評論清單頁面</title></head><body><div class="wrapper"><div class="comment clearfix"><div class="combar"><span class="combar-tit">全部評論</span><!--<a class="combar-goto">傳回</a>--></div><div  
  126.  id="wrapper" class="comlist"><div id="scroller"><div id="pullDown"><span class="pullDownIcon"></span><span class="pullDownLabel">下拉重新整理...</span></div><div id="thelist" class="clearfix"><div class="comitem"><div class="comitem-para"><div class="para-by"><em>熱帶小水果</em><span>2013-07-17  
  127.  12:28</span></div><div class="para-con">不饋是TOP10，都是很棒的遊戲，火線追擊好爽啊~~推薦！</div></div></div><div class="comitem"><div class="comitem-para"><div class="para-by"><em>大海啊全都是水</em><span>2013-07-17 12:28</span></div><div class="para-con">跑跑卡丁車的界面操作等與PC版類似，最讓人驚訝的是賽車的操控性和反應度都十分靈敏。對新手，跑跑卡丁車會比其他手機賽車遊戲更難以控制和把握。</div></div></div><div  
  128.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>熱帶小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不饋是TOP10，都是很棒的遊戲，火線追擊好爽啊~~推薦！</div></div></div><div  
  129.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>熱帶小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不饋是TOP10，都是很棒的遊戲，火線追擊好爽啊~~推薦！</div></div></div><div  
  130.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>憤怒的小鳥</em><span>2013-07-17 12:28</span></div><div class="para-con">憤怒的小鳥憤怒的小鳥憤怒的小鳥憤怒的小鳥憤怒的小鳥~~推薦！</div></div></div><div  
  131.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>玩機寶典</em><span>2013-07-17 12:28</span></div><div class="para-con">玩機寶典玩機寶典玩機寶典玩機寶典玩機寶典玩機寶典~~推薦！</div></div></div><div  
  132.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>熱帶小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不饋是TOP10，都是很棒的遊戲，火線追擊好爽啊~~推薦！</div></div></div><div  
  133.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>大海啊全都是水</em><span>2013-07-17 12:28</span></div><div class="para-con">跑跑卡丁車的界面操作等與PC版類似，最讓人驚訝的是賽車的操控性和反應度都十分靈敏。對新手，跑跑卡丁車會比其他手機賽車遊戲更難以控制和把握。</div></div></div><div  
  134.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>熱帶小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不饋是TOP10，都是很棒的遊戲，火線追擊好爽啊~~推薦！</div></div></div><div  
  135.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>熱帶小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不饋是TOP10，都是很棒的遊戲，火線追擊好爽啊~~推薦！</div></div></div><div  
  136.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>憤怒的小鳥</em><span>2013-07-17 12:28</span></div><div class="para-con">憤怒的小鳥憤怒的小鳥憤怒的小鳥憤怒的小鳥憤怒的小鳥~~推薦！</div></div></div><div  
  137.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>玩機寶典</em><span>2013-07-17 12:28</span></div><div class="para-con">玩機寶典玩機寶典玩機寶典玩機寶典玩機寶典玩機寶典~~推薦！</div></div></div><div  
  138.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>憤怒的小鳥</em><span>2013-07-17 12:28</span></div><div class="para-con">憤怒的小鳥憤怒的小鳥憤怒的小鳥憤怒的小鳥憤怒的小鳥~~推薦！</div></div></div><div  
  139.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>玩機寶典</em><span>2013-07-17 12:28</span></div><div class="para-con">玩機寶典玩機寶典玩機寶典玩機寶典玩機寶典玩機寶典~~推薦！</div></div></div><div  
  140.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>大海啊全都是水</em><span>2013-07-17 12:28</span></div><div class="para-con">跑跑卡丁車的界面操作等與PC版類似，最讓人驚訝的是賽車的操控性和反應度都十分靈敏。對新手，跑跑卡丁車會比其他手機賽車遊戲更難以控制和把握。</div></div></div><div  
  141.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>熱帶小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不饋是TOP10，都是很棒的遊戲，火線追擊好爽啊~~推薦！</div></div></div><div  
  142.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>熱帶小水果</em><span>2013-07-17 12:28</span></div><div class="para-con">不饋是TOP10，都是很棒的遊戲，火線追擊好爽啊~~推薦！</div></div></div><div  
  143.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>憤怒的小鳥</em><span>2013-07-17 12:28</span></div><div class="para-con">憤怒的小鳥憤怒的小鳥憤怒的小鳥憤怒的小鳥憤怒的小鳥~~推薦！</div></div></div><div  
  144.  class="comitem"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>玩機寶典</em><span>2013-07-17 12:28</span></div><div class="para-con">玩機寶典玩機寶典玩機寶典玩機寶典玩機寶典玩機寶典~~推薦！</div></div></div><div  
  145.  class="comitem border-btnone"><!--<div class="comitem-pic"><img src="images/portrait.png" alt="這裡是人物昵稱"></div>--><div class="comitem-para"><div class="para-by"><em>大海啊全都是水</em><span>2013-07-17 12:28</span></div><div class="para-con">跑跑卡丁車的界面操作等與PC版類似，最讓人驚訝的是賽車的操控性和反應度都十分靈敏。對新手，跑跑卡丁車會比其他手機賽車遊戲更難以控制和把握。</div></div></div></div><div  
  146.  id="pullUp"><span class="pullUpIcon"></span><span class="pullUpLabel">上拉加載更多...</span></div></div></div><div class="fixbar"><div><div class="fixstretch"></div><a href="http://game.feiliu.com/qianghaoqi/pages/article.html" class="btn ret"><b></b></a><a href="http://game.feiliu.com/qianghaoqi/wansha.php?m=2&pid=1157&plat=ios"  
  147.  class="btn reply"><b></b></a></div></div></div></div></body></html>  
  148. <pre></pre>  
  149. <br>  
  150. 對應CSS檔案css.css：  
  151. <p></p>  
  152. <p></p>  
  153. <pre name="code" class="css">@charset "utf-8";  
  154. html,body,div,h1,h2,h3,h4,h5,h6,p,span,em,cite,del,a,img,ul,li,ol,button,input,textarea,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;}  
  155. table{border-collapse:collapse;border-spacing:0;}  
  156. fieldset,img{border:0;}  
  157. ol,ul{list-style:none;}  
  158. body{font:12px/1.5 Arial,Verdana,Lucida,Helvetica,simsun,sans-serif;text-align:left;color:#000;}  
  159. h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}  
  160. em{font-style:normal;}  
  161. input{font-size:12px; color:#000;outer:none;outline:none;}  
  162. table{border-collapse:collapse;border-spacing:0;border:0 none;}  
  163. a{cursor:pointer;text-decoration:none;outline:none;color:#000;-webkit-transition:all .2s linear;transition:all .2s linear;-moz-transition:all .2s linear;-ms-transition:all .2s linear;-o-transition:all .2s linear;transition:all .2s linear;}  
  164. button{cursor:pointer;}  
  165. a:hover{text-decoration:underline;color:#000;}  
  166. input, select, form img, button,label,textarea{font-size:12px;vertical-align:middle; font-family:Tahoma;color:#000;}  
  167. a.untransition{-webkit-transition:none;transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}  
  168. .clearfix{zoom:1;}  
  169. .clearfix:after{content:"";display:block;height:0;line-height:0;clear:both;visibility:hidden;}  
  170. body{  
  171.     font:14px/1.5 'Apple LiGothic Medium','Apple LiSung Light', 'Times New Roman', Times;  
  172.     color: #333;  
  173. }  
  174. .wrapper {  
  175.     width:100%;  
  176.     margin:0 auto;  
  177. }  
  178. .content{  
  179.     padding:25px 15px 10px;  
  180. }  
  181. .wrapper .tit{  
  182.     text-align:center;  
  183.     font-weight:900;  
  184.     font-size:18px;  
  185.     margin:10px auto;  
  186. }  
  187. .wrapper .subtit{  
  188.     color:#787878;  
  189.     font-size:12px;  
  190.     text-align:center;  
  191.     margin:10px auto;  
  192. }  
  193. .wrapper .subtit span{  
  194.     margin-right:10px;  
  195. }  
  196. .wrapper p{  
  197.     padding:5px 0;  
  198.     text-indent:2em;  
  199.     color:#333;  
  200. }  
  201. .wrapper p.img{  
  202.     text-align:center;  
  203.     margin:0 auto;  
  204.     text-indent:0;  
  205. }  
  206. .wrapper .img img{  
  207.     width:240px;  
  208.     height:160px;     
  209. }  
  210. .content .inner{  
  211.     overflow:hidden;  
  212.     height:480px;  
  213. }  
  214. .content .card{  
  215.     background:#f3f3f3;  
  216.     position:relative;  
  217.     padding:10px 0;  
  218.     margin:5px auto;  
  219. }  
  220. .content .card .moreabout{  
  221.     position:absolute;  
  222.     left:0;  
  223.     top:0;  
  224.     right:0;  
  225.     bottom:0;  
  226. }  
  227. .content .flag{  
  228.     position:absolute;  
  229.     top:-8px;  
  230.     left:5px;  
  231.     background:url("../images/clip.png") no-repeat scroll 0 0 transparent;  
  232.     width:17px;  
  233.     height:19px;  
  234.     background-size: 17px 19px;  
  235. }  
  236. .content .icon{  
  237.     position:absolute;  
  238.     top:10px;  
  239.     left:20px;  
  240. }  
  241. .content .icon,.content .icon img{  
  242.     width:72px;  
  243.     height:72px;  
  244.     overflow:hidden;  
  245. }  
  246. .content .info{  
  247.     padding-left:100px;  
  248.     min-height:72px;  
  249. }  
  250. .info .card-tit{  
  251.     color:#333;  
  252.     padding:5px 0;  
  253.     font-size:15px;  
  254. }  
  255. .info .card-detail{  
  256.     color:#666;  
  257.     line-height:1.5;  
  258.     padding-right:5px;  
  259.     font-size:12px;  
  260. }  
  261. .info .card-detail span{  
  262.     margin-right:10px;  
  263.     word-wrap:break-word;  
  264.     word-break:break-all;  
  265. }  
  266. .content .toggle{  
  267.     color:#999;  
  268.     text-align:center;  
  269.     width:100%;  
  270.     margin:10px auto;  
  271.     font-size:12px;  
  272. }  
  273. .toggle i{  
  274.     width:20%;  
  275.     border-top:1px solid #e4e4e4;  
  276.     display:inline-block;  
  277.     margin:0 15px ;  
  278.     vertical-align:middle;  
  279. }  
  280. .comment{  
  281.     margin-bottom:10px;  
  282. }  
  283. .comment .combar{  
  284.     height:25px;  
  285.     line-height:25px;  
  286.     border-bottom:2px solid #efefef;  
  287.     position:absolute;  
  288.     left:0;  
  289.     top:0;  
  290.     width:100%;  
  291.     z-index:2;  
  292. }  
  293. .combar span, .combar a{  
  294.     font-weight:900;  
  295.     letter-spacing:1px;  
  296.     font-size:13px;  
  297.     padding:0 5px;  
  298. }  
  299. .combar .combar-tit{  
  300.     position:absolute;  
  301.     left:15px;  
  302.     color:#333;  
  303.     border-bottom:2px solid #ce0000;  
  304.     outline:none;  
  305. }  
  306. .combar .combar-togg{  
  307.     position:absolute;  
  308.     right:0;  
  309.     background:url("../images/tog.png") no-repeat scroll 0 0 transparent;  
  310.     height:25px;  
  311.     width:76px;  
  312.     background-size:76px 25px;  
  313. }  
  314. .combar .combar-goto{  
  315.     position:absolute;  
  316.     right:0;  
  317.     background:#ce0000;  
  318.     padding:0 15px;  
  319.     height:25px;  
  320.     line-height:25px;  
  321.     color:#fff;  
  322. }  
  323. .combar-togg > *{  
  324.     display:inline-block;  
  325. }  
  326. .combar-togg span{  
  327.     color:#fff;   
  328. }  
  329. .combar-togg b{  
  330.     width:23px;  
  331.     height:23px;  
  332.     background:url("../images/bg.png") no-repeat scroll -5px -58px transparent;  
  333. }  
  334. .combar-togg i{  
  335.     width:14px;  
  336.     height:14px;  
  337.     background:url("../images/bg.png") no-repeat scroll -5px -102px transparent;  
  338. }  
  339. .comlist{  
  340.     margin:5px auto;  
  341. }  
  342. .comitem{  
  343.     position:relative;  
  344.     //float:left;  
  345.     //width:100%;  
  346.     border-bottom:1px solid #eee;  
  347.     min-height:40px;  
  348.     padding:5px 10px;  
  349.     //background-color:#FAFAFA;  
  350. }  
  351. .comitem .comitem-pic{  
  352.     width:40px;  
  353.     height:40px;  
  354.     margin:5px 10px 5px 0px;  
  355.     overflow:hidden;  
  356.     float:left;  
  357.     display:inline-block;  
  358. }  
  359. .comitem-pic img{  
  360.     width:40px;  
  361.     height:40px;  
  362. }  
  363. .comitem .comitem-para{  
  364.     display:inline-block;  
  365.     width:100%;  
  366. }  
  367. .comitem .para-by{  
  368.     color:#999;  
  369.     font-size:12px;  
  370.     padding:2px 0;  
  371. }  
  372. .comitem .para-by em{  
  373.     margin-right:20px;  
  374. }  
  375. .comitem .para-con{  
  376.     color:#444;  
  377.     font-size:14px;  
  378. }  
  379. .border-btnone{  
  380.     border-bottom:0;  
  381. }  
  382. .fixbar{  
  383.     position:absolute;  
  384.     bottom:0;  
  385.     left:0;  
  386.     height:50px;  
  387.     width:100%;  
  388.     z-index:2;  
  389. }  
  390. .fixbar > div{  
  391.     padding:0 10px;  
  392. }  
  393. .fixbar .fixstretch{  
  394.     position:absolute;  
  395.     left:0;  
  396.     right:0;  
  397.     top:0;  
  398.     bottom:0;  
  399.     background-image:-moz-linear-gradient(center top , #fff, #343434);  
  400.     background-image:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fff),color-stop(1,#343434));  
  401.     background-image:-o-linear-gradient(top, #fff, #343434);  
  402.     opacity:0.3;  
  403. }  
  404. .fixbar a{  
  405.     display:block;  
  406.     width:40px;  
  407.     height:40px;  
  408.     background-color:#7f7f7f;  
  409.     border-radius:25px;  
  410.     position:absolute;  
  411.     top:0;  
  412.     cursor:pointer;  
  413.     outline:none;  
  414. }  
  415. .fixbar a b{  
  416.     display:block;  
  417.     width:40px;  
  418.     height:40px;  
  419. }  
  420. .fixbar a.ret{  
  421.     left:15px;  
  422. }  
  423. .fixbar a.reply{  
  424.     right:30px;  
  425. }  
  426. .fixbar a.ret b{  
  427.     background:url("../images/back.png") no-repeat scroll center center transparent;  
  428.     background-size:16px 16px;  
  429. }  
  430. .fixbar a.reply b{  
  431.     background:url("../images/edit.png") no-repeat scroll center center transparent;  
  432.     background-size:16px 16px;  
  433. }  
  434. </pre><br>  
  435. <br>  
  436. <p></p>  
phone前端開發 滾動插件 iscroll
上一篇: iscroll 移動端向上滑不動
下一篇: AWS IoT 物聯網裝置 - 即時部署 JITP 實戰

繼續閱讀