实现页面左右切换的效果主要用到了touchslider.js 来帮助我们完成的，首先先介绍一下touchslider.js。

TouchSlider是一个轻量级的javascript组件，设计的目的是提供一个可以方便实现全平台（PC及移动端触摸界面）的幻灯slider效果。

默认参数说明：

‘id’: ‘幻灯容器的id或者该节点对象’, //string|elementNode
‘speed’:600, //Number 动画效果持续时间,单位是毫秒
‘timeout’:5000, //Number 幻灯播放间隔时间,单位毫秒
‘direction’:’left’, //string left|right|up|down 播放方向,四个值可选
‘align’:’center’, //string left|center|right 对齐方向（fixWidth=true情况下无效），靠左对齐（ipad版appStore上截图展现方式）、居中对齐（iphone版appStore上截图展现方式）、靠右对齐
‘fixWidth’:true, //bool 默认会将每个幻灯宽度强制固定为容器的宽度,即每次只能看到一张幻灯；false的情况参见下方第一个例子
‘mouseWheel’:false, //bool 是否支持鼠标滚轮
‘before’:new Function(), //Function 幻灯切换前, before(newIndex, oldSlide)
‘after’:new Function() //Function 幻灯切换后, after(newIndex, newSlide)

<embed src="http://player.youku.com/player.php/sid/XNTU1OTE4ODA=/v.swf" mce_src="http://player.youku.com/player.php/sid/XNTU1OTE4ODA=/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed >

现在就看一下如何实现这种效果

html部分：

<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>

    <div id="slider1" class="swipe">
      <ul class="box01_list">
        <li class="li_list" style="background:#db7575">1</li>
        <li class="li_list" style="background:#75b140">2</li>
        <li class="li_list" style="background:#b16b40">3</li>
        <li class="li_list" style="background:#4053b1">4</li>
        <li class="li_list" style="background:#b14080">5</li>
        <li class="li_list" style="background:#4dd1b3">6</li>
        <li class="li_list" style="background:#bea30e">7</li>
        <li class="li_list" style="background:#865bb3">8</li>
        <li class="li_list" style="background:#69b03f">9</li>
        <li class="li_list" style="background:#c25e28">10</li>
      </ul>

    </div>

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;}

js部分：

$(".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();
    }
});


for(n=1;n<9;n++){
    var page='pagenavi'+n;
    var mslide='slider'+n;
    var mtitle='emtitle'+n;
    arrdiv = 'arrdiv' + n;
    var as=$("#page a");
    var tt=new TouchSlider({
        id:mslide,
        "auto":"-1",
        direction:'left',
        speed:600,
        timeout:5000,
        'before':function(index){
    var as=document.getElementById(this.page).getElementsByTagName('a');
        as[this.p].className='';
        this.p=index;

        fnl_x =  parseInt($(".find_nav_list li").eq(this.p).position().left);

        nav_w=$(".find_nav_list li").eq(this.p).width();
        $(".sideline").stop(true);
        $(".sideline").animate({left:$(".find_nav_list li").eq(this.p).position().left},300);
        $(".sideline").animate({width:nav_w},100);
        $(".find_nav_list li").eq(this.p).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
        var fn_w = ($(".find_nav").width() - nav_w) / 2;
        var fnl_l;
        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);
    }});
    tt.page = page;
    tt.p = 0;
    for(var i=0;i<as.length;i++){
        (function(){
            var j=i;
            as[j].tt = tt;
            as[j].onclick=function(){
                this.tt.slide(j);
                return false;
            }
        })();
    }
}

查看效果

页面完成代码如下：

<!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>

    <div id="slider1" class="swipe">
      <ul class="box01_list">
        <li class="li_list" style="background:#db7575">1</li>
        <li class="li_list" style="background:#75b140">2</li>
        <li class="li_list" style="background:#b16b40">3</li>
        <li class="li_list" style="background:#4053b1">4</li>
        <li class="li_list" style="background:#b14080">5</li>
        <li class="li_list" style="background:#4dd1b3">6</li>
        <li class="li_list" style="background:#bea30e">7</li>
        <li class="li_list" style="background:#865bb3">8</li>
        <li class="li_list" style="background:#69b03f">9</li>
        <li class="li_list" style="background:#c25e28">10</li>
      </ul>

    </div>


<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/touchslider.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();
    }
});


for(n=1;n<9;n++){
    var page='pagenavi'+n;
    var mslide='slider'+n;
    var mtitle='emtitle'+n;
    arrdiv = 'arrdiv' + n;
    var as=$("#page a");
    var tt=new TouchSlider({
        id:mslide,
        "auto":"-1",
        direction:'left',
        speed:600,
        timeout:5000,
        'before':function(index){
    var as=document.getElementById(this.page).getElementsByTagName('a');
        as[this.p].className='';
        this.p=index;

        fnl_x =  parseInt($(".find_nav_list li").eq(this.p).position().left);

        nav_w=$(".find_nav_list li").eq(this.p).width();
        $(".sideline").stop(true);
        $(".sideline").animate({left:$(".find_nav_list li").eq(this.p).position().left},300);
        $(".sideline").animate({width:nav_w},100);
        $(".find_nav_list li").eq(this.p).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
        var fn_w = ($(".find_nav").width() - nav_w) / 2;
        var fnl_l;
        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);
    }});
    tt.page = page;
    tt.p = 0;
    for(var i=0;i<as.length;i++){
        (function(){
            var j=i;
            as[j].tt = tt;
            as[j].onclick=function(){
                this.tt.slide(j);
                return false;
            }
        })();
    }
}
</script>

</body>
</html>
Logo
向您推荐>>Eolink开发者社区

权威｜前沿｜技术｜干货｜国内首个API全生命周期开发者社区

更多推荐

沃云统一开发平台介绍

沃云集成平台研发平台介绍1.平台优势2.平台原理3.研发平台使用方法4.遇到的问题5.现阶段实现的功能6.后续需要补充的功能和优化内容研发平台介绍1.平台优势解决孤岛式应用，实现能力共享；现有系统框架过于复杂，跨系统业务处理成本居高不下，协同服务共享，降低运维成本；提高项目应用资源监控能力，改善资源利用率；业务微服务化，快速发布、快速部署，快速响应业务需求变化；沃云平台不仅提供了自动化的、可快速部

avatar 云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...

avatar 云原生

基于docker的test-containers环境百宝箱

笔者语录： 我开了个公众号【Java你我他】，欢迎大家关注。  在很多时候，程序猿们更关注代码本身，而不愿意把时间花费在环境搭建上，这也是Docker变得越来越受欢迎的原因之一。test-containe是Docker生态圈中的一颗新星，其 主要针对测试领域、背靠Docker实现环境百宝箱功能。  test-containers： 你要的环境，我都有~  假设我们现在需要一个redis-clust

avatar 云原生