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" /><!-- 百度禁止转码。-->
<meta name="format-detection" content="telphone=no, email=no" /><!-- 忽略页面中的数字识别为电话，忽略email识别 -->
<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" href="https://www.w555555.com/template/default/distribution/layer_mobile/need/layer.css" /> -->
</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>批发商城</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>供应</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>展会资讯</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>团购</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>请在下方选择一个主频道</i></li>";
var skipFlag = false;
var addFlag = false;
var delFlag = false;
allChannel.on("longTap",function(event){//长按事件 所有上下的ul li 触发事件
$(".channel-ul .del").addClass("del-show"); // 出现小圆箭头 删除标志 显示
$(".channel-ul .clickDom").addClass("editD"); //给所有li 添加一个标识editd
$(".channel-ul li").removeClass("leng"); //给所有li 移除 leng 标识
$(".clickDom").show(); //在结尾的时候 添加遮罩层 禁止跳转
fbottom($(".feic1-bootm"),0,400); //顶部导航栏 出现
});
$(".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>"; // 获取当前点击元素的HTML
$(this).parents("li").remove(); //移除当前点击的html
$(".other-channel-ul").append(c_html); //把当前的HTML 复制到下方去
}
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); // 获取每一个元素的 HTML
$(".my-channel-ul").prepend(d_html); // 在上面四个元素的前面添加 html
$(".my-channel-ul").find("li:last-child").remove(); //在上面四个元素在最后的一名元素 删除
$(this).parents("li").remove();// 删除下面十四个元素的当前对象
}else{
myLayer("已经满位啦！")//弹窗 当前对象
}
}
break;
}
})
$(".channel-ul").on("touchstart touchmove touchend","li.leng", function(event){//点击直接跳转
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('点击');
}
break;
}
})
$(".feic1-bootm").on("touchend",".sub-btn", function(){//提交
if($(".my-channel-ul .f-right").length >0){
myLayer("请选择4个你喜欢的频道")
}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秒后自动关闭
});
}
})
</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;}
