Jquery让图片根据浏览器窗口大小自动缩放
2024-10-12 06:14:57
(function($){
$.fn.resizeimage = function(){
var imgLoad = function (url, callback) {
var img = new Image();
img.src = url;
if (img.complete) {
callback(img.width, img.height);
} else {
img.onload = function () {
callback(img.width, img.height);
img.onload = null;
};
};
};
var original = {
width:$(window).width()
};
return this.each(function(i,dom){
var image = $(this);
imgLoad(image.attr('src'),function(){
var img = {
width:image.width(),
height:image.height()
},percentage=;
if(img.width<original.width){
percentage = ;
}else{
percentage = (original.width)/img.width;
}
image.width(img.w=img.width*percentage-).height(img.h=img.height*percentage);
$(window).resize(function(){
var w = $(this).width();
percentage = w/img.width>?:w/img.width;
var newWidth = img.width*percentage-;
var newHeight = img.height*percentage;
image.width(newWidth).height(newHeight);
});
});
});
};
})(jQuery);
使用方法:
$('img').resizeimage();
最新文章
- GDB调试命令小结
- C# 使用SqlBulkCopy类批量复制大数据
- TabSiPlus发布1749版本
- 【BZOJ-4548&;3658】小奇的糖果&;Jabberwocky 双向链表 + 树状数组
- 股市非常态,CCI指标买卖点实例图解
- SSH详解
- IMX6输出可控PWM
- 【SpringMVC】SpringMVC系列4之@RequestParam 映射请求参数值
- Lambda 中如果构建一个查询条件,扔该Where返回我们需要的数据。
- Vue.js学习 Item1 --快速入门
- c#调用钩子
- HTML5数组方法
- CentOS-6.3安装配置SVN
- Maven与Antx(整理)
- vue实例的几个概念
- LeetCode &; Q27-Remove Element-Easy
- JavaScript 判断对象中是否有某属性
- Resnet BN
- 监控IIS的运行状态
- 51nod 1412 AVL树的种类(经典dp)
热门文章
- Hibernate Validation使用示例及讲解
- Python模拟登录实战(一)
- 限定checkbox最多选中数量
- 自适应网页设计(Responsive Web Design)(转)
- DS18B20
- Android 屏幕适配方案
- Sherpa | Complete Navigation System 介绍与教材
- sql练习总结(一)
- [Leetcode][016] 3Sum Closest (Java)
- uva 11038 - How Many O&#39;s?