本文为大家分享了四个jquery图片常见操作,供大家参考,具体内容如下
1、关于图片大小的重绘,你可以在服务端来实现,也可以通过JQuery在客户端实现。
$(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); 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获取<img>图片实际尺寸的方法
$(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 自动调整图片大小
$(document).ready(function(){ $('img').each(function() { var maxWidth =500; // 图片最大宽度 var maxHeight =500; // 图片最大高度 var ratio = 0; // 缩放比例 var width = $(this).width(); // 图片实际宽度 var height = $(this).height(); // 图片实际高度 // 检查图片是否超宽 if(width > 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对图片进行大小缩放
$(window).bind("load", function() { // IMAGE RESIZE $('#product_cat_list img').each(function() { var maxWidth = 120; var maxHeight = 120; var ratio = 0; var width = $(this).width(); var height = $(this).height(); 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 });
以上就是本文的全部内容,帮助大家实现图片重绘、图片获取尺寸、图片调整大小以及图片缩放,希望大家喜欢。
您可能感兴趣的文章:
- js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
- 使用jQuery判断Div是否在可视区域的方法 判断div是否可见
- jQuery 拖动层(在可视区域范围内)
- JQuery获取元素尺寸、位置及页面滚动事件应用示例
- jquery中获得元素尺寸和坐标的方法整理
- jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
- jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
- 鼠标悬浮显示二级菜单效果的jquery实现
- jQuery动画效果animate和scrollTop结合使用实例
- 浅谈jQuery页面的滚动位置scrollTop、scrollLeft
- JQuery获取可视区尺寸和文档尺寸及制作悬浮菜单示例