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 ...
随机推荐
- C#编程实现朴素贝叶斯算法下的情感分析
C#编程实现 这篇文章做了什么 朴素贝叶斯算法是机器学习中非常重要的分类算法,用途十分广泛,如垃圾邮件处理等.而情感分析(Sentiment Analysis)是自然语言处理(Natural Lang ...
- 正则匹配<img src="xxxxxx" alt="" />标签的相关写法
1.(<img\ssrc[^>]*>) 2.content.replace(/<img [^>]*src=['"]([^'"]+)[^>]*&g ...
- Effective Java实作toString() - 就是爱Java
Object class中,也定义了toString()这个方法,因此所有的class也都继承这个方法.默认是传回这个对象完整类别名称,后面接一个"@",及一个不带正副号的十六进制 ...
- DBA 思想天空笔记
/*+leading(t1) use_nl(t2*/这个HINT的含义,其中use_nl表示强制用嵌套循环连接方式.Leading(t1)表示强制先访问t1表,也就是t1表作为驱动表,增加HINT的目 ...
- Poj2946-The Warehouse(bfs+哈希)
题目我就不粘贴了... 题意:给出地图,最大8*8,出口用'E'表示,空地用'.'表示,数字表示此处有多少个箱子,主人公的起点应该是在有箱子的地方,他可以朝四个方向移动,但是只有两种方式 一种是他移动 ...
- Java配置文件Properties的读取、写入与更新操作
/** * 实现对Java配置文件Properties的读取.写入与更新操作 */ package test; import java.io.BufferedInputStream; import j ...
- C#~使用FileSystemWatcher来监视文件系统的变化
对于一个文件夹的改变,C#这边有自己的类来实现,我们不需要关心它的内部实现机制,不需要关心它底层调用哪些API,我们只需要关心如何去调用它,如何让它帮助我们记录文件夹的修改情况即可. #region ...
- c# 委托delegate 编写计算器
.Net 中的委托类似于 C 或 C++ 中的函数指针.使用委托使程序员可以将方法引用封装在委托对象内.然后可以将该委托对象传递给可调用所引用方法的代码,而不必在编译时知道将调用哪个方法.与 C 或 ...
- [Regex Expression] Match mutli-line number, number range
/^-?\d{,}\.\d+$/gm
- iOS8 Core Image In Swift:人脸检测以及马赛克
iOS8 Core Image In Swift:自动改善图像以及内置滤镜的使用 iOS8 Core Image In Swift:更复杂的滤镜 iOS8 Core Image In Swift:人脸 ...