js高仿QQ消息列表左滑功能

　　該組件，主要功能類似於QQ消息列表左滑出現刪除、標為已讀等按鈕的功能；現在的版本用的是純javaScript編寫；后續會跟進 angularJs 開發的類似組件以及jquery的;

下面，就讓我們來認識下怎么使用該程序；

　　在該程序里，總共分為四個文件：

　　1 .css文件夾

　　2. img 圖片文件夾

　　3. js文件

　　4. index.html  主頁面；

　　稍后，你可以自行下載，打開運行觀看效果；

　　

二、代碼講解

1.此html結構，為不可修改結構

<ul class="list-ul">

　　<!--an-slide-li 此樣式必須添加在li標簽上，為js程序判斷是否選中的是要操作的dom元素所用-->
　　<li class="list-li an-slide-li">

　　　　<!--z-index-up(z-index:層級最高，且覆蓋整個li):對應的dom元素，是為了在觸發touchStart事件事，可以選中整個li-->
　　　　<div class="z-index-up" onClick="change('新浪博客')"></div>
　　　　<div>
　　　　　　<div class="list-img">
　　　　　　　　<div>
　　　　　　　　　　<img src="img/Tulips.jpg" />
　　　　　　　　</div>
　　　　　　</div>
　　　　　　<div class="list-contant">
　　　　　　　　<div class="list-contant-title"><label>微博已開通</label></div>
　　　　　　　　<div class="list-contant-text"><label>第一個，我要發博客</label></div>
　　　　　　</div>
　　　　　　<div class="list-time-message">
　　　　　　　　<div class="list-time"><span>10:18</span></div>
　　　　　　　　<div class="list-message"></div>
　　　　　　</div>
　　　　</div>
　　　　<div class="btn" onClick="del('1')">
　　　　　　<div>
　　　　　　　　刪除
　　　　　　</div>
　　　　</div>
　　</li>

</ul>

 

2. js代碼講解；

　　注：該程序主要使用js的三個事件touchstart(手指觸摸事件)、startmove(手指移動)、startend(手指離開屏幕)

　　　　請認真閱讀以下代碼，你會對這三個事件有一個新的認識；讓我們一起嗨起來吧！

 

//在全局運行此程序

