<!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. POJ2749 Building roads

    嘟嘟嘟 最近把21天漏的给不上. 今天重温了一下2-SAT,感觉很简单.就是把所有条件都转化成如果--必然能导出--.然后就这样连边建图,这样一个强连通分量中的所有点必然都是真或者假.从而根据这个点拆 ...

  2. Linux：Day8(下) RAID

    RAID:Redudant Arrays of Inexpensive(Independent) Disks    廉价(独立)冗余磁盘阵列 提高IO能力:磁盘并行读写: 提高耐用性:磁盘冗余来实现: ...

  3. openjdk8源码编译

    1. 安装源码管理工具 yum install mercurial 2. 下载源码 hg clone http://hg.openjdk.java.net/jdk8u/jdk8u jdk8u #执行源 ...

  4. Java常见的几种内存溢出及解决方案

    1.JVM Heap(堆)溢出:java.lang.OutOfMemoryError: Java heap space JVM在启动的时候会自动设置JVM Heap的值, 可以利用JVM提供的-Xmn ...

  5. iOS开发之CoreImage

    CoreImage是iOS中的一个图像处理框架,提供了强大高效的图像处理功能,可以通过调用简单的API来使用框架所带的各种滤镜对图像进行处理. CoreImgae的三个重要组成部分:1.CIFiter ...

  6. IntelliJ IDEA 破解方法

    2017版破解方法: 1. 到网站http://idea.lanyus.com/,按要求修改电脑HOST,获取注册码: 使用前请将“0.0.0.0 account.jetbrains.com”添加到h ...

  7. odoo学习总结

                                                   odoo10总结 1.odoo中的向导应用. .py文件 # -*- coding: utf-8 -*-f ...

  8. React-菜鸟学习笔记（二）

    这篇新颖的东西是React的组件的封装和引用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8& ...

  9. Signalr实现消息推送

    一.前言 大多数系统里面好像都有获取消息的功能,但这些消息来源都不是实时的,比如你开两个浏览器,用两个不同的账号登录,用一个账号给另外一个账号发送消息,然而并不会实时收到消息,必须要自己手动F5刷新一 ...

  10. 配置Nginx虚拟主机

    实验环境 一台最小化安装的CentOS 7.3虚拟机 配置基本环境 1. 安装nginx yum install -y epel-* yum isntall -y nginx vim 2. 建立虚机主 ...