Question

您好我有多个div由不同的ID分隔，我有一个名为show_ads的潜水现在我想在3分钟后显示当前活动div上的此广告div一次只需10秒即可显示我的广告关闭show_ads div

这是我的代码：

<div id="main_1">
//content here for 1
</div>

<div id="main_2">
//content here for 2
</div>

<div id="main_3">
//content here for 3
</div>

<div id="main_4">
// content here for 4
</div>



<div id="show_ads">
// ad code here
</div>

e.g。如果有人点击div main_2那么意味着main_2 div目前已经激活3分钟后show_ad div将只出现一次10秒并自动关闭

然后同一个用户再次点击main_3，同一进程将再次激活

Answer 1

也许这会让你开始：http://jsfiddle.net/gd217fgo/

HTML：

<div id="main_1" >
    div 1
</div>

<div id="show">
    ad here
</div>

JavaScript的：

$(function() {
    $("#show").hide();
    $("#main_1").click( function(){
        setTimeout(function(){
                $("#show").show();
            setTimeout(function() {
        $("#show").hide()
    }, 5000);
        }, 3000);
    });
});

Answer 2

你的HTML：

<div id="main_1">
    <div class="content">
    <h1>Lorem ipsum</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh nisi, scelerisque eget ultrices ut, euismod id justo. Vivamus vitae nibh pellentesque, consequat metus ut, rhoncus enim. Curabitur blandit sem sed diam pretium, nec mattis erat hendrerit. Maecenas a magna erat. Morbi in turpis eget orci suscipit dignissim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris turpis augue, sollicitudin at odio non, fermentum imperdiet augue. In hac habitasse platea dictumst. Maecenas rutrum ante ipsum, sit amet euismod risus dapibus ut. Praesent eget magna vel nisi vehicula vestibulum. Quisque nec nunc pulvinar, blandit magna at, hendrerit nibh. Sed mattis massa a massa lacinia venenatis. Donec non erat justo.</p>
</div>
    <div class="read-more"><a onClick="$().readMore();">Read more</a></div>
</div>
<div id="main_2">
//content here for 2
</div>

<div id="main_3">
//content here for 3
</div>

<div id="show_ads">
    <center>Ads here</center>
</div>

你的css：

#main_1 {
    background-color: #F1F1F1;
}
.content {
    width: 500px;
    height: 200px;
    overflow: hidden;
}
.read-more a {
    cursor: pointer;
    line-height: 50px;
    padding: 10px;
    background-color: red;
}
#show_ads {
    width: 500px;
    height: 200px;
    background: rgba(0,0,0,.3);
    position: absolute;
    top: 10px;
    display: none;
}

jQuery的：

(function( $ ){
   $.fn.readMore = function() {
      $("#show_ads").show();
      window.setInterval(function(){
         $("#show_ads").hide();
         $(".content").height(500);
         $(".read-more").hide();
      }, 5000);
   };
})( jQuery );

在JsFiddle中查看：http://jsfiddle.net/cp5rayo1/

要在jQuery中选择以特定名称开头的Id，请使用：

$('div[id^="id_here"]')

Answer 3

给你的主要div一个共同的类，以便你可以轻松地选择它们，例如：

<div id="main_1" class="main">

然后您可以按如下方式将点击绑定到它们：

$(document).ready(function() {
  $("#show").hide();            // hide the ad to start
  $(".main").click(function() { // on click of any main div
    $("#show").stop(true,true)  // stop any previous animation
              .hide()           // hide the ad
              .appendTo(this)   // move the ad to the clicked div
              .delay(180000)    // wait 3 minutes before next animation step
              .fadeIn(10)       // fade the ad in
              .delay(10000)     // then wait 10 seconds
              .fadeOut(100);    // hide the ad
  });
});

请注意，当您追加（或.appendTo()）已存在的元素时，该元素将被移动，不会被复制。我可以在jQuery's API site找到我所使用的所有方法的完整说明。

演示：http://jsfiddle.net/181b4zf7/

jQuery显示div几分钟

3 个答案: