分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!)
快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 :
<div class="wrap">
<div style="background: url(images/by_01.jpg) no-repeat top center;"></div>
<div style="background: url(images/by_02.jpg) no-repeat top center;"></div>
<div style="background: url(images/by_03.jpg) no-repeat top center;"></div>
</div>
$(".wrap div").each(function(){
var img=$(this);
var url=$(this).css('backgroundImage');
//console.log(url);
s = url.match(/url\((.*?)\)/);
url =s[1];
if(url[0]=="\""){url = url.slice(1,-1)}
//url=url.substring(5,url.length - 2);
//console.log(url);
$("<img/>").attr("src", url).load(function() {
realWidth = this.width;
realHeight = this.height;
//如果真实的宽度大于浏览器的宽度就按照100%显示
img.css("height",realHeight+"px");
});
/*
var img = $(this);
var realWidth;//真实的宽度
var realHeight;//真实的高度
//这里做下说明,$("<img/>")这里是创建一个临时的img标签,类似js创建一个new Image()对象!
$("<img/>").attr("src", 'images/'+$(img).attr("data-image")).load(function() {
realWidth = this.width;
realHeight = this.height;
//如果真实的宽度大于浏览器的宽度就按照100%显示
if(realWidth>=_w){
$(img).css("height",realHeight+"px");
}
else{//如果小于浏览器的宽度按照原尺寸显示
$(img).css("width",realWidth+'px').css("height",realHeight+'px');
}
});*/
});
分享一个快速设置背景的js 自动获取背景图的长宽的更多相关文章
- 【linux】centos6.9设置etc0网卡开机自动获取ip
在vm新安装的centos系统中,一般选择NAT来设置和主机共享局域网,通过ifconfig etc0 192.168.xx.xx 这种作法机器重启之后就会失效,所以可以使用更改文件的方式完成设置ce ...
- 详解如何设置CentOS 7开机自动获取IP地址
本例中以CentOS 7举例说明如何设置Linux开机自动获取IP地址和设置固定IP地址. 自动获取动态IP地址 1.输入“ip addr”并按回车键确定,发现无法获取IP(CentOS 7默认没有i ...
- 如何设置CentOS 7开机自动获取IP地址详解
本例中以CentOS 7举例说明如何设置Linux开机自动获取IP地址和设置固定IP地址. 自动获取动态IP地址 1.输入“ip addr”并按回车键确定,发现无法获取IP(CentOS 7默认没有i ...
- vue+element-ui upload图片上传前大小超过4m,自动压缩到指定大小,长宽
最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion ...
- 分享一个快速审查js操作Dom的css
第一步 打开开发者工具第二步 打开 Sources 面板第三步 执行用户操作让对象可见(例如鼠标悬停)第四步 在元素可见的时候按下 F8(与“暂停脚本执行”按钮相同)第五步 点击开发者工具左上角的“选 ...
- 分享一个小设置-项目启动时服务器指向本地IIS
背景,在X公司做的一个网站登录时需要域名的支持,就是说浏览器地址栏在localhost+端口号的形式下无法实现登录(必须是xxxx域名的形式), 但是很多时候都会先在线下进行测试,既然本地没有线上的环 ...
- 分享一个快速的Json(反)序列化开源项目 Jil
我们不缺少JSON的序列化库,但我们缺少一个性能非常好的库,这对于网站来说非常重要.今天我发现了Jil. 他是开源的代码: https://github.com/kevin-montrose/Jil ...
- 分享一个快速测试ios软件的工具
简易IPA安装地址生成器 地址: https://www.neicexia.com/IPADistribute/Resources/index.html?fromsite#IPADistribute- ...
- 分享一个操作pdf文件的js文件-pdfObject.js(文件预览、下载、打印等操作都具备)
获取相关资料或者源码的朋友可以关注下公众号,回复关键字pdf20200518即可
随机推荐
- ef to sqlite 实际开发问题终极解决方法
版本问题 vs安装问题 x64/x86 发布问题 针对开发中遇到的问题,通过一下方法解决: 1.sqlite下载地址http://system.data.sqlite.org/index.html/d ...
- ubuntu下samba服务器的安装与配置
参考网址:http://jingyan.baidu.com/album/00a07f38b9194082d028dc08.html?picindex=9 sudo service smbd resta ...
- JavaWeb学习笔记——DOM4J
下载的地址为:http://www.dom4j.org/dom4j-1.6.1/ import java.io.File; import java.io.FileOutputStream; impor ...
- 《CSS3实战》读书笔记 第2章 层叠样式表(CSS)
## 层叠样式表 本章将阐述CSS的基本规则. ### 解构CSS 所谓CSS,由选择器(selector)和声明块(declaration block)组成.再进一步细分,每个声明包括了属性和值. ...
- 项目管理知识框架PMBOK(文字版)
项目管理知识框架PMBOK 项目整体管理[I](Integration) 1. 制定项目章程(Develop Project Charter) 2. 制定项目初步范围说明书(Develop Pre ...
- MemberCached安装
先上干货.. http://yunpan.cn/cmnABPWq27Mk7 访问密码 2ab3 这包里是安装包和一个比较合适的例子..例子是从CSDN上下载的..觉得对新手有帮助. 不过在这之前.. ...
- 调整Linux磁盘分区的大小的方法
昨天数据入库时,一直报错,说磁盘满了,,df -h 一看,发现/目录下只有50G空间,已使用49G:我的程序和dbss都安装在/目录下,ftp到的数据放在/data下的一个子目录下,分解完的 ...
- firefox如何卸载插件plugins和临时文件夹
下载原版的 英文版的 firefox 会看到 openH264 video codec Plugin和microsoft DRM (digit rightcopy manager 数字版权管理)等等插 ...
- Linux下vim查看文件名
在vim下编辑时,有时候看不到文件名,不知道编辑的是那个文件,怎么呢,可以按照下面的方法试试. 查看文件名 在正常模式下: :f 或CTRL+G 查看文件的路径 用 :!pwd 可以看当前的详细路径. ...
- 记录在xx公司被考核的15天及自己的感想
在大学有两件事让我很遗憾. 第一:在2013年7月我和自己的前任女朋友分手,这是两年前的事了,我们谈了七个月. 第二:在2015年4月我被xx公司淘汰了,正如我的前任女朋友是我遇到的最好女孩,这家公司 ...