JavaScript实现网页图片等比例缩放
文中代码允许在IE、FireFox下等比例缩放图片。同时，在IE下，能够通过鼠标的滚轮对图片进行动态缩放。具体可以参考mg-photo-agent插件。
- //图片按比例缩放,可输入参数设定初始大小
- function resizeimg(ImgD,iwidth,iheight) {
- var image=new Image();
- image.src=ImgD.src;
- if(image.width>0 && image.height>0){
- if(image.width/image.height>= iwidth/iheight){
- if(image.width>iwidth){
- ImgD.width=iwidth;
- ImgD.height=(image.height*iwidth)/image.width;
- }else{
- ImgD.width=image.width;
- ImgD.height=image.height;
- }
- ImgD.alt=image.width+"×"+image.height;
- }
- else{
- if(image.height>iheight){
- ImgD.height=iheight;
- ImgD.width=(image.width*iheight)/image.height;
- }else{
- ImgD.width=image.width;
- ImgD.height=image.height;
- }
- ImgD.alt=image.width+"×"+image.height;
- }
- ImgD.style.cursor= "pointer"; //改变鼠标指针
- ImgD.onclick = function() { window.open(this.src);} //点击打开大图片
- if (navigator.userAgent.toLowerCase().indexOf("ie") > -1) { //判断浏览器，如果是IE
- ImgD.title = "请使用鼠标滚轮缩放图片，点击图片可在新窗口打开";
- ImgD.onmousewheel = function img_zoom() //滚轮缩放
- {
- var zoom = parseInt(this.style.zoom, 10) || 100;
- zoom += event.wheelDelta / 12;
- if (zoom> 0) this.style.zoom = zoom + "%";
- return false;
- }
- } else { //如果不是IE
- ImgD.title = "点击图片可在新窗口打开";
- }
- }
- }
该代码的使用方法如下：
- <img name="" src="" onload="javascript:resizeimg(this,100,200)">
感谢您的关注。您现在可以 留言(0) 或 留下通告地址 。
相关信息
该文章 2007年02月18日 提交，位于分类 JavaScript 下. 标签: .上一篇: Python编写MSN机器人 »
下一篇: 余世维-如何成为一个成功的职业经理 第一讲001 »
