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" /><!-- 忽略頁面中的數(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">
我的頻道
</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>
<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>
<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>
<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>
<span class="del shake shake-little shake-constant" ></span>
<span>禮品資訊</span>
<span class="clickDom"></span>
</div>
</li>
</ul>
</div>
<div class="channel-title">
主頻道
</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>
<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>
<span class="del shake shake-little shake-constant" ></span>
<span>求購</span>
<span class="clickDom"></span>
</div>
</li>
<li class="pd07 leng" skip="https://www.w555555.com/mobile/22-0-0-1.html">
<div>
<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>
<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>
<span class="del shake shake-little shake-constant" ></span>
<span>團(tuán)購</span>
<span class="clickDom"></span>
</div>
</li>
<li class="pd010 leng" skip="https://www.w555555.com/mobile/4-0-0-1.html">
<div>
<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>
<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>
<span class="del shake shake-little shake-constant" ></span>
<span>送給誰</span>
<span class="clickDom"></span>
</div>
</li>
<li class="pd013 leng" skip="https://www.w555555.com/mobile/21-0-0-1.html">
<div>
<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>
<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>請?jiān)谙路竭x擇一個(gè)主頻道</i></li>";
var skipFlag = false;
var addFlag = false;
var delFlag = false;
allChannel.on("longTap",function(event){//長按事件 所有上下的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)滿位啦！")//彈窗 當(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("請選擇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)效果
