<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<style>
* {margin:0;padding:0;}
.box {width:100%;height:50px;overflow:hidden;border:1px solid #ddd;box-sizing:border-box;}
.inner {width:100%;overflow-x:auto;overflow-y:hidden;-webkit-transition:all 0.5s;}
.box ul {height:100%;list-style:none;-webkit-overflow-scrolling:touch;}
.box li {float:left;padding:0 50px;line-height:50px;border-left:1px solid #ddd;}
.box .selected {background-color:#555;color:#fff;}
</style>
</head>
<body>
<div class="box">
<div class="inner">
<ul>
<li>001</li>
<li>002</li>
<li>003</li>
<li>004</li>
<li>005</li>
<li>006</li>
<li>007</li>
<li>008</li>
<li>009</li>
<li>010</li>
<li>011</li>
<li>012</li>
<li>013</li>
<li>014</li>
<li>015</li>
<li>016</li>
<li>017</li>
<li>018</li>
<li>019</li>
<li>020</li>
<li>021</li>
<li>022</li>
<li>023</li>
<li>024</li>
<li>025</li>
<li>026</li>
<li>027</li>
<li>028</li>
<li>029</li>
<li>030</li>
<li>031</li>
<li>032</li>
<li>033</li>
<li>034</li>
<li>035</li>
<li>036</li>
<li>037</li>
<li>038</li>
<li>039</li>
<li>040</li>
<li>041</li>
<li>042</li>
<li>043</li>
<li>044</li>
<li>045</li>
<li>046</li>
<li>047</li>
<li>048</li>
<li>049</li>
<li>050</li>
</ul>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(function () {
var winWidth = $(window).width(),
inner = $(".inner"),
list = inner.find("ul"),
items = list.find("li"),
len = items.length,
itemFirst = items.eq(0),
itemWidth = itemFirst.outerWidth();
list.width(itemWidth * len);
itemFirst.addClass("selected");
items.each(function () {
var self = $(this),
posX = self.position().left;
self.on("click", function () {
var diff = posX - (winWidth - itemWidth) / 2;
self.addClass("selected").siblings().removeClass("selected");
inner.animate({scrollLeft: diff});
});
})
});
</script>
</body>
</html>
浙公网安备 33010602011771号