full-background.js
$(window).on('load', function () {
$(window).trigger('resize');
});
$(function () {
var $window = $(window),
isLoaded = false;
function resizeBg() {
var winWidth = $window.width(),
winHeight = $window.height(),
viewportAspectRatio = winWidth / winHeight;
$('.full-bg').each(function (index, item) {
var $bg = $(item),
bgWidth = $bg.width(),
bgHeight = $bg.height(),
aspectRatio = bgWidth / bgHeight;
if (viewportAspectRatio < aspectRatio ) {
$bg.removeClass('full-width')
.addClass('full-height')
.css({
top: 0,
left: -(winHeight * aspectRatio - winWidth) / 2
});
} else {
$bg.removeClass('full-height')
.addClass('full-width')
.css({
top: -(winWidth / aspectRatio - winHeight) / 2,
left: 0
});
}
});
}
$window.on('resize', resizeBg);
$('.full-bg').on('load', function () {
$(window).trigger('resize');
});
});
enquire.register('screen and (max-width: 760px)', {
match: function () {
$('.responsive-img').each(function () {
var $img = $(this),
src = $img.data('mobile-src');
if (src) {
$img.attr('src', src).show();
} else {
$img.hide();
}
});
},
unmatch: function () {
$('.responsive-img').each(function () {
var $img = $(this),
src = $img.data('src');
if (src) {
$img.attr('src', src).show();
} else {
$img.hide();
}
});
}
});
enquire.register('screen and (min-width: 761px)', {
match: function () {
$('.responsive-img').each(function () {
var $img = $(this),
src = $img.data('src');
if (src) {
$img.attr('src', src).show();
} else {
$img.hide();
}
});
},
unmatch: function () {
$('.responsive-img').each(function () {
var $img = $(this),
src = $img.data('mobile-src');
if (src) {
$img.attr('src', src).show();
} else {
$img.hide();
}
});
}
});
full-background.js的更多相关文章
- chrome插件background.js 和 popup.js 交互
要实现background.js 和 popup.js 之间的交互,首先需要先配置好 manifest.json文件,如: "background":{ //"page& ...
- metamask源码学习-background.js
这个就是浏览器后台所进行操作的地方了,它就是页面也区块链进行交互的中间部分. metamask-background描述了为web扩展单例的文件app/scripts/background.js.该上 ...
- Node.js异步处理CPU密集型任务
Node.js异步处理CPU密集型任务 Node.js擅长数据密集型实时(data-intensive real-time)交互的应用场景.然而数据密集型实时应用程序并非仅仅有I/O密集型任务,当碰到 ...
- 转:Node.js异步处理CPU密集型任务的新思路
原文来自于:http://www.infoq.com/cn/articles/new-idea-of-nodejs-asynchronous-processing-tasks?utm_source=i ...
- vue的测试(Vue.js devtool)
1. 安装chrome插件:Vue.js devtools(https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejigli ...
- vue-devtools(vue 2.0)手动安装与使用 ? 如何处理Vue.js is detected on this page ?
vue-devtools手动安装与使用 一.在github上下载压缩包,github下载地址:https://github.com/vuejs/vue-devtools 二.解压到本地的某盘 三. ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- Chrome插件开发,美化网页上的文件列表。chrome-extension,background
上一篇文章 通过“content-scripts”的方式向页面注入js和css来美化页面,但是有一个弊端:一旦配置好需要注入的页面,之后如果这个页面地址以后发生变化,或者要新加一些URL进来,那么得修 ...
- metamask源码学习-ui/index.js
The UI-即上图左下角metamask-ui部分,即其图形化界面 The MetaMask UI is essentially just a website that can be configu ...
- js:浏览器插件
1.chrome background.js //chrome.webRequest.onBeforeRequest.addListener(function(info) { // chrome.ta ...
随机推荐
- Python一路走来 面向对象1
面向对象: 类,对象 函数放在类里,叫方法 封装 #如何调用 1. 创建对象, 类名() obj= Foo() 2. 通过对象去执行方法 obj.mail("leon@me.com" ...
- iOS 6分享列表——UIActivityViewController详解
iOS 6分享列表——UIActivityViewController详解 2013-06-03 01:42:33 发表评论 在iOS 6之后提供了一个分享列表视图,它通过UIActivity ...
- 第二、UIScrollView的使用大全
UIScrollView UIPageControl 的使用 2011-11-19 16:48 4690人阅读 评论(0) 收藏 举报 imagescrollspringiphone // // ...
- [TYVJ] P1031 热浪
热浪 背景 Background USACO OCT09 9TH 描述 Description 德克萨斯纯朴的民眾们这个夏天正在遭受巨大的热浪!!!他们的德克萨斯长角牛吃起来不错,可是他们并不是很 ...
- 开心菜鸟系列学习笔记--------初探Nodejs(了解篇)
一Node.js开始学习了! 1) 输出hellow worlds a.建一个js文件 hello.js 写 console.info('hellow world !!!'); 进入终 ...
- 收集点小文,讲CGI,FASTCGI,PHP-CGI,PHP-FPM之间通透点的文章
http://blog.csdn.net/meegomeego/article/details/36180343 http://www.opsers.org/linux-home/server/php ...
- web字体格式及几种在线格式转换工具介绍
原文地址:http://blog.csdn.net/xiaolongtotop/article/details/8316554 目前,文字信息仍是网站最主要的内容,随着CSS3技术的不断成熟,Web字 ...
- WEB打印插件jatoolsPrinter
为什么选择 jatoolsPrinter 免费版? 支持无预览直接打印 真正免费,不加水印,没有ip或域名限制,不限时间,兼容ie6+ 无须注册,下载即用 提供经过微软数字签名的cab自动安装包,安装 ...
- UGUI Button和Toogle动态添加事件
如果你想动态创建Button和Toogle 等等一系列控件,需要动态添加事件的如下. 拿button和Toogle抛砖引玉O(∩_∩)O~ using UnityEngine; using Syste ...
- PC--CSS技巧
1.图片不存在的时候,显示一个默认图片 <img src=”01.jpg” onerror=”this.src=’02.jpg'” /> 2.CSS强制图片自适应大小 img {width ...