JQ判断在不同分辨率电脑下使用不同的banner尺寸 

<!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>

 

posted @ 2017-06-13 09:50  夏小夏吖  阅读(1029)  评论(0)  编辑  收藏  举报