相关疑难解决方法(0)

响应水平页面滑动

我想创建水平响应页面导航,如下图所示: 水平响应页面导航过渡

这就是我设法做的事:DEMO

$(document).ready(function () {
    var slideNum = $('.page').length,
        wrapperWidth = 100 * slideNum,
        slideWidth = 100/slideNum;
    $('.wrapper').width(wrapperWidth + '%'); 
    $('.page').width(slideWidth + '%');
    
    $('a.scrollitem').click(function(){
        $('a.scrollitem').removeClass('selected');
        $(this).addClass('selected');
        
        var slideNumber = $($(this).attr('href')).index('.page'),
            margin = slideNumber * -100 + '%';
    
        $('.wrapper').animate({marginLeft: margin},1000);
        return false;
    });
});
Run Code Online (Sandbox Code Playgroud)
html, body {
    height: 100%;
    margin: 0;
    overflow-x:hidden;
    position:relative;
}
nav{
    position:absolute;
    top:0; left:0;
    height:30px;
}
.wrapper {
    height: 100%;
    background: #263729;
}
.page {
    float:left;
    background: #992213;
    min-height: 100%;
    padding-top: 30px;
}
#page-1 …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery responsive-design

15
推荐指数
1
解决办法
8290
查看次数

标签 统计

css ×1

html ×1

javascript ×1

jquery ×1

responsive-design ×1