源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-02-05 23:22 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery实现页面图片等比例放大缩小功能
[b]html代码结构:[/b]
[url=]<a href=""><img src="images/tmp_409x265.jpg" width="300" height="300" alt=""/></a> <a href=""><img src="images/tmp_572x367.jpg" width="300" height="300" alt=""/></a>
[b]样式:[/b]
[u]复制代码[/u] 代码如下:
$(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;             $('<img />').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);                 }             });         });     }); });
这样就是实现了图片的等比例放大缩小了。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部