Question

我无法在图像滑块下方对齐水平菜单。如果我只有一个图像而不是滑块，则菜单会正确调整（垂直），但是当我为滑块添加代码时，菜单会一直向上移动并且不会停留在图像滑块下方。我尝试更改边距顶部，它确实将菜单向下移动，但如果我垂直增加屏幕尺寸，它不会保持在图像下方。下面是我的代码和所发生事件的图像以及我希望它看起来像什么（绿箭头）。

 <html>
 <head>
    <!-- Include meta tag to ensure proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Include jQuery Mobile stylesheets -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- Include the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(document).bind('mobileinit',function(){
            $.mobile.changePage.defaults.changeHash = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
        });
    </script>
    <!-- Include the jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<style> 
    /*image settings*/
    img {
        width: 100% !important;
        height: 30%;
        background-size:cover;
        filter:grayscale(100%);
        -webkit-filter: grayscale(100%);
    }


    #slideshow { 
        position: relative; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }

    #slideshow > div { 
        position: absolute;
        width: 100% !important;
    }

</style>

<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>

        <div id="slideshow">    
            <div><img src="http://www.eldeber.com.bo//uploads/2016/02/07/56b7505ada84c.jpeg"></div>
            <div><img src="http://www.eldeber.com.bo//uploads/2016/03/06/56dce62c5c5e3.jpeg"></div>
        </div>

        <div class="categories" > 
            <ul>                    
                <li><span><a href="" data-role="button" data-inline="true" >Headlines</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Business</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Sports</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true">Entertainment</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Technology</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >World</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Local</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Politics</a></span></li>                       
            </ul>               
        </div>




        <div data-role="main" class="ui-content">

        </div>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false" >
            <h1>Footer Text</h1>
        </div>
    </div> 
</body>
<script>
    //Slideshow Settings
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('#slideshow');
    },  5000);

    //Horizontal Scrolling Start
    $(function(){           
        var step = 1;
        var current = 0;
        var maximum = $(".categories ul li").size();
        var visible = 2;
        var speed = 500;
        var liSize = 120;
        var height = 60;    
        var ulSize = liSize * maximum;
        var divSize = liSize * visible; 

        $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
        $(".categories ul li").css("list-style","none").css("display","inline");
        $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");

        $(".categories").swipeleft(function(event){
            if(current + step < 0 || current + step > maximum - visible) {return; }
            else {
                current = current + step;
                $('.categories ul').animate({left: -(liSize * current)}, speed, null);
            }
            return false;
        });

        $(".categories").swiperight(function(){
            if(current - step < 0 || current - step > maximum - visible) {return; }
            else {
                current = current - step;
                $('.categories ul').animate({left: -(liSize * current)}, speed, null);
            }
            return false;
        });         
    });
    //Horizontal Scrolling End
</script>

Answer 1

忘记我之前说的话......

我在javascript / jQuery代码中看到了它是如何做到的。当它运行滑块时，他会更改一些javascript值，所以我需要在代码中添加一些细节。

我更改了一些值，因此我将先快速解释，然后显示结果。

我将高度变量的值更改为210，因为如果不这样做，div将被隐藏。现在更改高度值会更改图像大小和按钮的位置。

我添加了一个新行，其中一个将img的高度设置为var定义的大小，如下所示：$("img").css("height",height-60)

我添加了一行新代码，用于更改顶部位置，将div移至正确/预期位置：$(".categories ul").css("top", height - 60)

这是你的（新）代码：

<html>
 <head>
    <!-- Include meta tag to ensure proper rendering and touch zooming -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Include jQuery Mobile stylesheets -->
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <!-- Include the jQuery library -->
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script>
        $(document).bind('mobileinit',function(){
            $.mobile.changePage.defaults.changeHash = false;
            $.mobile.hashListeningEnabled = false;
            $.mobile.pushStateEnabled = false;
        });
    </script>
    <!-- Include the jQuery Mobile library -->
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<style> 
    /*image settings*/
    img {
        width: 100% !important;
        /*height: 30%;*/
        background-size:cover;
        filter:grayscale(100%);
        -webkit-filter: grayscale(100%);
    }


    #slideshow { 
        position: relative; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }

    #slideshow > div { 
        position: absolute;
        width: 100% !important;
    }

</style>

<body>
    <div data-role="page" id="pageone">
        <div data-role="header">
            <h1>Page Title</h1>
        </div>

        <div id="slideshow">    
            <div><img src="http://www.eldeber.com.bo//uploads/2016/02/07/56b7505ada84c.jpeg"></div>
            <div><img src="http://www.eldeber.com.bo//uploads/2016/03/06/56dce62c5c5e3.jpeg"></div>
        </div>

        <div class="categories" > 
            <ul>                    
                <li><span><a href="" data-role="button" data-inline="true" >Headlines</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Business</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Sports</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true">Entertainment</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Technology</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >World</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Local</a></span></li>
                <li><span><a href="" data-role="button" data-inline="true" >Politics</a></span></li>                       
            </ul>               
        </div>




        <div data-role="main" class="ui-content">

        </div>

        <div data-role="footer" data-position="fixed" data-tap-toggle="false" >
            <h1>Footer Text</h1>
        </div>
    </div> 
</body>
<script>
    //Slideshow Settings
    $("#slideshow > div:gt(0)").hide();

    setInterval(function() { 
        $('#slideshow > div:first')
        .fadeOut(2000)
        .next()
        .fadeIn(2000)
        .end()
        .appendTo('#slideshow');
    },  5000);

    //Horizontal Scrolling Start
    $(function(){           
        var step = 1;
        var current = 0;
        var maximum = $(".categories ul li").size();
        var visible = 2;
        var speed = 500;
        var liSize = 120;
        var height = 210;    //changed
        var ulSize = liSize * maximum;
        var divSize = liSize * visible; 

        $('.categories').css("width", "auto").css("height", height+"px").css("visibility", "visible").css("overflow", "hidden").css("position", "relative");
        $(".categories ul li").css("list-style","none").css("display","inline");
        $(".categories ul").css("width", ulSize+"px").css("left", -(current * liSize)).css("position", "absolute").css("white-space","nowrap").css("margin","0px").css("padding","5px");
        $(".categories ul").css("top",height-60); //added
        $("img").css("height",height-60); //added

        $(".categories").swipeleft(function(event){
            if(current + step < 0 || current + step > maximum - visible) {return; }
            else {
                current = current + step;
                $('.categories ul').animate({left: -(liSize * current)}, speed, null);
            }
            return false;
        });

        $(".categories").swiperight(function(){
            if(current - step < 0 || current - step > maximum - visible) {return; }
            else {
                current = current - step;
                $('.categories ul').animate({left: -(liSize * current)}, speed, null);
            }
            return false;
        });         
    });
    //Horizontal Scrolling End
</script>

水平菜单重叠图像滑块

1 个答案: