jQuery制作图片的等比例缩放
jQuery 图片 制作 缩放 比例
2023-09-11 14:22:25 时间
1资料的排版
2.html代码
1 <body> 2 <div class="BB"><img src="dw.jpg" alt="动物" onload="setPic($(this))"/></div> 3 <div class="BB"><img src="dw1.jpg" alt="动物" onload="setPic($(this))"/></div> 4 <div class="BB"><img src="yy.jpg" alt="人" onload="setPic($(this))" /></div> 5 </body>
3.css代码
<style type="text/css"> .BB{ width:100px; height:80px; border:1px solid red; overflow:hidden; margin-top:10px; float:left; margin-left:10px; text-align:center; line-height:100px; position:relative;} img{position:relative;} </style>
4.js代码
<script src="jquery-1.7.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var BNImg = { iconW: 100, iconH: 80, getOriginPicWandH: function (imgObj) { return { width: imgObj.width(), height: imgObj.heght() }; }, setPicWandH: function (imgObj) { var originW = imgObj.width(); var originH = imgObj.height(); var maxWorH = originW >= originH ? { w: originW} : { h: originH }; var originRate = originW / originH; if (maxWorH.w) { imgObj.width(BNImg.iconW); var newH = BNImg.iconW / originRate imgObj.height(newH); var top = (BNImg.iconH - newH) / 2; imgObj.css("top",top+"px"); } else if (maxWorH.h) { imgObj.height(BNImg.iconH); imgObj.width(originRate * BNImg.iconH); } } }; function setPic(obj) { BNImg.setPicWandH(obj); }
相关文章
- jQuery验证控件jquery.validate.js使用说明+中文API
- 从零开始学习jQuery (二) 万能的选择器
- 猴子也能学会的jQuery第十二期——jQuery遍历(上)
- 前端基础 - JQuery简介
- jquery上传图片
- jQuery可拖拽旋转的3D图片墙
- jQuery 图片剪裁插件使用之 imgAreaSelect
- jquery-lazyload延迟加载图片 及 加载顺序 bug 修复
- 《jQuery、jQuery UI及jQuery Mobile技巧与示例》——9.15 技巧:优化header和footer以便全屏查看
- jQuery验证控件jquery.validate.js的使用介绍
- Android+Jquery Mobile学习系列(4)-页面转场及参数传递
- jquery extend中
- jQuery插件之验证控件jquery.validate.js
- Nice Jquery Validator 【从 jQuery Validation 迁移】
- jquery例子
- Jquery+css实现图片无缝滚动轮播
- jQuery中的自定义动画
- jQuery (2)
- JQuery学习---JQuery基础知识
- jquery 鼠标经过放大图片
- 不定义JQuery插件,不要说会JQuery[转载]
- Jquery第四课 Javascript中this的使用方法
- JQuery之事件处理