我来分享一个快速设置背景的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 自动获取背景图的长宽的更多相关文章

  1. 【linux】centos6.9设置etc0网卡开机自动获取ip

    在vm新安装的centos系统中,一般选择NAT来设置和主机共享局域网,通过ifconfig etc0 192.168.xx.xx 这种作法机器重启之后就会失效,所以可以使用更改文件的方式完成设置ce ...

  2. 详解如何设置CentOS 7开机自动获取IP地址

    本例中以CentOS 7举例说明如何设置Linux开机自动获取IP地址和设置固定IP地址. 自动获取动态IP地址 1.输入“ip addr”并按回车键确定,发现无法获取IP(CentOS 7默认没有i ...

  3. 如何设置CentOS 7开机自动获取IP地址详解

    本例中以CentOS 7举例说明如何设置Linux开机自动获取IP地址和设置固定IP地址. 自动获取动态IP地址 1.输入“ip addr”并按回车键确定,发现无法获取IP(CentOS 7默认没有i ...

  4. vue+element-ui upload图片上传前大小超过4m,自动压缩到指定大小,长宽

    最近项目需要实现一个需求,用户上传图片时,图片大小超过4M,长宽超过2000,需要压缩到400k,2000宽高.在git上找到一个不错的方法,把实现方法总结一下: 安装image-conversion ...

  5. 分享一个快速审查js操作Dom的css

    第一步 打开开发者工具第二步 打开 Sources 面板第三步 执行用户操作让对象可见(例如鼠标悬停)第四步 在元素可见的时候按下 F8(与“暂停脚本执行”按钮相同)第五步 点击开发者工具左上角的“选 ...

  6. 分享一个小设置-项目启动时服务器指向本地IIS

    背景,在X公司做的一个网站登录时需要域名的支持,就是说浏览器地址栏在localhost+端口号的形式下无法实现登录(必须是xxxx域名的形式), 但是很多时候都会先在线下进行测试,既然本地没有线上的环 ...

  7. 分享一个快速的Json(反)序列化开源项目 Jil

    我们不缺少JSON的序列化库,但我们缺少一个性能非常好的库,这对于网站来说非常重要.今天我发现了Jil. 他是开源的代码: https://github.com/kevin-montrose/Jil ...

  8. 分享一个快速测试ios软件的工具

    简易IPA安装地址生成器 地址: https://www.neicexia.com/IPADistribute/Resources/index.html?fromsite#IPADistribute- ...

  9. 分享一个操作pdf文件的js文件-pdfObject.js(文件预览、下载、打印等操作都具备)

    获取相关资料或者源码的朋友可以关注下公众号,回复关键字pdf20200518即可

随机推荐

  1. ioctlsocket()

    ioctlsocket()是控制套接口的模式. 外文名 ioctlsocket() 含    义 控制套接口的模式 头文件 #include <winsock.h> 性    质 函数 目 ...

  2. easyUI学习笔记之tab组件的鼠标事件

    一.鼠标经过组件后的事件,自动打开选项卡内容 var tabs = $('#tt').tabs().tabs('tabs'); for(var i=0; i<tabs.length; i++){ ...

  3. 《JavaScript DOM编程艺术》笔记一

    1.CSS: 继承是CSS技术中的一项强大功能,节点树上的各个元素将继承其父元素的样式属性. 2.3种获取DOM元素方法:getElementById返回一个对象,getElementsByTagNa ...

  4. Java可变参数传递中可以接收多个对象

  5. 关于webpack抛出对象到全局的问题

    一般情况下,我们用webpack的时候.大多是用在单页应用上. 单是,某些情况下,我们用来做多页面的时候,有的时候,会需要在html内嵌 <script>,比如说,这个页面是服务端渲染的, ...

  6. dedecms笔记

    截取字符串 方法一: [field:title function="cn_substr(@me,10)"/] 方法二: {dede:arclist typeid=’9′ title ...

  7. MYSQL 免安装版(windows 7/64)

    本文介绍在本地安装MYSQL数据库,免安装版相关配置 一.下载 mysql下载地址1:http://dev.mysql.com/downloads/mysql/ 二.解压MySQL压缩包 将已下载的M ...

  8. WEBSTORM 打开多个项目的方法

    WebStorm默认情况下一次只能打开一个项目,这点很不爽,其实是可以设置的. 方法: File -> settings -> Directories -> Add Content ...

  9. Web Site 开发学习

    http://web-source.net/web_design_languages.htm#.Vw4uaeRJmt9 http://www.make-a-web-site.com/web-desig ...

  10. span设为inline-block之后,未包含文字时下面会多出一条空白问题

    1.问题的引出: 产品列表页面场景: 上面是产品图片[img], 中间是提示库存信息[span](始终存在,有库存则不显示文字,但元素占位.所以设置display:inline-block), 下面是 ...