jquery:類似於外賣選餐
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=300,maximum-scale=5.0,user-scalable=0">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.block {
margin-top: 100px;
width: 300px;
height: 300px;
border-bottom: 1px solid grey;
border-top: 1px solid grey;
box-sizing: border-box;
}
.menuLeft {
width: 90px;
height: 300px;
float: left;
border-right: 1px solid grey;
box-sizing: border-box;
overflow: hidden;
}
.menuRight {
position: relative;
width: 210px;
height: 300px;
float: left;
overflow: hidden;
}
.menuUl {
width: 100px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
.menuUl li {
width: 90px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 12px;
border-bottom: 1px solid grey;
box-sizing: border-box;
}
.menudea {
width: 200px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
}
.menuchild {
width: 210px;
height: 300px;
border-bottom: 1px solid silver;
box-sizing: border-box;
}
.menuleftColor {
background-color: #dbdbdb;
color: red;
}
</style>
</head>
<body>
<div class="block">
<div class="menuLeft">
<ul class="menuUl">
<li class="menuleftColor">熱賣</li>
<li>肉菜</li>
<li>素菜</li>
<li>酒水</li>
<li>主食</li>
<li>套餐1</li>
<li>套餐2</li>
<li>套餐3</li>
<li>套餐4</li>
</ul>
</div>
<div class="menuRight">
<div class="menudea">
<div class="menuchild">
<p>熱賣</p>
</div>
<div class="menuchild">
<p>肉菜</p>
</div>
<div class="menuchild">
<p>素菜</p>
</div>
<div class="menuchild">
<p>酒水</p>
</div>
<div class="menuchild">
<p>主食</p>
</div>
<div class="menuchild">
<p>套餐1</p>
</div>
<div class="menuchild">
<p>套餐2</p>
</div>
<div class="menuchild">
<p>套餐3</p>
</div>
<div class="menuchild">
<p>套餐4</p>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.7.min.js"></script>
<script>
/*先寫左邊的，遍歷每一個，獲取offsettop*/
$(".menuUl li").each(function(index){
$(this).prop("data-litop",$(this).offset().top);//li的top偏移量
/*存儲對應div的top值*/
var liditop=$(".menuchild").eq(index).offset().top;//div的top偏移量
$(this).prop("data-ditop",liditop);
$(this).click(function(){
$(".menuUl li").removeClass("menuleftColor");//先移除所有的背景
$(this).addClass("menuleftColor");//給當前點擊的加上背景
var chutop=$(this).prop("data-ditop")-$(".block").offset().top//div的top偏移量減去最上面logo那一塊的偏移量
$(".menudea").animate({
scrollTop:chutop
},300)
//點擊左邊的時候移除右邊的滾動條事件
$(".menudea").unbind("scroll")
})
})
/*滾動事件*/
$(".menudea").bind("touchstart",function(){
$(this).bind("scroll",function(){
var stop=parseInt($(this).scrollTop()/300);
var s=$(".menuUl li").eq(stop).prop("data-litop")-$(".block").offset().top;//鏈接起來
$(".menuUl").scrollTop(s);
$(".menuUl li").removeClass("menuleftColor").eq(stop).addClass("menuleftColor");
})
})
</script>
</body>
</html>
