Php 在另一个div上叠加一个banner div,如果可能的话使用jQuery
我有一个“新闻”栏目和一个“横幅”栏目。Php 在另一个div上叠加一个banner div,如果可能的话使用jQuery,php,jquery,css,cookies,Php,Jquery,Css,Cookies,我有一个“新闻”栏目和一个“横幅”栏目。 我希望用户在页面加载时看到“banner”div。该“横幅”分区应显示在“新闻”分区的上方,正好显示在“新闻”分区的位置上方。因此: 我应该如何检测“news”div的位置并在不影响网格结构的情况下显示“banner”div 是否有任何jQuery插件允许用户隐藏该div并不再显示?有饼干吗 希望你理解我的想法。我留下一个图像: 使用jquery的偏移量 以及jquery的显示和隐藏 您可以使用横幅的负边距来查看新闻…div 如果你需要什么,请告
我希望用户在页面加载时看到“banner”div。该“横幅”分区应显示在“新闻”分区的上方,正好显示在“新闻”分区的位置上方。因此:
- 我应该如何检测“news”div的位置并在不影响网格结构的情况下显示“banner”div
- 是否有任何jQuery插件允许用户隐藏该div并不再显示?有饼干吗
您应该在第一次加载时看到一个横幅,然后再次单击“运行”,它应该消失。
横幅将使用绝对定位、宽度/高度和新闻列表的上/左偏移量精确定位在新闻列表上方。我意识到这个问题已经得到了回答,但我想我会提供一个稍微的替代方案,使用CSS、jQuery和: html: jQuery: 更令人愉快的演示,包括:
经过事后编辑,假设您获得了重复访客,那么在初始的
中重新设置cookie(如果
检查),以确保他们再也看不到横幅(除非他们在访问间隔超过30天),将其更改为:
if ($.cookie('closed')){
$('.banner').remove();
$.cookie('closed',true,{expires: 30});
}
马上检查一切。有一个问题,所以我无法进入,所以直到现在才尝试所有回复都不起作用(不知道为什么,可能必须在代码中进行一些修改),直到我尝试了最后一个,有效->因此选择
.container {
width: 80%;
min-height: 400px;
position: relative;
border: 4px solid #000;
}
.news {
width: 100%;
height: 100%;
}
.banner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #f00;
}
.close {
position: absolute;
top: 0;
right: 0;
border-left: 2px solid #fff;
border-bottom: 2px solid #fff;
width: 2em;
line-height: 2em;
text-align: center;
display: block;
cursor: pointer;
}
#clear {
width: 80%;
text-align: right;
color: #fff;
background-color: #999;
border: 4px solid #000;
border-top-width: 0;
font-family: arial, sans-serif;
cursor: pointer;
}
$(document).ready(
function(){
if ($.cookie('closed')){
$('.banner').remove();
}
$('.close').click(
function(){
$(this).closest('.banner').remove();
$.cookie('closed',true, {expires: 30});
});
$('#clear').click(
function(){
$.cookie('closed',false, {expires: -200});
});
});
$(document).ready(
function(){
if ($.cookie('closed')){
$('.banner').remove();
}
$('.close').click(
function(){
$(this)
.closest('.banner')
.animate(
{
'top':'120%'
}, 1500,
function(){
$(this).remove();
}
);
$.cookie('closed',true, {expires: 30});
});
$('#clear').click(
function(){
$.cookie('closed',false, {expires: -200});
});
});
if ($.cookie('closed')){
$('.banner').remove();
$.cookie('closed',true,{expires: 30});
}