JQ 上下中下四个浮窗
JQ 左右中下四个浮窗
index.html
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>左右中下浮窗</title>
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<base target="_blank" />
</head>
<body>
<div style="height:10000px;"></div>
<style type="text/css">
/*js style*/
.j-fixleft{ width:126px; height:420px; position:fixed; display:none;}
.j-fixright{ width:131px; height:473px; border:2px solid #e6e6e6; position:fixed; background-color:#fff; display:none;}
.j-fixright ul{ width:125px; height:69px; overflow:hidden; margin:2px auto 0 auto;}
.j-fixr-position{ position:relative;}
.j-fixr-close{ position:absolute; right:3px; top:3px; width:11px; height:11px; display:block;}
.j-fixright ul li{ position:relative; width:62px; height:69px; overflow:hidden;}
.j-fixright ul li img{ position:absolute; top:0; left:0;}
.j-fixr-qq{ width:125px; height:55px;}
.j-fixr-tel{ width:125px; height:53px;}
.j-fixr-box{ width:125px; height:145px;}
.j-fixr-qq,.j-fixr-tel,.j-fixr-box{ width:125px; margin:0 auto; padding:0; overflow:hidden; padding-top:2px;}
.j-fixcenter{ width:419px; height:340px; position:fixed; display:none;}
.j-fixfooter{ width:100%; height:55px; position:fixed; left:0; bottom:0; z-index:999; display:none;}
.j-fixfoot{ width:100%; height:55px; background:url(img/fix/fixfooter_bg3.png) repeat-x; position:relative;}
.j-fixf{ width:1072px; height:55px; background:url(img/fix/fixfooter.png) no-repeat; margin:0 auto; z-index:99999; position:relative;}
.j-fixf-but1{ position:absolute; left:562px; top:19px;}
.j-fixf-but2{ position:absolute; left:684px; top:19px;}
.j-fixfoot-bg{ width:100%; height:130px; background:url(img/fix/fixfooter_bg2.png); margin:0 auto; position:absolute; top:-103px; left:0; z-index:-1; display:none;}
.j-fixfoot-bg img{ display:block; margin:0 auto;}
</style>
<div class="j-fixleft" id="fixLeft">
<img src="img/fix/fixleft.gif" usemap="#fixLeftMap">
<map name="fixLeftMap" id="fixLeftMap">
<area shape="rect" coords="101,0,126,20" href="javascript:void();" id="closeFixLeft" target="_self" />
<area shape="rect" coords="0,0,100,20" href ="/zixun/" />
<area shape="rect" coords="0,21,126,420" href ="/zixun/" />
</map>
</div>
<div class="j-fixright" id="fixRight">
<ul class="j-fixr-position">
<li class="g-fl"><a href="/zixun/"><img src="img/fix/fixr_icon1.jpg" /></a></li>
<li class="g-fr" ><a href="/zixun/"><img src="img/fix/fixr_icon2.jpg" /></a></li>
<span class="j-fixr-close g-fr" id="closeFixRight"><img src="img/fix/fixr_close.gif" /></span>
</ul>
<ul>
<li class="g-fl"><a href="/zixun/"><img src="img/fix/fixr_icon3.jpg" /></a></li>
<li class="g-fr"><a href="/zixun/"><img src="img/fix/fixr_icon4.jpg" /></a></li>
</ul>
<ul>
<li class="g-fl"><a href="/zixun/"><img src="img/fix/fixr_icon5.jpg" /></a></li>
<li class="g-fr"><a href="/zixun/"><img src="img/fix/fixr_icon6.jpg" /></a></li>
</ul>
<div class="j-fixr-qq">
<a href="http://wpa.qq.com/msgrd?v=3&uin=1141202288&site=qq&menu=yes"><img src="img/fix/fixr_qq.gif" /></a>
</div>
<div class="j-fixr-tel">
<a href="/zixun/"><img src="img/fix/fixr_tel.jpg" /></a>
</div>
<div class="j-fixr-box">
<img src="img/fix/fixr_box.jpg" />
</div>
</div>
<div id="fixCenter" class="j-fixcenter">
<img src="img/fix/fixcenter.gif" width="419" height="340" usemap="#fixCenterMap">
<map name="fixCenterMap" id="fixCenterMap">
<area shape="rect" coords="392,0,419,21" href="javascript:void();" id="closeFixCenter" target="_self" />
<area shape="rect" coords="0,0,391,21" href ="/zixun/" />
<area shape="rect" coords="0,22,419,340" href ="/zixun/" />
</map>
</div>
<div id="fixFooter" class="j-fixfooter">
<div class="j-fixfoot" id="fixFooterHover">
<div class="j-fixfoot-bg" id="fixFooterHoverBg"><a href="/zixun/"><img src="img/fix/fixfooter_bg.png" /></a></div>
<div class="j-fixf">
<a href="/zixun/" class="j-fixf-but1"><img src="img/fix/fixfooter_but1.gif" /></a>
<a href="/zixun/" class="j-fixf-but2"><img src="img/fix/fixfooter_but2.gif" /></a>
</div>
</div>
</div>
<!--[if (gte IE 7)|!(IE)]><!-->
<script type="text/javascript" src="js/demo.js"></script>
<!--<![endif]-->
</body>
</html>
demo.js
$(function(){
fixWindow();
});
$(window).resize(function(){
fixWindowGetPosition();
});
function fixWindow(){
fixWindowGetPosition();
//中间浮窗
var fixCenter = $("#fixCenter");
//显示时间
fixCenter.delay(10000).fadeIn(600);
$("#closeFixCenter").click(function(){
fixCenter.fadeOut(600);
//再次显示的时间
//fixCenter.fadeOut(600).delay(30000).fadeIn(600);
});
//左浮窗
var fixLeft = $("#fixLeft");
fixLeft.fadeIn(600);
$("#closeFixLeft").click(function(){
fixLeft.fadeOut(600);
});
//右浮窗
var fixRight = $("#fixRight");
fixRight.fadeIn(600);
$("#closeFixRight").click(function(){
fixRight.fadeOut(600);
});
$("#fixFooter").show(0);
}
function fixWindowGetPosition(){
var h = $(window).height();
var w = $(window).width();
//中间浮窗
var fixCenter = $("#fixCenter");
var fixCenterLeft = (w/2) - parseInt(fixCenter.css("width")) / 2;
var fixCenterTop = (h/2) - parseInt(fixCenter.css("height")) / 2;
fixCenter.css({"left":(fixCenterLeft) + "px", "top": (fixCenterTop) + "px" });
//左浮窗
var fixLeft = $("#fixLeft");
var fixLeftLeft = 0;
var fixLeftTop = (h/2) - parseInt(fixLeft.css("height")) / 2-50;
fixLeft.css({"left":(fixLeftLeft) + "px", "top": (fixLeftTop) + "px" });
//右浮窗
var fixRight = $("#fixRight");
var fixRightRight = 0;
var fixRightTop = (h/2) - parseInt(fixRight.css("height")) / 2-40;
fixRight.css({"right":(fixRightRight) + "px", "top": (fixRightTop) + "px" });
}
//右浮窗的图片特效
!function(){
$(".j-fixright ul li img").on("mouseenter",function(){
$(this).stop().animate({top: "-69px"},"slow");
}).on("mouseleave",function(){
$(this).stop().animate({top:"0px"},"slow");
});
setInterval(function(){
var num = Math.ceil(Math.random()*6);
$(".j-fixright ul li img").eq(num-1).animate({top: "-69px"},"slow");
$(".j-fixright ul li img").eq(num-1).animate({top: "0px"},"slow");
},4000);
}();
//底部鼠标经过的效果
!function(){
$("#fixFooterHover").on("mouseenter",function(){
$("#fixFooterHoverBg").show();
}).on("mouseleave",function(){
$("#fixFooterHoverBg").hide();
});
}();
效果图：