div需要背景来充当触发器

时间:2010-11-30 12:07:43

标签: jquery

我有一个简单的幻灯片放映我正在写一本书(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()
    });
}

0 个答案:

没有答案