js--手機頭像點擊顯示按鈕的位置自適應
阿新 • • 發佈:2017-09-16
click ul li alert 位置 pic one url 能效 padding
在手機頁面的中,頭像顯示的div,第一行的最後一個為點擊顯示更多的按鈕(more),因為手機寬度的大小不一致,所以每行顯示的頭像個數也不一致,more按鈕的位置總是固定在最後一排,所以需要通過計算屏幕寬度的大小,然後根據每個li的大小算出一行中最多能放幾個,然後在將more通過js插入,如下圖
iPhone5 顯示如下:
iPhone6 顯示如下:
一下貼代碼:
HTML
<div class="pic"> <ul> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li><img src="img/d.png" /></li> <li class="last"></li> </ul> </div>
CSS
.pic{ height: 100px; overflow: hidden; } .pic ul{ padding: 0 20px; } .pic ul li{ width: 60px; height: 60px; margin: 20px 10px 20px 15px; float: left; border-radius: 50%; text-align: center; line-height: 55px; } .pic ul li img { padding: 0; } .pic li.more{ margin-right: 0px; background: url(img/more.png) no-repeat center center; } .pic li.last{ background: url(img/more.png) no-repeat center center; }
js代碼
function loadPage(){ var clientW = $(window).width(); /*===================*/ /*===================*/ /*===================*/ $(".last").hide();//設置最後一個點擊為收起頭像框 //設置.more的位置, 根據不同的寬度設置起位置 /*===================*/ /*===================*/ var lis =$(".pic").find("li").length; //如果所有的li var index = parseInt((clientW-70)/80);//一行能裝多少個, 在此基礎上-1 表示一行中的左後一位置 // alert($(".pic ul")); if(index < lis){ $(".pic").find("li").eq(index-1).before("<li class=‘more‘></li>");//關鍵,精髓所在 } } $(".more").click(function(){//點擊顯示 $(".last").show(); $(".pic").css("overflow", "visible"); $(".pic ul").css("padding-right", "0"); $(this).hide(); }); $(".last").click(function(){//點擊隱藏 $(".pic").css("overflow", "hidden"); $(".more").show(); $(".pic ul").css("padding-right", "20px"); $(this).hide(); });
這個功能效果圖如下
點擊前
點擊後
在點擊就還是隱藏
js--手機頭像點擊顯示按鈕的位置自適應