左右滑动导航栏

最新推荐文章于 2024-07-19 10:35:16 发布

王永存

最新推荐文章于 2024-07-19 10:35:16 发布

阅读量4.2k

点赞数 1

分类专栏：网页常见效果 javascript

本文链接：https://blog.csdn.net/wang1006008051/article/details/79487844

版权

javascript 同时被 2 个专栏收录

30 篇文章 1 订阅

订阅专栏

网页常见效果

16 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .warp{width:100%; max-width: 480px; margin: 0 auto; height: 50px; background: #EEE; overflow: hidden; border-bottom: 1px solid #CCC; clear:both;}
        .inner{ line-height: 50px; width:630px;  height: 50px; position: relative; overflow:hidden;}
        .inner a{display: block;padding: 0 10px; float: left; font-size:18px;}
    </style>
    <script src="jquery-1.11.1.min.js"></script>
</head>
<body>
<!--导航部分-->
<div id="warp" class="warp">
    <div id="inner" class="inner">
        <a href= "#">首页</a>
        <a href= "#">MV</a>
        <a href= "#">悦单</a>
        <a href= "#">V榜</a>
        <a href= "#">节目</a>
        <a href= "#">音乐stage</a>
        <a href= "#">APP下载</a>
        <a href= "#">饭团</a>
        <a href= "#">商城</a>
        <a href= "#">资讯</a>
    </div>
</div>
<!--导航部分-->

<script>
    /*
================================
调用方法
horizontalMove({
    innerId: innerId,//滑动元素id 如"#inner"
    warpId: warpId,  //滑动元素外围容器id 如"#warp"
    speed:speed      //滑动参数0-1 0滑动幅度越小，1滑动幅度越大
    });
================================
*/
    horizontalMove({
        innerId: "#inner",
        warpId : "#warp",
        speed: 0.5
    });
    function horizontalMove(options){
        //初始化数据
        var speed = 0.5;
        var startX;//触摸时的X坐标
        var x = 0;//X轴滑动的距离
        var aboveX=0; // 设一个全局变量记录上一次内部块滑动的位置

        options = options ||{};
        speed = options.speed;

        if(options.innerId&&options.warpId){
            var documentWidth=$(options.innerId).width();//内部滑动模块的高度
            var wapperWidth=$(options.warpId).width(); //外部框架的高度
            var inner=$(options.innerId);
            var warp = $(options.warpId)[0]

            function touchStart(e){//触摸开始
                e.preventDefault();
                var touch=e.touches[0];
                startX = touch.pageX;   //刚触摸时的坐标
            }

            function touchMove(e){//滑动
                e.preventDefault();
                var  touch = e.touches[0];
                x = touch.pageX - startX;//滑动的距离
                inner.css({left:aboveX+x*speed});
            }

            function touchEnd(e){//手指离开屏幕
                aboveX=parseInt(inner.css("left"));//touch结束后记录内部滑块滑动的位置 在全局变量中体现 一定要用parseInt()将其转化为整数字;
                if(x>0&&aboveX>0){//当滑动到最顶端时候不能再网上滑动
                    //inner.style.top=0;
                    inner.animate({left:0},200);
                    aboveX=0;
                }

                if(x<0&&(aboveX<(-(documentWidth-wapperWidth)))){//当滑动到最底部时候不能再网下滑动
                    // inner.style.top=-(documentHeight-wapperHeight)+"px";
                    inner.animate({left:-(documentWidth-wapperWidth)},200);
                    aboveX=-(documentWidth-wapperWidth);
                }
            }//
            warp.addEventListener('touchstart', touchStart,false);
            warp.addEventListener('touchmove', touchMove,false);
            warp.addEventListener('touchend', touchEnd,false);

        }
    }
</script>
</body>
</html>