<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>左右条幅广告</title>
<style type="text/css">
.ad-left{
background-image:url(couplet_left.gif);
border: 1px solid #fcc;
position:absolute;
top:100px;
left:16px;
width:100px;
height:231px;
z-index:1;
cursor:pointer;
}
.ad-right{
background-image:url(couplet_right.gif);
border: 1px solid #fcc;
position:absolute;
top:100px;
right:16px;
width:100px;
height:231px;
z-index:1;
cursor:pointer;
}
.left-close{
position:absolute;
left: 17px;
top: 101px;
width: 11px;
z-index:2;
border:0px;
cursor:pointer;
}
.right-close{
position:absolute;
z-index:3;
border:0px;
right: 16px;
top: 100px;
cursor:pointer;
}
</style>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
//页面scroll事件时触发
$(this).scroll(function() {
var bodyTop = 0;
if (typeof window.pageYOffset != 'undefined') {
bodyTop = window.pageYOffset;
}
else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat')
{
bodyTop = document.documentElement.scrollTop;
}
else if (typeof document.body != 'undefined') {
bodyTop = document.body.scrollTop;
}
//设置层的CSS样式中的top属性,注意要是小写,要符合“标准”
$(".ad-left,.left-close,.ad-right,.right-close").css("top", 100 + bodyTop);
});
//页面加载时发生
$(document).ready(function(){
//点击关闭按钮时,两边条幅隐藏
$(".left-close,.right-close").click(function(){
$(".ad-left,.ad-right,.left-close,.right-close").hide();
});
//点击左右条幅时,跳到活动页面
$(".ad-left,.ad-right").click(function(){
window.open("redJuly.html");
});
});
</script>
</head>
<body>
<div class="left-close"><img src="close.gif" /></div>
<div class="ad-left"></div>
<div class="right-close"><img src="close.gif" /></div>
<div class="ad-right"></div>
</body>
</html>
jquery实现左右条幅广告效果
最新推荐文章于 2020-09-28 11:23:39 发布