浮动窗口布局与交互-优快云博客

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();
	});
}();

效果图：