jquery实现实现h5页面左右滑动效果

最新推荐文章于 2024-09-20 14:11:16 发布

if时光重来

最新推荐文章于 2024-09-20 14:11:16 发布

阅读量3.7k

点赞数 1

分类专栏： html js css 文章标签： h5左右滑动效果

原文链接：https://blog.csdn.net/nuanxiasuiyuan/article/details/78182713

版权

js 同时被 3 个专栏收录

42 篇文章 1 订阅

订阅专栏

html

25 篇文章 0 订阅

订阅专栏

css

6 篇文章 0 订阅

订阅专栏

h5实现左右滑动效果

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>手机滑屏tab菜单</title>
<style type="text/css">
body,td,th,ul,li{
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    padding:0;
    margin:0;
}
a {
    color: #333;
    text-decoration:none;
    cursor:pointer;
}
.find_nav {
    width: 100%;
    height: 70px;
    background-color: #f9f9f9;
    position: fixed;
    top: 0;
    z-index: 9999;
    border-bottom: 1px solid #ddd;
    display: -moz-box;
    display: -webkit-box;
    display: box;
}
.find_nav_left {
    height: 70px;
    position: relative;
    overflow: hidden;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
}
.find_nav_list {
    position: absolute;
    left: 0;
}
.find_nav_list ul {
    position: relative;
    white-space: nowrap;
    font-size: 0;
}
.find_nav_list ul li {
    display: inline-block;
    padding: 0;
    margin:0 20px;
}
.find_nav_list ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 70px;
    font-size: 24px;
    text-align: center;
    color: #666;
}
.find_nav_cur a {
    color: #48a5f4 !important;
}
.find_nav_list a.active{ color:#C00}
.sideline {
    display: block;
    position: absolute;
    border: 0;
    height: 2px;
    background-color: #48a5f4;
    left: 0;
    top: 68px;
    pointer-events: none;
}
.li_list{ 
    min-height:800px;
    font-size:40px;
    line-height:800px;
    color:#fff;
    text-align:center}
.swipe{ padding:70px 0 0 0;}
</style>
</head>

<body>

<div class="find_nav">
    <div class="find_nav_left">
        <div class="find_nav_list" id="pagenavi1">
            <ul>
                <li><a href="#" class="active">每日更新</a></li>
                <li><a href="#">精品首推</a></li>
                <li><a href="#">时尚包包</a></li>
                <li><a href="#">T恤</a></li>
                <li><a href="#">运动品牌</a></li>
                <li><a href="#">香水化妆品</a></li>
                <li><a href="#">阿迪达斯</a></li>
                <li><a href="#">耐克</a></li>
                <li><a href="#">范思哲</a></li>
                <li><a href="#">古驰</a></li>
                <li class="sideline"></li>
            </ul>

        </div>
    </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
$(".find_nav_list").css("left",0);
$(".find_nav_list li").each(function(){
        $(".sideline").css({left:0});
        $(".find_nav_list li").eq(0).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
});
var nav_w=$(".find_nav_list li").first().width();
$(".sideline").width(nav_w);
$(".find_nav_list li").on('click', function(){
    nav_w=$(this).width();
    $(".sideline").stop(true);
    $(".sideline").animate({left:$(this).position().left},300);
    $(".sideline").animate({width:nav_w});
    $(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
    var fn_w = ($(".find_nav").width() - nav_w) / 2;
    var fnl_l;
    var fnl_x = parseInt($(this).position().left);
    if (fnl_x <= fn_w) {
        fnl_l = 0;
    } else if (fn_w - fnl_x <= flb_w - fl_w) {
        fnl_l = flb_w - fl_w;
    } else {
        fnl_l = fn_w - fnl_x;
    }
    $(".find_nav_list").animate({
        "left" : fnl_l
    }, 300);

});
var fl_w=$(".find_nav_list").width();
var flb_w=$(".find_nav_left").width();
$(".find_nav_list").on('touchstart', function (e) {
    var touch1 = e.originalEvent.targetTouches[0];
    x1 = touch1.pageX;
    y1 = touch1.pageY;
    ty_left = parseInt($(this).css("left"));
});
$(".find_nav_list").on('touchmove', function (e) {
    var touch2 = e.originalEvent.targetTouches[0];
    var x2 = touch2.pageX;
    var y2 = touch2.pageY;
    if(ty_left + x2 - x1>=0){
        $(this).css("left", 0);
    }else if(ty_left + x2 - x1<=flb_w-fl_w){
        $(this).css("left", flb_w-fl_w);
    }else{
        $(this).css("left", ty_left + x2 - x1);
    }
    if(Math.abs(y2-y1)>0){
        e.preventDefault();
    }
});

</script>

</body>
</html>

转载网址：https://blog.csdn.net/nuanxiasuiyuan/article/details/78182713