javascript - jQuery显示数分钟的div

  显示原文与译文双语对照的内容
0 0

你好,我有多个不同id的div,现在我想在 3分钟内显示这个广告 div,现在我想显示这个广告 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>

如果在 div e.g main_2,那么在1 分钟 show_ad div将只显示1 分钟后自动关闭,并自动关闭

同样的用户再次点击 main_3,同样的进程会再次激活

时间:原作者:7个回答

0 0

这可能会让你开始: 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);
 });
});
原作者:
0 0

你的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中选择以特定名称开头的标识,请使用以下命令:

$('div[id^="id_here"]')
原作者:
0 0

给主div一个公共类,这样你就可以轻松地将它们全部选中,e.g.:

<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网站的 API中找到我所使用的所有方法的全部解释。

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

原作者:
...