我来分享一个快速设置背景的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. R树空间索引及其变种

    1.R树及其变种:百度百科 2.R树详介:http://blog.csdn.net/jazywoo123/article/details/7792745 3.R树及变种小结 R树:叶子节点或中间节点都 ...

  2. Vim编辑器

    vim的学习曲线相当的大(参看各种文本编辑器的学习曲线),所以,如果你一开始看到的是一大堆VIM的命令分类,你一定会对这个编辑器失去兴趣的.下面的文章翻译自<Learn Vim Progress ...

  3. 有scp命令,传输文件却显示报错无此命令

    今天下午在一台服务器上使用scp命令向另外一台服务器传文件的时候,报此错误 bash: scp: command not found ,lost connection,以为是该服务器没有安装此命令,w ...

  4. OpenGL Tutorial

    https://open.gl https://www.processing.org/tutorials/pshader/

  5. 使用VMware 安装Linux CentOS7

    访问百度经验 http://jingyan.baidu.com/article/eae0782787b4c01fec548535.html 安装无忧..

  6. PHPstorm设置连接FTP,进行文件上传、下载、比较

                                                 内容转载自:http://www.cnblogs.com/jikey/p/3486621.html   如何在 ...

  7. Java8初体验(一)lambda表达式语法

    感谢同事[天锦]的投稿.投稿请联系 tengfei@ifeve.com 本文主要记录自己学习Java8的历程,方便大家一起探讨和自己的备忘.因为本人也是刚刚开始学习Java8,所以文中肯定有错误和理解 ...

  8. [CentOs7]安装mysql(2)

    摘要 之前安装过一次mysql,最后配置,发现在本地无法连接,重启服务的时候一直卡在那里不动,感觉是安装的过程出问题,最后没办法还是卸载了,然后重新安装一下. [CentOs7]安装mysql Mys ...

  9. 【转】nanosleep的精度与调度算法的关系 来自:bean.blog.chinaunix.net

     nanosleep的精度与调度算法的关系 2011-12-03 13:05:17 分类: LINUX     Heartwork前辈在我前一篇博文多线程条件下的计数器(2)中的回复中提到,   na ...

  10. highcharts图表中级入门之xAxis label:X(横)坐标刻度值过长截断多行(换行)显示问题说明

    在使用highcharts图表的过程中,总会碰到这样一个很是棘手的问题,横坐标刻度值太长,在不换行显示的情况下显得格外拥挤.虽然针对这一问题是可以对其刻度值进行旋转以此来避开显示拥挤问题[如何让hig ...