<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style>
.banner{
width:100%;
background:url(../images/music_banner.jpg) no-repeat center;
height:560px;
}
</style>
<body>
<div class="banner" id="banner">
</body>
<script src="static/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var w=$(window).width();
alert(w);
if(w>1200 && w<1400)//1366分辨率下
{
$("#banner").css("background", "url(static/images/music_banner-1366.jpg) no-repeat center");
$("#banner").css("height", "397px");
$('#navbar-menu li').hover(function(){
$('body').css({
"overflow-x":"hidden",
"overflow-y":"hidden"
});
})
}else if(w>1401 && w<1700)//1440 及 1680分辨率下
{
$("#banner").css("background", "url(static/images/music_banner-1440.jpg) no-repeat center");
$("#banner").css("height", "420px");//1440尺寸图片的高度
}
});
</script>
</html>
