jquery 實現 選單橫向滑動以及滑動選單時對應導航選中
阿新 • • 發佈:2018-10-31
1:實現效果
2:css 部分可自己補充;
3:簡單的html部分;
@* 菜品導航 *@ <ul class="grin_nav"> <li class="navActive"> <span>酸菜魚</span> </li> <li> <span>串串</span> </li> <li> <span>飲品</span> </li> <li> <span>主食小吃</span> </li> </ul> <div class="grin_good_list"> <div class="good_con" data-index="0"> </div> <div class="good_con" data-index="1"> </div> <div class="good_con" data-index="2"> </div> <div class="good_con" data-index="3"> </div> <div class="good_con" style="width:14%; height:20px; box-shadow: inherit;"></div> </div>
4:js部分
$(function () { //點選導航 滑動到對應分類 $(".grin_nav li").on("click", function () { var index = $(this).index(); var good_con = $(".good_con"); good_con.each(function () { if ($(this).attr("data-index") == index) { console.log($(this)) console.log($(this)[0].offsetLeft) var x = parseInt($(this)[0].offsetLeft - 70); console.log($(this).offset()) $(".grin_good_list").animate({ scrollLeft: x }, 10); } }) $(this).addClass("navActive"); $(this).prevAll().addClass("navActive"); $(this).nextAll().removeClass("navActive"); }); //滑動商品 對應導航選中 $(".grin_good_list").scroll(function () { var item = $(this).context.scrollLeft + 70; var good_con = $(".good_con"); good_con.each(function (i) { var j = (i + 1) >= good_con.length ? i : i + 1; var min = $(good_con.get(i)).context.offsetLeft; var max = $(good_con.get(j)).context.offsetLeft; if (item >= min && item <= max) { $(".grin_nav li").eq(i).addClass("navActive"); $(".grin_nav li").eq(j).removeClass("navActive"); } }) }); })