我不能为我的生活想出这件事!我知道HTML有点乱,但它适用于我想做的事情。这里的问题是,一旦他们被包裹在div中,我就无法点击链接。我删除了换行和链接工作,但显然页面布局搞砸了,水平卷轴不起作用。任何帮助将不胜感激。我确定它显而易见,我只是想念,但我无法解决这个问题!
这里是css
div#wrap-gallery {
overflow:hidden;
position:relative;
margin:-300px 0 0 0;
height:950px;
background:#000;
z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
background:url('LINK');
background-size:100%;
width:3000px;
float:left;
height:950px;
position:absolute;
z-index:-999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery2 {
background:url('LINK');
background-size:100%;
background-repeat:no-repeat;
opacity:0.6;
width:3000px;
float:left;
height:950px;
position:absolute;
z-index:-99999999999999999999999999999999999999999999999999999999999999999;
}
ul#bio {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:510px;
margin-left:400px;
font-size:40px;
color:#fff;
z-index:999999999999999999999999999999999999999999999999999999999999999;
}
ul#music {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:-215px;
margin-left:970px;
font-size:40px;
color:#fff;
z-index:999999;
}
ul#lyrics {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:10px;
margin-left:1500px;
font-size:40px;
color:#fff;
z-index:99999999999;
}
ul#dates {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:50px;
margin-left:1100px;
font-size:40px;
color:#fff;
z-index:999999999999999999;
}
ul#gallery3 {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:-425px;
margin-left:2000px;
font-size:40px;
color:#fff;
z-index:999999999999999999999999999;
}
ul#store {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:160px;
margin-left:2375px;
font-size:40px;
color:#fff;
z-index:99999999999999999999999999999999999;
}
ul#contact {
font-family: 'Rock Salt', cursive;
width:200px;
margin-top:120px;
margin-left:2650px;
font-size:40px;
color:#fff;
z-index:9999999999999999999999999999999999999999;
}
ul#gallery li{
display:block;
}
ul#gallery li img{
float:left;
height:100%;
}
#lightbox {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:url(LINK) repeat;
text-align:center;
}
#lightbox p {
text-align:right;
color:#fff;
margin-right:20px;
font-size:12px;
}
#lightbox img {
box-shadow:0 0 15px #111;
-webkit-box-shadow:0 0 15px #111;
-moz-box-shadow:0 0 15px #111;
max-width:940px;
}
#content img{
height:90%;
max-width:100%;
}
@media only screen and (min-width: 1280px) {
div#wrap-gallery {
overflow:hidden;
position:relative;
margin:-300px 0 0 0;
height:1000px;
background:#000;
z-index:-999999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery {
background:url('{image:pano}');
background-size:100%;
width:3000px;
float:left;
height:1000px;
position:absolute;
z-index:-999999999999999999999999999999999999999999999999999999999999;
}
ul#gallery2 {
background:url('{image:map}');
background-size:100%;
background-repeat:no-repeat;
opacity:0.6;
width:3000px;
float:left;
height:1000px;
position:absolute;
z-index:-9999999999999999999999999999999999999999999999999999999999;
}
}
以下是HTML:
<div id="wrap-gallery">
<ul id="gallery">
<ul id="gallery2">
<ul id="bio">
<li><a href="LINK">Bio</a></li>
</ul>
<ul id="music">
<li><a href="LINK">Music</a></li>
</ul>
<ul id="lyrics">
<li><a href="LINK">Lyrics</a></li>
</ul>
<ul id="dates">
<li><a href="LINK">Dates</a></li>
</ul>
<ul id="gallery3">
<li><a href="LINK">Gallery</a></li>
</ul>
<ul id="store">
<li><a href="LINK">Store</a></li>
</ul>
<ul id="contact">
<li><a href="LINK">Contact</a></li>
</ul>
</ul>
</ul>
</div>
和一些js:
var moveWin = {
availW: 0,
galW: 0,
moveDis: 0,
init: function(){
this.availW = $(document).width();
this.galW = $('#gallery').width() - this.availW;
this.moveDis = this.galW / this.availW;
$(document).mousemove(function(e){
moveWin.displace(e);
});
},
displace: function(e){
var x = e.pageX * moveWin.moveDis;
$('#gallery').css({left: -x});
$('#status').html(e.pageX);
}
}
jQuery(document).ready(function($) {
moveWin.init();
$('.lightbox_trigger').click(function(e) {
e.preventDefault();
var image_href = $(this).attr("href");
if ($('#lightbox').length > 0) { // #lightbox exists
$('#content').html('<img src="' + image_href + '" />');
//$('#lightbox').show();
$('#lightbox').fadeIn('2000');
}
else {
var lightbox =
'<div id="lightbox">' +
'<p>Click to close</p>' +
'<div id="content">' +
'<img src="' + image_href +'" />' +
'</div>' +
'</div>';
$('body').append(lightbox);
}
});
$('#lightbox').live('click', function() {
$('#lightbox').hide();
});
});
再次感谢您提供的任何帮助!