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

JQ判断在不同分辨率电脑下使用不同的banner尺寸的更多相关文章

  1. jq判断滚动条向上还是向下

    $(document).ready(function(){ ,t=; $(window).scroll(function(e){ p = $(this).scrollTop(); if(t<=p ...

  2. js判断是手机还是电脑访问网站

    js判断是手机还是电脑访问网站                               <script type="text/javascript"> <!- ...

  3. JavaScript判断鼠标滑轮是向下还是向上滚动

    我们常用的就是鼠标,鼠标中键一般都用于滑动网页,但是网页中很多很炫的效果,使用鼠标滑轮操作更好. 当然对于手机就没有这个设备了,所以就不用考虑手机端的实现方法,手机端有触摸滑动事件. 使用JavaSc ...

  4. jq 判断输入数字

    jq 判断输入数字 <input   id="N_source" name="N_source"   type="text" valu ...

  5. vc 判断哪个按键 被按下 消息 按键 状态

    测试Numlock 是否是亮的 环境控制台程序: #include "stdafx.h" #include <stdio.h> #include <conio.h ...

  6. 滚动条大于120px时，判断pc端的情况下，导航条固定定位

      //滚动条大于120px时,判断pc端的情况下,导航条固定定位 $(window).scroll(function(){ var viewWidth=$(document).width() var ...

  7. Android手机在不同分辨率情况下字体自适应大小

    两种解决方法: 一. 1.首先根据不同分辨率获取不同字体大小. 在RES里创建values-480x320/strings.xml 里面设置<dimen name="Text_size ...

  8. mac 电脑下添加 HTMLtestrunner.py 生成 报表

    HTMLTestRunner是Python标准库unittest模块的一个扩展.它生成易于使用的HTML测试报告. 1.下载HTMLTestRunner.py模块地址 http://tungwaiyi ...

  9. Mac电脑下配置maven环境变量

    Mac电脑下配置maven环境变量 打开终端,使用 touch 命令创建 .bash_profile 文件 touch .bash_profile 编辑刚刚创建的文件 .bash_profile vi ...

随机推荐

  1. 转:// LINUX下为ORACLE数据库设置大页--hugepage

    一.在解释什么情况下需要开启大页和为啥需要开启大页前先了解下Linux下页的相关的知识:以下的内容是基于32位的系统,4K的内存页大小做出的计算1)目录表,用来存放页表的位置,共包含1024个目录en ...

  2. Spring配置中的"classpath:"与"classpath*:"的区别研究（转）

    Spring配置中的"classpath:"与"classpath*:"的区别研究(转)   概念解释及使用场景: classpath是指WEB-INF文件夹下 ...

  3. docker-1-环境安装及例子实践

    1.安装go 先新建一个Go的工作空间文件夹,文件夹路径建议放在$HOME下: userdeMacBook-Pro:~ user$ cd $HOME userdeMacBook-Pro:~ user$ ...

  4. leetcode 4：Median of Two Sorted Arrays

    public double FindMedianSortedArrays(int[] nums1, int[] nums2) { int t=nums1.Length+nums2.Length; in ...

  5. springmvc+thymeleaf搭建框架启动报错

    最近项目开发需要用到thymeleaf前端界面模板引擎,所以提前了解学习一下,但是在框架搭建好了之后启动tomcat一直提示如下错误: org.springframework.beans.factor ...

  6. vim 正则非贪婪模式

    比如多匹配使用 .* 效果自然是贪婪模式,JS 的非贪婪很简单,是 .*? 即可,而 vim 不同,语法是 .\{-},注意 \ 转义.

  7. require('./expample.js).default详解

    最近总碰到类似于 var a = require('./expample.js).default 这样的代码,感觉很奇葩,总结一波. 为什么会出现这个问题? import 是静态编译的,而 requi ...

  8. 二次剩余 Cipolla算法

    欧拉准则 \(a\)是\(p\)的二次剩余等价于\(a^{\frac{p-1}{2}}\equiv 1\pmod p\),\(a\)不是\(p\)的二次剩余等价于\(a^{\frac{p-1}{2}} ...

  9. DevOps工程师到底做些什么？

    我们之前已经听到很多谈论DevOps和DevOps世界的最新趋势的事情,但是就DevOps工程师本身,到底干些什么呢? 在最纯粹的存在形式上来说,DevOps工程师是为了加快开发和运营团队之间的交付效 ...

  10. latex 图片标题居中

    1.有一个全局图片标题居中的方法: \usepackage[justification=centering]{caption} 2.如果排版时有的图标题想左对齐,有的想居中,前一个方法就不好了,这里可 ...