我来分享一个快速设置背景的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. Java观察者设计模式

    在java.util包中提供了Observable类和Observer接口,使用它们即可完成观察者模式. 多个观察者都在关注着价格的变化,只要价格一有变化,则所有的观察者会立即有所行动. //==== ...

  2. You Can Do Research Too

    You Can Do Research Too I was recently discussing gatekeeping and the process of getting started in ...

  3. json跨域

    很有意思的两种连接 ,效果相同. 不同之处: aehyok({"result":"我是远程js带来的数据"}); <script type="t ...

  4. Robot Framework--11 RF结合Jenkins

    转自:http://blog.csdn.net/tulituqi/article/details/17846463 为什么我们要引入RF?其实最初我们引入RF是为了能够快速的开展自动化验收测试,为敏捷 ...

  5. CentOS安装wordpress权限问题

    最近在CentOS6.5上安装wordpress,遇上一个问题,安装好之后外网总是不能再网页进行配置,想了半天应该是源代码文件的权限问题,具体问题与解决如下: 如果你的wordpress安装目录是wo ...

  6. Javascript验证手机号码正则表达式

    //验证手机正则 var flag = !!phone.match(/^(0|86|17951)?(13[0-9]|15[012356789]|17[0-9]|18[0-9]|14[0-9])[0-9 ...

  7. 解决安装VS2013提示“已停止工作”问题

    新安装操作系统(win8.1),手动安装各种驱动,安装VS2013,报错,见下图: 原因:显卡驱动问题. 解决办法:卸载intel显卡驱动这碧池.(系统会自动给你适配合适的)

  8. OCS 开放缓存服务

    开放缓存服务( Open Cache Service,简称OCS)是在线缓存服务,为热点数据的访问提供高速响应.说白了,就是一款基于memcached开发的对外云缓存服务器,完全可以把OCS当成mem ...

  9. ASP.NET MVC Razor语法

    ASP.NET MVC Razor语法 (一) 关于_ViewStart.cshtml文件     使用Razor模板引擎的话,会自动生成一个_ViewStart.cshtml文件.事实上,_View ...

  10. 关于PHP位运算的简单权限设计

    写在最前面 最近想写一个简单的关于权限处理的东西,之前我也了解过用二进制数的位运算可以出色地完成这个任务.关于二进制数 的位运算,常见的就是“或.与.非”这三种简单运算了,当然,我也查看了下PHP手册 ...