广告浮窗功能,带隐藏和显示功能
.top_arrow { border: 0 none; bottom: 115px; cursor: pointer; display: block; position: fixed; right: 0px; width: 175px; z-index: 2147483647;}
.top_arrow img.banner{ width:145px; height: 185px;}.top_arrow .top_arrow_red{ display: none}
页面:<script src="<%=request.getContextPath()%>/scripts/top_arrow.js" type="text/javascript"></script>
<div id="top_arrow_banner" class="top_arrow">
<img src="/images/hide.gif" id="contral" /><a href="<s:property value="@com.ivmall.core.util.ConfigUtil@getString('mnj.home.url', 'http://mnj.ivmall.com.cn')" escape="false"/>/player.html" target="_blank"><img src="/images/trailerMnj.jpg" class="banner"></a>
</div>
<div id="top_arrow_banner1" class="top_arrow" style="display: none;right: -70px">
<img src="/images/show.gif" id="contral2" style="width:22px;height: 185px;" />
</div>
<script type="text/javascript">
$("#contral").click("blur",function(){
$("#top_arrow_banner").css("display","none");
$("#top_arrow_banner1").css("display","");
return ;
});
$("#contral2").click("blur",function(){
$("#top_arrow_banner").css("display","");
$("#top_arrow_banner1").css("display","none");
return ;
});
</script>
top_arrow.js
$(document).ready(function(){
//首先将#top_arrow隐藏
$("#top_arrow").hide();
$("#top_arrow_banner").show();
//当滚动条的位置处于距顶部100像素以下时,跳转链接出现,否则消失
$(function () {
$(window).scroll(function(){
// $("#top_arrow_banner").hide();
if ($(window).scrollTop()>100){
$("#top_arrow").fadeIn(400);
}
else
{
//$("#top_arrow_banner").show();
$("#top_arrow").fadeOut(400);
}
});
//当点击跳转链接后,回到页面顶部位置
$("#top_arrow").click(function(){
$('body,html').animate({scrollTop:0},400);
return false;
});
$("#top_arrow").bind("mouseover",function(){
$("#top_arrow .top_arrow_gray").hide();
$("#top_arrow .top_arrow_red").show();
});
$("#top_arrow").bind("mouseout",function(){
$("#top_arrow .top_arrow_gray").show();
$("#top_arrow .top_arrow_red").hide();
})
});
});