jquery实现页面图片等比例放大缩小功能

标签:公司介绍    日期:2019-05-09 16:15    录入:美娱国际平台注册    浏览:

  

[jquery,页面图片,等比例,放大缩小]jquery实现页面图片等比例放大缩小功能

  

html代码结构:  

  

代码如下:

  
  
  
  
  

  

样式:  

  

代码如下:

  
a{width:300px;height:300px;background:#fff;border:1px solid #666;display:inline-block} /* 这里需要指定a标签的高宽,背景和边框为可选 */  
脚本(jquery可自行添加):  
  

  

代码如下:

  
$(function () {  
var imgs = $('a>img');  
imgs.each(function () {  
var img = $(this);  
var width = img.attr('width');//区域宽度  
var height = img.attr('height');//区域高度  
var showWidth = width;//最终显示宽度  
var showHeight = height;//最终显示高度  
var ratio = width / height;//宽高比  
img.load(function () {  
var imgWidth, imgHeight, imgratio;  
$('').attr('src', img.attr('src')).load(function () {  
imgWidth = this.width;//图片实际宽度  
imgHeight = this.height;//图片实际高度  
imgRatio = imgWidth /美娱国际 imgHeight;//实际宽高比  
if (ratio > imgRatio) {  
showWidth = height * imgRatio;//调整宽度太小  
img.attr('width', showWidth).css('margin-left', (width - showWidth) / 2);  
} else {  
showHeight = width / imgRatio;//调高度太小  
img.attr('height', showHeight).css('margin-top', (height - showHeight) / 2);  
}  
});  
});  
});  
});  
  

  

这样就是实现了图片的等比例放大缩小了。

  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
上一篇:excel操作之Add Data to a Spreadsheet Cell
下一篇:没有了
相关文章阅读
点击右上角的分享按钮即可收藏美娱国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行