基于Mootools的图片自动缩放和手动缩放

最近碰到很多的图片缩放的问题,小生不才,正好整理了下两种关于图片缩放的代码demo: 1.手动缩放图片：查看Demo 解释一下原理和用法： 通过鼠标点击获取rel标签的方法,返回给每个方法计算,将计算结果赋予图片; 值得一提的是,该方法加入”还原至默认”按钮,方便对比, 代码计算的就不说了,resizeimg.js里写好注释(也可当作插件使用),这里说下最后的用法: window.addEvent('domready', function() { new ResizeImg('image','.click li a'); // 被控制元素为id为image的元素,控制器为.click li a }); 2.自动缩放图片：查看Demo 解释一下原理和用法： 该实例是通过设置外框大小来自动计算未知的图片大小适应图片外框 首先可以设置图片外框大小 function resizeImg(){ //设定方法名称 if($("zoomimg")){ resizeGoodsImg({ elements:$("zoomimg").getElements("li img"), //获取元素#zoomimg下的li下的img标签 maxWidth:400, maxHeight:300 }); } } 我们只需要设定好maxWidth和maxHeight中的值就好了, 需要注意的一点是,在调用该方法后,需要在页面底部返回该方法： resizeImg() 这里提供demo的打包下载地址：点击这里。