jS控制图片的放大和缩小?

Posted 2023-03-27

图片按比例缩放
function DrawImage(Img,WIDTH,HEIGHT)
var image=new Image();
image.src=Img.src;
width=WIDTH;//预先设置的所期望的宽的值
height=HEIGHT;//预先设置的所期望的高的值
if(image.width>width||image.height>height)//现有图片只有宽或高超了预设值就进行js控制
w=image.width/width;
h=image.height/height;
if(w>h)//比值比较大==>宽比高大
//定下宽度为width的宽度
Img.width=width;
//以下为计算高度
Img.height=image.height/w;

else//高比宽大
//定下宽度为height高度
img.height=height;
//以下为计算高度
Img.width=image.width/h;



<img src="xxxx" onload=javascript:DrawImage(this,290,215);> 参考技术A

用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实现：

html 代码：

<img src='../1.jgp' id='img' />

这个时候img的图片自身是多大，就会显示多大。100px*100px的图。

js代码：

var oImg = document.getElementById('img');
oImg.width = '50px'; //当给img标签的宽度设置为50px后，高度会自动按比例缩小。
oImg.width = '200px' //当给img标签的宽度设置为200px后，高度会自动按比例扩大。

JS控制图片放大和缩小怎么改

我用的是以下代码，按CTRL+鼠标滚轮可以缩放图片，直接用鼠标滚轮也可以缩放图片了；；；我想怎么能修改下，变成只有按CTRL+鼠标滚轮才可以缩放图片

<script>
function bbimg(o)

var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+'%';

function addthis()

var e=window.event?window.event:e;
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return;
//author:reterry(dxy)
if (String(srcE.tagName).toLowerCase()=='img')
//alert('好');
bbimg(srcE)


function backthis()
var e=window.event?window.event:e;
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return;
//author:reterry(dxy)
if ((String(srcE.tagName).toLowerCase()=='img')&&(window.event.ctrlKey))
//alert('好');
srcE.style.zoom='100%';

document.onmousewheel=addthis;
document.onmouseout=backthis;
</script>
试过了 。。。把你的那部分改进去之后 不管怎么样 图片都不变了
==========================
OH MY GOD ! 我又试了，还是没反应啊，图片怎么都变不了了

用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实现：

HTML 代码：

<img src=\'../1.jgp\' id=\'img\' />

这个时候img的图片自身是多大，就会显示多大。100px*100px的图。

js代码：

var oImg = document.getElementById(\'img\');
oImg.width = \'50px\'; //当给img标签的宽度设置为50px后，高度会自动按比例缩小。
oImg.width = \'200px\' //当给img标签的宽度设置为200px后，高度会自动按比例扩大。 参考技术A 这个可以了,之前我用的是IE7,现在兼容IE6了

把addthis函数改成这样就可以了

function addthis(e)

var e = e || window.event;
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE || !e.ctrlKey) return;
//author:reterry(dxy)
if (String(srcE.tagName).toLowerCase()=='img')
//alert('好');
bbimg(srcE)

return false;


附:你这个脚本是IE专用的.我也懒得去兼容其他浏览器了本回答被提问者采纳