水平菜单重叠图像滑块
[英]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.