手机网站导航栏左右滑动的效果怎么做？

Netcean 2017-03-11 02:44:15

http://3g.163.com/touch/all?dataversion=A&version=v_standard
类似在手机浏览器打开163，头部导航栏可以用手指左右滑动，这要怎么实现？
谢谢。

...全文

775 1 打赏收藏转发到动态举报

写回复

用AI写文章

1 条回复

切换为时间正序

请发表友善的回复…

发表回复

看着是个昵称 2017-03-11

打赏
举报

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>超出滑动</title>
	<style type="text/css">
		ul{
			width: 500px;
			height: 50px;
			overflow: hidden;	
		}
		li{
			list-style: none;
			width: 50%;
			float: left;
			background-color: #00BCD4;
			text-align: center;
			margin-right: 20px;
		}
		.owl-wrapper{
			width: 1920px !important;
			overflow: hidden;
		}
		.owl-item{
			width: 60px !important;
			float: left;
		}
	</style>
</head>
<body>
	<div class="main">
		<ul id="owl-demo">
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>1</li>
			<li>12</li>
			<li>12</li>
			<li>12</li>
			<li>12</li>
			<li>12</li>
			<li>12</li>
			<li>12</li>
			<li>12</li>
			<li>12</li>
			<li>12</li>
			<li>2</li>
			<li>2</li>
			<li>2</li>
			<div style="clear: both;"></div>
		</ul>
	</div>
	<script src="js/jquery-2.2.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" src="js/owl.carousel.js"></script>
	<script type="text/javascript">
		$("#owl-demo").owlCarousel({
        items : 4,
        lazyLoad : true,
        navigation : false,
        pagination:false,	//显示下面原点导航
        singleItem:false,	//单张显示
        autoPlay:false,	//自动播放
        itemsMobile:[1200,4]
    });
	</script>
</body>
</html>

需要自己再去调整调整