我来分享一个快速设置背景的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. Win8.1微软官方最终正式版ISO镜像文件

    Win8.1微软官方最终正式版ISO镜像文件 经过预览版,测试版.开发版本等几个乱七八糟的版本后,2013年10月17日,微软终于如约的发布了Win8.1最终正式版. Win8.1和win8的区别 1 ...

  2. 爬虫5 html下载器 html_downloader.py

    #coding:utf8 import urllib2 __author__ = 'wang' class HtmlDownloader(object): def download(self, url ...

  3. JavaWeb学习笔记——开发动态WEB资源(六)ServletConfig和ServletContext

    1.只有在第一次请求服务器产生实例的时候才会调用init()方法,有一种办法能在服务器一启动的时候就加载init()方法. 即服务器启动即加载Servlet,且按数字大小顺序实例化Servlet. 方 ...

  4. 通过Ajax方式上传文件,使用FormData进行Ajax请求

    通过传统的form表单提交的方式上传文件: <form id= "uploadForm" action= "http://localhost:8080/cfJAX_ ...

  5. 11 Clever Methods of Overfitting and how to avoid them

    11 Clever Methods of Overfitting and how to avoid them Overfitting is the bane of Data Science in th ...

  6. php构造函数连接数据库

    index.php require_once("mysql.config.php"); require_once("mysql.class.php"); ech ...

  7. linq group join

    本篇介绍Linq的Group和Join操作,继续使用<Linq 学习(3) 语法结构>中介绍的数据源. GroupGroup是进行分组操作,同SQL中的Group By类似.原型如下: p ...

  8. Java并发编程核心方法与框架-CountDownLatch的使用

    Java多线程编程中经常会碰到这样一种场景:某个线程需要等待一个或多个线程操作结束(或达到某种状态)才开始执行.比如裁判员需要等待运动员准备好后才发送开始指令,运动员要等裁判员发送开始指令后才开始比赛 ...

  9. jquery的load和get的区别

    jquery的load把返回的数据放到指定的元素中,不是全局函数:jquery的get把返回的数据交给用户处理,是全局函数. load和get同样是jquery的ajax函数,load的实现,几乎等于 ...

  10. SQLSERVER2008R2正确使用索引

    T1表 10000000万条数据,(插入时间36分钟,count(*)查询19秒,空间占用670M左右) 1.真正充分的利用索引比如like '张%' 就是符合SARG(符合扫描参数)标准而like ...