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

標籤：最大值   方法   on()   text   12px   ges   target   滾動   asc   

　　該組件，主要功能類似於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同事好友朋友們，互相指教，進步！

 

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