移動(dòng)端長(zhǎng)按刪除

xl.gif
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>我的頻道2</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <meta name="keywords" content=""/>
        <meta name="description" content=""/>
        <meta name="renderer" content="webkit"><!-- 啟用360瀏覽器的極速模式(webkit) -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 避免IE使用兼容模式 -->
        <meta http-equiv="Cache-Control" content="no-siteapp" /><!--  百度禁止轉(zhuǎn)碼。--> 
        <meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略頁(yè)面中的數(shù)字識(shí)別為電話伊群，忽略email識(shí)別 -->
        <link rel="stylesheet" href="css/flexible.debug.css" />
        <link rel="stylesheet" href="css/bulk.css" />
      <link rel="stylesheet" href="css/csshake.css" />
      <!-- <link rel="stylesheet"  /> -->
    </head>
    <body>
  <style>
    html{height: 100%;}
    body{height: 100%;background: #F1F1F1;}
  </style>
       <script type="text/javascript" src="js/flexible.js" ></script>
    <script type="text/javascript" src="js/zepto.min.js" ></script>
      <script type="text/javascript" src="https://www.w555555.com/template/default/distribution/layer_mobile/layer.js"></script>
       <div class="gary-bg-divv">
           <div class="channel-title">
               ![](image/img/feic1-r1.png)
                     我的頻道  
                ![](image/img/feic1-z1.png)
           </div>
           <div class="channer-ul-box">
               <ul class="my-channel-ul channel-ul">
                    <li class="pd01 leng" skip="https://www.w555555.com/mobile/16-0-0-1.html">
                    <div>
                      ![](image/img/feic1-16.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>批發(fā)商城</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd02 leng" skip="https://www.w555555.com/mobile/21-0-0-1.html">
                    <div>
                      ![](image/img/feic1-35.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>生日禮物</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd03 leng" skip="https://www.w555555.com/mobile/21-0-0-1.html">
                    <div>
                      ![](image/img/feic1-34.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>十元包郵</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd04 leng" skip="https://www.w555555.com/mobile/21-0-0-1.html">
                    <div>
                      ![](image/img/feic1-21.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>禮品資訊</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                </ul>
            </div>
           <div class="channel-title">
               ![](image/img/feic1-r1.png)
                     主頻道  
                ![](image/img/feic1-z1.png)
           </div>
           <div class="channer-ul-box">
               <ul class="other-channel-ul channel-ul">
                    <li class="pd05 leng" skip="https://www.w555555.com/mobile/5-0-0-1.html">
                      <div>
                        ![](image/img/feic1-5.png)
                        <span class="del shake shake-little shake-constant" ></span>
                        <span>供應(yīng)</span>
                        <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd06 leng" skip="https://www.w555555.com/mobile/6-0-0-1.html">
                    <div>
                      ![](image/img/feic1-6.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>求購(gòu)</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd07 leng" skip="https://www.w555555.com/mobile/22-0-0-1.html">
                    <div>
                      ![](image/img/feic1-22.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>招商加盟</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd08 leng" skip="https://www.w555555.com/mobile/8-0-0-1.html">
                    <div>
                      ![](image/img/feic1-8.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>展會(huì)資訊</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd09 leng" skip="https://www.w555555.com/mobile/21-0-0-1.html">
                    <div>
                      ![](image/img/feic1-33.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>團(tuán)購(gòu)</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd010 leng" skip="https://www.w555555.com/mobile/4-0-0-1.html">
                    <div>
                      ![](image/img/feic1-4.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>商家</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd011 leng" skip="https://www.w555555.com/mobile/13-0-0-1.html">
                    <div>
                      ![](image/img/feic1-13.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>品牌</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd012 leng" skip="https://www.w555555.com/mobile/21-0-0-1.html">
                    <div>
                      ![](image/img/feic1-31.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>送給誰(shuí)</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd013 leng" skip="https://www.w555555.com/mobile/21-0-0-1.html">
                    <div>
                      ![](image/img/feic1-30.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>最新上市</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                    <li class="pd014 leng" skip="https://www.w555555.com/mobile/21-0-0-1.html">
                    <div>
                      ![](image/img/feic1-32.png)
                      <span class="del shake shake-little shake-constant" ></span>
                      <span>排行榜</span>
                      <span class="clickDom"></span>
                      </div>
                    </li>
                </ul>
            </div>
       </div>
<div class="feic1-bootm">
    <span class="cancel-btn">取消</span>
    <span class="sub-btn">確定</span>
  </div>
    </body>

     <script type="text/javascript" src="js/bulk.js"></script>
     <script>

$(function(){
  function fbottom(naan,x,time){ naan.animate({ bottom:x+"rem" }, time, 'ease-out') };
  var myChannel = $(".my-channel-ul li div");//我的頻道
  var otherChannel = $(".other-channel-ul li div");//主頻道
  var allChannel = $(".channel-ul li div");//全部頻道
  var ms = "<li class='f-right'><i>請(qǐng)?jiān)谙路竭x擇一個(gè)主頻道</i></li>";
  var skipFlag = false;
  var addFlag = false;
  var delFlag = false;

  allChannel.on("longTap",function(event){//長(zhǎng)按事件  所有上下的ul li 觸發(fā)事件
    $(".channel-ul .del").addClass("del-show");  // 出現(xiàn)小圓箭頭 刪除標(biāo)志 顯示
  $(".channel-ul .clickDom").addClass("editD"); //給所有l(wèi)i 添加一個(gè)標(biāo)識(shí)editd
    $(".channel-ul li").removeClass("leng"); //給所有l(wèi)i 移除 leng 標(biāo)識(shí)
    $(".clickDom").show(); //在結(jié)尾的時(shí)候 添加遮罩層 禁止跳轉(zhuǎn)
    fbottom($(".feic1-bootm"),0,400); //頂部導(dǎo)航欄 出現(xiàn)
  });

  $(".my-channel-ul").on("touchstart touchmove touchend",".del-show", function(){//從我的頻道刪除
    switch(event.type) {
        case 'touchstart':delFlag = false;break;
        case 'touchmove':delFlag = true;break;
        case 'touchend':if( !delFlag ) {
                $(this).removeClass("del-show"); //移除小箭頭
                $(this).parents("ul").children("li:last-child").after(ms)//添加提示按鈕
                var c_html ="<li>"+$(this).parent('div').clone(true).prop('outerHTML')+"</li>"; // 獲取當(dāng)前點(diǎn)擊元素的HTML
                $(this).parents("li").remove(); //移除當(dāng)前點(diǎn)擊的html
                $(".other-channel-ul").append(c_html); //把當(dāng)前的HTML 復(fù)制到下方去
              }

            break;
        }
  });

  $(".other-channel-ul").on("touchstart touchmove touchend",".editD", function(){//從主頻道往我的頻道添加
    switch(event.type) {
        case 'touchstart':addFlag = false;break;
        case 'touchmove':addFlag = true;break;
        case 'touchend':if( !addFlag ) {
                if($(".f-right").length > 0){
                  var d_html = $(this).parents('li').clone(true); // 獲取每一個(gè)元素的 HTML 
                  $(".my-channel-ul").prepend(d_html); // 在上面四個(gè)元素的前面添加 html
                  $(".my-channel-ul").find("li:last-child").remove(); //在上面四個(gè)元素在最后的一名元素 刪除
                  $(this).parents("li").remove();// 刪除下面十四個(gè)元素的當(dāng)前對(duì)象
                }else{
                  myLayer("已經(jīng)滿(mǎn)位啦综液！")//彈窗 當(dāng)前對(duì)象
                }
              }
              break;
    }
  })

  $(".channel-ul").on("touchstart touchmove touchend","li.leng", function(event){//點(diǎn)擊直接跳轉(zhuǎn)
    switch(event.type) {
        case 'touchstart':skipFlag = false;break;
        case 'touchmove':skipFlag = true;break;
        case 'touchend':if( !skipFlag ) {
              var theLink = $(this).attr("skip")
              location.href = theLink
              console.log('點(diǎn)擊');
            }
            break;
    }
  })


  $(".feic1-bootm").on("touchend",".sub-btn", function(){//提交
    if($(".my-channel-ul .f-right").length >0){
      myLayer("請(qǐng)選擇4個(gè)你喜歡的頻道")
    }else{
      refresh();
    }
  });

  $(".feic1-bootm").on("touchend",".cancel-btn", function(){//取消
    refresh();
  });
  function refresh(){//刷新
    window.location.reload();
  }

  function myLayer(msg){
    layer.open({
    content: msg,
    skin: 'msg',
    style: 'border:none;padding:0.2rem 0.5rem;font-size:0.3rem;color:#fff;top:50%;',
    time: 2 //2秒后自動(dòng)關(guān)閉
  });
  }

})

     </script>
</html>


/*頻道選擇*/
.gary-bg-divv{width: 100%;background: #F1F1F1;padding-top: 0.4rem;font-size: 0.373333rem;color: #222;}
.channel-title{width: 9.066667rem; margin: 0 auto;text-align: center;height: 1.133333rem;line-height: 1.133333rem;background: #fff;margin-bottom: 0.266667rem;}
.channel-title img{width: 0.333333rem;height: 0.333333rem;}
.channer-ul-box{width: 9.066667rem;margin: 0 auto;overflow: hidden;}
.channel-ul{width: 9.333333rem;margin: 0 auto;overflow: hidden;margin-left: -0.266667rem;margin-bottom: 0.3rem;}
.channel-ul li{ position: relative;  width: 2.066667rem;height: 2.066667rem;float: left;margin-left: 0.266667rem;margin-bottom: 0.266667rem;text-align: center; font-size: 0.293333rem;color: #555;line-height: 3rem;-webkit-user-select: none;-moz-user-select: none;background:#fff url(../image/img/feic1-add.png) no-repeat center 0.16rem; background-size: 40%;}
.channel-ul li>div{}
.channel-ul li span{position: absolute;width: 2.066667rem;height: 2.066667rem;background: #eee; z-index: 11;color: #000;background: none;top: 0;left: 0;}
.channel-ul li img{position: absolute;width: 2.066667rem;height: 2.066667rem; z-index: 9;top: 0;left: 0;}
.channel-ul li img.del{z-index: 10;width: 0.333333rem !important;height: 0.333333rem !important; left: 1.7rem !important;display: none;}
.channel-ul li span.del-show{display: block;!important; width: 2.066667rem;height: 2.066667rem;position: absolute;background: url(../image/img/feic1-del.png) no-repeat 1.55rem 0.133333rem; background-size: 19%;z-index: 20;}
.f-right i{line-height: 0.4rem !important;display: inline-block;margin-top: 1.1rem;width: 1.76rem;font-size: 0.266666rem;}
.channer-ul-box .other-channel-ul li span.del-show{display: none;!important;}
.channel-ul li a{display: block;width: 100%;height: 100%;position: absolute;z-index: 1;}
.clickDom{display: none;position: absolute;width: 2.066667rem;height: 2.066667rem;z-index: 9999999;}

/*確定取消按鈕*/
.feic1-bootm{position: fixed;display: flex; flex-direction: row;  bottom: -3rem; left: 0; width: 100%; height: 1.133333rem; background: #FFFFFF;z-index: 99999999999999999;}
.feic1-bootm span{flex: 1; display: flex; justify-content: center; align-items: center; color: #FFFFFF; font-size: 0.373333rem;}
.feic1-bootm span:nth-child(1){background:#f69123;}
.feic1-bootm span:nth-child(2){background:#ff7800;}

http://www.cnblogs.com/tnnyang/p/7576091.html CSS3左右間歇晃動(dòng)效果

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末劣光，一起剝皮案震驚了整個(gè)濱河市组民，隨后出現(xiàn)的幾起案子阱高，更是在濱河造成了極大的恐慌柱蟀，老刑警劉巖屎即，帶你破解...
    沈念sama閱讀 221,635評(píng)論 6贊 515
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場(chǎng)離奇詭異著角，居然都是意外死亡揪漩，警方通過(guò)查閱死者的電腦和手機(jī)，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3贊 399
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)吏口，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)奄容，“玉大人冰更，你說(shuō)我怎么就攤上這事∧酆＃” “怎么了冬殃？”我有些...
    開(kāi)封第一講書(shū)人閱讀 168,083評(píng)論 0贊 360
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵囚痴，是天一觀的道長(zhǎng)叁怪。 經(jīng)常有香客問(wèn)我，道長(zhǎng)深滚，這世上最難降的妖魔是什么奕谭？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 59,640評(píng)論 1贊 296
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任，我火速辦了婚禮痴荐，結(jié)果婚禮上血柳，老公的妹妹穿的比我還像新娘。我一直安慰自己生兆，他們只是感情好难捌，可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6贊 397
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著鸦难，像睡著了一般根吁。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上合蔽，一...
    開(kāi)封第一講書(shū)人閱讀 52,262評(píng)論 1贊 308
  • 城市分裂傳說(shuō)
    那天击敌，我揣著相機(jī)與錄音，去河邊找鬼拴事。 笑死沃斤，一個(gè)胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的刃宵。 我是一名探鬼主播衡瓶，決...
    沈念sama閱讀 40,833評(píng)論 3贊 421
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼牲证！你這毒婦竟也來(lái)了哮针？” 一聲冷哼從身側(cè)響起，我...
    開(kāi)封第一講書(shū)人閱讀 39,736評(píng)論 0贊 276
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤从隆，失蹤者是張志新（化名）和其女友劉穎诚撵，沒(méi)想到半個(gè)月后，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體键闺，經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1贊 319
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡寿烟，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3贊 340
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了辛燥。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片筛武。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1贊 352
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡缝其，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出徘六，到底是詐尸還是另有隱情内边，我是刑警寧澤，帶...
    沈念sama閱讀 36,185評(píng)論 5贊 350
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布待锈，位于F島的核電站漠其，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏竿音。R本人自食惡果不足惜和屎，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3贊 333
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望春瞬。 院中可真熱鬧柴信，春花似錦、人聲如沸宽气。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,340評(píng)論 0贊 24
  • 一樁弒父案，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)萄涯。三九已至绪氛，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間窃判，已是汗流浹背钞楼。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,460評(píng)論 1贊 272
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留袄琳，地道東北人询件。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3贊 376
  • 代替公主和親
    正文 我出身青樓，卻偏偏與公主長(zhǎng)得像唆樊，于是被迫代替她去往敵國(guó)和親宛琅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2贊 359

推薦閱讀更多精彩內(nèi)容