window.addEventListener("load", autoLoad, false);
function autoLoad() { var initX; //觸摸位置 var initY; var moveX; //滑動時的位置 var moveY; var X = 0; //移動距離 var Y = 0; //y軸移動距離 var objX, sildeWidth = 0; //目標對象位置、功能按鈕width(如刪除) //yesClick:是否可以點擊列表進行下一步操作; xSilde,ySilde 默認xSilde都為true(做上下 ， 左右滑動控制) var yesClick, xSilde = true, ySilde = true, xThink = '1'; window.sessionStorage.setItem("xThink", xThink); //初始化xThink //開始執行程序 window.addEventListener('touchstart', touchStart, false); /*手指觸屏時的方法*/ function touchStart(event) { //通過設置的 an-z-index-up 對應dom（目的：可以選中整個li元素） ，獲取父元素li () var obj = event.target.parentNode; //獲取所有的li元素 var mainLi = document.querySelectorAll(".an-slide-li"); /*當點擊的是功能按鈕的話，初始化xThink、anObjX*/ if (event.target.className.indexOf("an-function-button") != -1) { window.sessionStorage.setItem("xThink", '1'); //初始化xThink window.sessionStorage.setItem("anObjX", '0'); } /* *btnStyle: 獲取功能按鈕，判斷一共添加了幾個按鈕 *btnStyleLength： btnStyle 長度 *setWidth ：btnStyle 按鈕寬度 */ var btnStyle, btnStyleLength, setWidth; sildeWidth = 5; //設置默認狀態下點擊列表可進行下一步 yesClick = true; /*判斷如果最終的值小於0 ， 關閉已經出現的動畫；禁止li點擊事件（此值在end方法中會被重新賦值，再作判斷）*/ var anObjX = window.sessionStorage.getItem("anObjX"); if (anObjX == null) { anObjX = 0; } if (anObjX < 0) { event.preventDefault(); for (var i = 0; i < mainLi.length; i++) { mainLi[i].style.transition = "transform 0.1s"; //延緩動畫效果 mainLi[i].style.transform = "translateX(0rem)"; mainLi[i].style.WebkitTition = "transform 0.1s"; //延緩動畫效果 mainLi[i].style.WebkitTransform = "translateX(0rem)"; } yesClick = false; event.stopPropagation(); //事件冒泡，禁止上下滑動；  } /*判斷是否點中刪除按鈕*/ if (event.target.parentNode.className === "btn") { event.target.parentNode.onclick(); } /*判斷手指所在的區域為指定li*/ if (obj.className.indexOf("an-slide-li") != -1) { initX = event.targetTouches[0].pageX; //獲取手指觸摸x值 initY = event.targetTouches[0].pageY; //獲取手指觸摸y值 objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1; //獲取WebkitTransform 值； //自動添加 動畫樣式 if (!objX) { for (var i = 0; i < mainLi.length; i++) { mainLi[i].style.transition = "transform 0.1s"; //延緩動畫效果 mainLi[i].style.transform = "translateX(0rem)"; mainLi[i].style.WebkitTition = "transform 0.1s"; //延緩動畫效果 mainLi[i].style.WebkitTransform = "translateX(0rem)"; objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1; //獲取WebkitTransform 值；  } } } /*當=0時，執行touchMove命令*/ //console.log(); if (objX == 0) { obj.addEventListener('touchmove', touchMove, false); } obj.addEventListener('touchend', touchEnd, false); } //手指滑動方法 function touchMove(event) { //event.preventDefault(); /*xThink : 控制當出現動畫時（X的最大值），點擊其他任何地方動畫消失， *或繼續向左滑動，xThink='0',禁止touchMove事件， *觸發end事件，則恢復原狀xThink='1' */ xThink = window.sessionStorage.getItem("xThink"); var obj = event.target.parentNode; yesClick = false; //滑動時，點擊li效果失效 //判斷是否選中的是li if (obj.className.indexOf("an-slide-li") != -1) { //&&xThink == '1' moveX = event.targetTouches[0].pageX; //獲取移動后的最終X值 moveY = event.targetTouches[0].pageY; //獲取移動后的最終Y值 X = (moveX - initX) / 100; //變化中的X值; Y = (moveY - initY) / 100; //變化中的Y值; //判斷x軸是否可以滑動 if (xSilde) { //如果X軸的變化值大於等於0，WebkitTransform = 0；不進行動畫效果，否則，執行 if (X >= 0 || xThink == '0') { obj.style.WebkitTransform = "translateX(" + 0 + "rem)"; } else if (X < 0) { event.preventDefault(); //禁止默認滾動事件 var l = Math.abs(X); //取絕對值X obj.style.WebkitTransform = "translateX(" + -l + "rem)"; //實現滑動效果，刪除按鈕出現 //判斷是否已經超出設置值 if (l > sildeWidth) { l = sildeWidth; obj.style.WebkitTransform = "translateX(" + -l + "rem)"; } } //判斷X值如果大於15 ， 區分左右滑動還是上下滑動 if (Math.abs(X) >= 0.15) { Y = 0; //禁止上下滑動 ySilde = false; //禁止上下滑動 //yThink = false;//禁止上下滑動 event.preventDefault(); //禁止上下滑動  } } /*如果出現向左滑動動畫，則在手指離開屏幕之前，不可以上下滾動*/ if (ySilde) { //判斷y軸是否可以滑動 if (Math.abs(Y) >= 0.15) { X = 0; //禁止 左右 滑動 obj.style.WebkitTransform = "translateX(" + 0 + "rem)"; xSilde = false; //禁止 左右 滑動 //event.preventDefault();  } } } } /*手指離開屏幕方法*/ function touchEnd(event) { event.preventDefault(); var obj = event.target.parentNode; xSilde = true; ySilde = true; if (obj.className.indexOf("an-slide-li") != -1) { objX = (obj.style.WebkitTransform.replace(/translateX\(/g, "").replace(/rem\)/g, "")) * 1; //放開手時，判斷objX最終值，如果大於按鈕中間值，則使按鈕恢復隱藏狀態；反之； if (objX > -(sildeWidth / 4)) { obj.style.WebkitTransform = "translateX(" + 0 + "rem)"; objX = 0; xThink = '1'; window.sessionStorage.setItem("xThink", xThink); window.sessionStorage.setItem("anObjX", objX); //yesClick = true; } else { obj.style.WebkitTransform = "translateX(" + -sildeWidth + "rem)"; objX = -sildeWidth; window.sessionStorage.setItem("anObjX", objX); yesClick = false; //禁止點擊li事件 xThink = '0'; window.sessionStorage.setItem("xThink", xThink); } } sildeWidth = 0; //點擊li后需要執行的方法 if (event.target.className === "an-z-index-up" && yesClick) { // scope.goClick(); window.sessionStorage.setItem("anObjX", '0'); } } }

 

3.style  /  css

* {
    padding:0;
    margin:0;
    list-style:none;
}
body {
    background:#FFFFF0;
}
header {
    width:100%;
    background:#00CED1;
    border-bottom:1px solid #ccc;
    position:fixed;
    top:0;
    left:0;
    z-index:1;
}
header h2 {
    text-align:center;
    line-height:4rem;
    font-size:16px;
    color:#fff
}
.list {
    padding-top:4.1rem;
}
.list-ul {
    top:5px;
    overflow:hidden;
}
.list-li {
    height:3.8rem;
    /*width:100%;
    */
line-height:3.8rem;
    border-bottom:1px solid #dcd6d6;
    position:relative;
    padding:0 8px;
    color:#666;
    background:#FFFFF0;
    -webkit-transform:translateX(0px);
    transition:transform 0.2s;
    -webkit-transition:transform 0.2s;
    /*3d加速*/
webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}
.z-index-up {
    z-index:9999;
    width:100%;
    height:3.8rem;
    padding:0;
    position:absolute;
    /* background:red;
    */
}
/* 頭像 */
.list-li .list-img {
    float:left;
    width:15%;
    padding-top:.49rem;
}
.list-li .list-img div {
    width:2.8rem;
    height:2.8rem;
    padding-left:.2rem;
    /*background:url("../img/Tulips.jpg") no-repeat center;
    */
/*border:0;
    */
/*border-radius:50%;
    */
}
.list-li .list-img div img {
    width:2.8rem;
    height:2.8rem;
    border-radius:50%;
}
/* 文字內容 */
.list-li .list-contant {
    float:left;
    width:65%;
    padding-top:0.25rem;
    padding-left:.4rem;
}
.list-li .list-contant .list-contant-title {
    height:1.7rem;
    line-height:2rem;
}
.list-li .list-contant .list-contant-title label {
    font-size:14px;
    font-weight:bold;
}
.list-li .list-contant .list-contant-text {
    height:1.7rem;
    line-height:1.3rem;
}
.list-li .list-contant .list-contant-text label {
    font-size:12px;
}
/* 時間 消息提醒 */
.list-time-message {
    float:left;
    width:16%;
    padding-top:0.25rem;
    padding-left:.46rem;
}
.list-time-message .list-time {
    float:left;
    height:1.7rem;
    width:100%;
    line-height:1.7rem;
    font-size:10px;
    text-align:right;
}
.list-time-message .list-time span {
    padding-right:.8rem;
}
.list-time-message .list-message {
    float:left;
    /* height:1.7rem;
    line-height:1.7rem;
    */
}
/* 按鈕 */
.btn {
    position:absolute;
    top:0;
    right:-80px;
    text-align:center;
    background:#FF0000;
    border-bottom:1px solid #FF0000;
    color:#fff;
    width:80px;
    height:3.8rem;
    line-height:3.8rem;
}
.btn div {
    /*padding-right:.6rem;
    */
}
/* 提示框 */
.contant-prompt {
    width:100%;
    text-align:center;
    z-index:1;
    opacity:0.9;
    display:none;
}
.contant-prompt .prompt {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:2rem;
    text-align:center;
    font-size:12px;
    line-height:2rem;
    background:#777171;
    /* border-radius:8%;
    */
}
.contant-prompt .prompt div {
    color:#fff;
    font-weight:700;
    padding-left:.3rem;
    padding-right:.3rem;
}

 

 

最后，歡迎IT同事好友朋友們，互相指教，進步！