<!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. sqlplus编译失效对象

    原文整理自:http://www.51testing.com/?uid-16403-action-viewspace-itemid-98161:http://www.eygle.com/archive ...

  2. 深入理解koa中的co源码

    阅读目录 一:理解Generator 二:理解js函数柯里化 三:理解Thunk函数 四:理解CO源码 回到顶部 一:理解Generator 在看co源码之前,我们先来理解下Generator函数.G ...

  3. CSS的插入和选择器介绍

    一.认识CSS样式 1.定义 CSS全称:层叠样式表(Cascading Style Sheets) 主要作用:定义HTML内容在浏览器内的显示样式,比如文字大小.颜色.字体加粗等 优点:通过定义某个 ...

  4. Apache Spark 内存管理详解(转载)

    Spark 作为一个基于内存的分布式计算引擎,其内存管理模块在整个系统中扮演着非常重要的角色.理解 Spark 内存管理的基本原理,有助于更好地开发 Spark 应用程序和进行性能调优.本文旨在梳理出 ...

  5. java.net.UnknownHostException: lc001 未知的网络服务

    java.net.UnknownHostException: lc001 未知的网络服务 读取的是虚拟机的名称 一.查询环境变量 :echo $HOSTNAME lc001 没什么问题 二.查host ...

  6. ASP.NET MVC5+EF6+EasyUI 仓库管理系统

    简介 此系统是在框架基础上叠加的仓库系统功能,同样是开源的,可以用于简单的仓库管理,您也可以在此基础上继续开发与完善! 仓库的框架功能会随着框架的升级而同样升级,仓库管理售价1666,已经购买过框架的 ...

  7. Python异常处理try except

    原文地址:https://www.cnblogs.com/init-life/p/9105546.html 异常处理try except 在Python中,异常处理,主要是try except语句,通 ...

  8. NOIP2016解题报告

    天天听这几道题,但其实题面都没看过.今天做一下. 每道题看懂题后基本一分钟左右就切了.D2T3想的是\(O(n\log n)\)的堆做法,至少90分吧. D1T1模拟即可. D1T2每条路径拆成到根的 ...

  9. poj3468 线段树的懒惰标记

    题目链接:poj3468 题意:给定一段数组,有两种操作,一种是给某段区间加c,另一种是查询一段区间的和 思路:暴力的方法是每次都给这段区间的点加c,查询也遍历一遍区间,复杂度是n*n,肯定过不去,另 ...

  10. hdu 2063 给男女匹配 (匈牙利算法)

    来源:http://acm.hdu.edu.cn/showproblem.php?pid=2063 题意: 有k个组合a,b组合,代表a愿意与b坐过山车,共m个女生 n个男生,问有多少个满意的匹配 题 ...