知识点
-
移动端适口
<meta name="viewport" content="width=device-width, user-scalable=no"> -
新闻div占200% 每一个都占父标签50% 左浮
-
Zepto中swip实现滑动、tap实现点击
-
index()获取下标
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no">
<title></title>
<style>
*{margin: 0;padding:0;border:none;list-style:none;
touch-action: none;box-sizing: border-box;}
.box{position: relative;}
.head{ width: 100%; height: 40px; background-color: #ccc;}
.head li{width: 50%; height: 100%; float: left; display: flex;
justify-content: center; align-items: center;
font-size: 18px;font-weight: bold;
}
.head li.current{color: #e9232c;}
.line{width: 50%;height: 3px;background-color: #e9232c;
position: absolute;left: 0;top: 37px;}
.list{width: 200%;overflow: hidden;}
.list>div{width: 50%;float: left;}
.list>div ul{padding: 10px;}
.list>div ul li{height: 36px;line-height: 36px;
border-bottom: 1px solid #000;
}
.more{
width: 100%;
text-decoration: none;
color: #000;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="box">
<ul class="head">
<li class="current">新闻</li>
<li>科技</li>
</ul>
<span class="line"></span>
<div class="list">
<div class="list1">
<ul>
<li>新闻内容新闻内容新闻内容</li>
<li>新闻内容新闻内容新闻内容</li>
<li>新闻内容新闻内容新闻内容</li>
<li>新闻内容新闻内容新闻内容</li>
<li>新闻内容新闻内容新闻内容</li>
</ul>
<a href="#" class="more">查看更多...</a>
</div>
<div class="list2">
<ul>
<li>科技内容科技内容科技内容</li>
<li>科技内容科技内容科技内容</li>
<li>科技内容科技内容科技内容</li>
<li>科技内容科技内容科技内容</li>
<li>科技内容科技内容科技内容</li>
</ul>
<a href="#" class="more">查看更多...</a>
</div>
</div>
</div>
<script src="js/zepto.min.js"></script>
<script src="js/touch.js"></script>
<script>
$(function () {
// 1. 监听点击事件
$('.head li').tap(function () {
// 1.1 获取点击的索引
var index = $(this).index();
// 1.2 改变选中样式
$(this).addClass('current').siblings().removeClass('current');
// 1.3 处理线条的样式
$('.line').css({
transform: 'translateX(' + index * 100 +'%)',
transition: 'all 0.25s linear'
});
// 1.4 处理列表
$('.list').css({
transform: 'translateX(' + -index * 50 +'%)',
transition: 'all 0.25s linear'
})
});
// 2. 监听左滑动和右滑动
var $list = $('.list');
$list.swipeLeft(function () {
dealWithSwipe(1);
});
$list.swipeRight(function () {
dealWithSwipe(0);
});
/**
* 统一处理左右滑动
* @param index 索引
*/
function dealWithSwipe(index) {
// 1.2 改变选中样式
$('.head li').eq(index).addClass('current').siblings().removeClass('current');
// 1.3 处理线条的样式
$('.line').css({
transform: 'translateX(' + index * 100 +'%)',
transition: 'all 0.25s linear'
});
// 1.4 处理列表
$('.list').css({
transform: 'translateX(' + -index * 50 +'%)',
transition: 'all 0.25s linear'
})
}
});
</script>
</body>
</html>
运行结果
