我有一个简单的幻灯片放映我正在写一本书(jQuery,新手到忍者)
除了IE8之外,一切正常(我猜7)
它由放置在幻灯片放映上方的div触发。它有一个链接在屏幕上发送。触发器div没有背景(显然!)。
#photos {
border: 1px solid #BEBEBE;
height: 350px;
overflow: hidden;
position: relative;
z-index:1;
width: 350px;
}
#photos ul {
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
z-index:2;
top: 0;
width: 1400px;
}
#photos li {
float: left;
}
#trigger {
position:relative;
left: 0;
top: 0;
z-index: 10;
text-indent: -9999px;
height:150px;
width:350px;
display: block;
}
这是html
<div id="photos">
<div id="trigger"><a href="">hi</a></div>
<ul id="photos_inner">
<li>
<img alt="Glendatronix" src="images/clothes001.gif" />
</li>
<li>
<img alt="Glendatronix" src="images/clothes002.gif" />
</li>
<li>
<img alt="Glendatronix" src="images/clothes003.gif" />
</li>
<li>
<img alt="Glendatronix" src="images/clothes004.gif" />
</li>
</ul>
</div>
最后一些jQuery - 如果有人想看到它,我会很乐意发布更多内容。我甚至无法获得在IE8中工作的简单警报
gallery.init = function() {
$(gallery.trigger)
.mouseout(function() {alert("hit mouseout")})
.click(function() {alert("you clikced")})
奇怪(对我而言)是,如果我减小触发器div的高度,然后给它一个背景颜色,它工作正常。换句话说,它似乎需要一种背景颜色来占据它的尺寸???
任何人对我需要尝试的东西有任何想法 - 显然不需要背景颜色
由于
电子
这是jq的其余部分。我意识到我之前可能没有足够的东西。
$(document).ready(function() {
gallery.trigger = $("#trigger");
gallery.content = $("#photos_inner");
gallery.scroll = false;
gallery.width = 350;
gallery.innerWidth = gallery.content.width();
gallery.timer = false;
gallery.init();
});
gallery = {};
gallery.offset = function() {
var left = gallery.content.position().left;
if (gallery.scroll == '>') {
if (left < 0) {
left += gallery.width;
}
} else {
if (left <= 0 && left >= ((gallery.innerWidth * -1) + (gallery.width * 2))) {
left -= gallery.width;
}
}
return left + "px";
}
gallery.slide = function() {
if (gallery.timer) {
clearTimeout(gallery.timer);
}
if (gallery.scroll) {
$(gallery.content)
.stop(true,true)
.animate({left: gallery.offset()}, 500);
gallery.timer = setTimeout(gallery.slide, 1000);
}
}
gallery.direction = function(e,which) {
var x = e.pageX - which.offset().left;
gallery.scroll = (x >= gallery.width / 2) ? ">" : "<";
}
gallery.init = function() {
$(gallery.trigger)
.mouseout(function() {alert("hit mouseout")})
.click(function() {alert("you clikced")})
.mouseout(function() {gallery.scroll = false;})
.mousemove(function(e) {gallery.direction(e,gallery.trigger);})
.mouseover(function(e) {
gallery.direction(e,gallery.trigger);
gallery.slide()
});
}