2016-04-21 JQuery-浮动窗口
简介：利用Jquery实现浮动窗口背景色变化，即Div背景色的变化。同时，利用text-align:center;padding-top:5px;来实现Div中内容居中
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>JQuery-浮动</title>
<link type="text/css" rel="stylesheet" href=""/>
<style type="text/css">
#div0{z-index:999999;margin-top:200px;position:fixed;}
#div1,#div2,#div3,#div4{width:100px;height:20px;background:#707070;border:0px;color:#FFFFFF;text-align:center;padding-top:5px;font-size:14px;}
#div2,#div3,#div4{margin-top:4px;}
a{color:#FFFFFF;top:5px;}
</style>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
//利用JQuery实现div背景色的变化
$(document).ready(function(){
$("#div1,#div2,#div3,#div4").mouseover(function(){
$(this).css("background","#E00303");
}
);
$("#div1,#div2,#div3,#div4").mouseout(function(){
$(this).css("background","#707070");
}
);
});
</script>
</head>
<body>
<div id="div0">
<div id="div1">联系我们</div>
<div id="div2">微博微信</div>
<div id="div3">公众平台</div>
<div id="div4">回到顶部</div>
</div>
</body>
</html>
运行结果：
