分享一个快速设置背景的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即可
随机推荐
- 记录s标签范例
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- mysqli连接数据库的模板
<?php $host="localhost"; $db_user="root"; //数据库用户 $db_pass=""; //数据 ...
- Android计算器开发实例
Android简单计算器开发实例如图: ==================================================== activity_main.xml 代码如下: < ...
- Win7 配置Apache+PHP+Mysql环境
第一.安装并配置APACHE(安装到D:\phpapache\Apache2.2) 1.安装时默认安装,Network Domain, Server Name 我填写我的计算机名,Administra ...
- easyUI Form表单的密码验证是否相同
一.js文件中的代码: $(function(){ $.extend($.fn.validatebox.defaults.rules, { equals: {//定义一个比较相等与否的函数 valid ...
- FCC上的初级算法题
核心提示:FCC的算法题一共16道.跟之前简单到令人发指的基础题目相比,难度是上了一个台阶.主要涉及初步的字符串,数组等运算.仍然属于基础的基础,官方网站给出的建议完成时间为50小时,超出了之前所有非 ...
- json_encode详解,转义
1.json_encod基本用法:数组转字符串 <?php $arr = array (,,,,); echo json_encode($arr); ?> 以上例程会输出: {,,,,} ...
- 用淘宝ip地址库查ip
这是一个通过调用淘宝ip地址库实现ip地址查询的功能类 using System; using System.Collections.Generic; using System.Linq; using ...
- autofac + owin + webform + mvc + webapi集成demo
http://git.oschina.net/shiningrise/AutofacOwinDemo using Microsoft.Owin; using Owin; using System.We ...
- python递归理解图
递归:下一级只能return给自己的上一级. import re val="9-2*5/3+7/3*99/4*2998+10*568/14" val="9-2*5/3+7 ...