分享一个快速设置背景的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即可
随机推荐
- mysql create db utf8 character
create database if not exists wifi default character set utf8;
- ecshop自动退出
在使用ecshop后台的时候,老是自动退出,影响正常使用. 解决办法: 在includes/cls_session.php中,function gen_session_key($session_id) ...
- Realm简单使用小记
一.项目环境:纯OC 载入Realm: pod 'Realm' 二.为了方便调用可以写一个Realm类的分类 #import <Foundation/Foundation.h> #impo ...
- JAVA Applet
- 百度文件上传webuploader上传文件,含文件大小、类型验证
你的上传初始化文件upload_XXX.js中:(见红色字) // 初始化Web Uploader var allMaxSize = 10; var uploader = WebUploader.cr ...
- Yii2 advanced版API接口开发 基于RESTful架构的 配置、实现、测试
参考地址: http://www.xiaoxiangzi.com/Programme/PHP/3348.html http://www.cnblogs.com/ganiks/p/yii2-restfu ...
- 【转】随机函数的rand、srand用法
from:深海的小鱼儿 地址:http://www.cnblogs.com/xmphoenix/archive/2011/04/07/2008622.html 随机函数的rand.srand用法 一& ...
- 弹出框一 之 基于bootstrap和jquery的自定义弹出框
(function ($) { window.Ewin = function () { var html = '<div id="[Id]" class="moda ...
- dwz 多选删除
<li><a title="确实要删除这些用户吗?" target="selectedTodo" postType="string& ...
- PostgreSQL表空间、数据库、模式、表、用户/角色之间的关系
看PostgreSQL9的官方文档,我越看越迷糊,这表空间,数据库,模式,表,用户,角色之间的关系怎么在PostgreSQL里这么混乱呢?经过中午的一个小实验,我逐渐理清了个中来龙去脉.下面我来还原我 ...