代码之家 › 专栏 › 技术社区 › Steve Perks

如何使背景可点击

css html jquery

Steve Perks · 技术社区 · 17 年前

我最初的想法是“不”,但我想得越多,我就越觉得如果我使用JavaScript使body元素可点击,或者将背景图像伪装成内容下面的一层并使其可点击,那么这是可能的。

jQuery:

$('body').click()

<body>
  <div id="sponsors-div" style="position:fixed;z-index:0;"><a style="display:block;height:100%" href="http://sponsors.url"></a></div>
  <div id="site-container" style="position:relative;z-index:1;">...

5 回复 | 直到 17 年前

Scott 17 年前

您需要注意IE和Mozilla之间的事件顺序(事件捕获与冒泡)差异。如果您有一个包含onClick事件的元素,该事件基本上占据了整个页面,然后其他可单击的元素位于该元素的“顶部”,则单击其中一个元素可能会触发两个事件,这可能不是预期的功能。

PPK 比我解释得更清楚。

karim79 17 年前

$('#area51').click(function() {...

Tom Clarkson 17 年前

赞助商div上的点击事件应该会起作用。将其放在正文上可能会影响页面的其他部分(正文的子元素)。

janhartmann 17 年前

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

从本网站获得一些灵感: http://newline.dk/index.aspx

Corgalore 13 年前

我为此写了一个解决方案,因为我找不到一个完整的跨浏览器解决方案。它的设计目的是在一个网站网络上承载和显示一个可点击的赞助商背景。

$(function () {
//** change these values to your own
var bg_ad_css = "url(http://cdn.my-domain.com/sponsor-bg.jpg) no-repeat center top #ffffff";
var bg_ad_url = "http://www.sponsor-website.com/";
//**
var bg_ad_anchor = $(document.createElement("a"));
bg_ad_anchor.css({ display: "block", position: "absolute", "z-index": 0, top: 0, left: 0, width: $(window).width(), height: $(window).height() });
bg_ad_anchor.attr("target", "_blank").attr("href", bg_ad_url);
$(window).resize(function () {
    if (bg_ad_anchor) {
        bg_ad_anchor.css({ width: $(window).width(), height: $(window).height() });
    }
});
if (window._bg_ad) {
    for (var i = 0; i < _bg_ad.contentWrappers.length; i++) {
        var element = _bg_ad.contentWrappers[i];
        $(element.selector).css({ position: "relative", "z-index": element.zIndex == undefined ? 1 : element.zIndex });
    }
}
$("body").css({ "background": bg_ad_css }).append(bg_ad_anchor);

});

然后在一个或多个网站中使用它:

<script type="text/javascript">
    var _bg_ad = {
        //These should be content areas that need to be above the banner link
        //You may only need one element in this array, customize at will
        contentWrappers: [{ selector: "#top_bar", zIndex: 2 }, { selector: "#wrapper" }, { selector: "#footerBottom" }]
    };
</script>
<script type="text/javascript" src="http://www.my-domain.com/js/bg-ad.js"></script>

推荐文章