本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下
1、关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width",maxWidth);
$(this).css("height",height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height",maxHeight);
$(this).css("width",width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
2、jQuery获取图片实际尺寸的方法
rush:js;">
$(function(){
var imgSrc = $("#image").attr("src");
getimageWidth(imgSrc,function(w,h){
console.log({width:w,height:h});
});
});
function getimageWidth(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);
}
}
}
3、jquery 自动调整图片大小
maxWidth){
ratio = maxWidth / width; // 计算缩放比例
$(this).css("width",maxWidth); // 设定实际显示宽度
height = height * ratio; // 计算等比例缩放后的高度
$(this).css("height",height); // 设定等比例缩放后的高度
} // 检查图片是否超高
if(height > maxHeight){
ratio = maxHeight / height; // 计算缩放比例
$(this).css("height",maxHeight); // 设定实际显示高度
width = width * ratio; // 计算等比例缩放后的高度
$(this).css("width",width); // 设定等比例缩放后的高度
}});
});
4、使用jQuery对图片进行大小缩放
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width",height * ratio);
height = height * ratio;
}
var width = $(this).width();
var height = $(this).height();
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height",width * ratio);
width = width * ratio;
}
});
//$("#contentpage img").show();
// IMAGE RESIZE
});
以上就是本文的全部内容,帮助大家实现图片重绘、图片获取尺寸、图片调整大小以及图片缩放,希望大家喜欢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。