水平菜單重疊圖像滑塊
[英]Horizontal menu overlapping image slider
問題描述
我在對齊圖像滑塊下方的水平菜單時遇到問題。 如果我只有圖像而不是滑塊，則菜單會進行適當的調整（垂直），但是當我為滑塊添加代碼時，菜單會一直到達頂部，而不會停留在圖像滑塊的下方。 我嘗試更改頁邊距頂部，它確實將菜單向下移動，但是如果垂直增加屏幕尺寸，它不會停留在圖像下方。 以下是我的代碼和發生的情況以及我想要的樣子的圖像（綠色箭頭）。
<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>
1 個解決方案
解決方案1
1 已采納 2016-03-07 20:16:20
忘了我之前說的...
我在javascript / jQuery代碼中看到了他的操作方式。 發生的是，當它運行滑塊時，他更改了一些javascript值，因此我需要在代碼中添加一些細節。
我更改了一些值，所以我將首先進行快速解釋，然后顯示結果。
我將Height var的值更改為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>
動畫水平菜單（重疊菜單項而不絕對定位它們）
[英]Animating horizontal menu (overlapping menu items without positioning them absolutely)
自定義水平滾動內容滑塊，具有圖像標題和描述
[英]Customized horizontal scrolling content slider having Image Title & Description
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.