控制图片大小的操作- -javascript

最新推荐文章于 2025-12-15 15:15:21 发布

转载最新推荐文章于 2025-12-15 15:15:21 发布 · 1.1k 阅读

文章标签：

#button #javascript #function #input #class

程序设计专栏收录该内容

84 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片浏览功能，包括图片的放大、缩小、全屏显示、实际大小显示及最合适大小显示等功能。这些功能适用于网页图片预览场景，通过简单的JavaScript代码即可实现。

这里有一个网页不知道是不是你想要的效果,里面有放大缩小,实际大小,最合适大小等功能,
http://sucai.stasp.com/DISPLAY.asp?id=16862

这种功能是通过JS来实现的,
我把其实的JS等关键地方,拿出来,大家可以研究一下,
<script language=JavaScript>
function smallit(){
var height1=PhotoViewer.images1.height;
var width1=PhotoViewer.images1.width;
PhotoViewer.images1.height=height1/1.2;
PhotoViewer.images1.width=width1/1.2;
}

function bigit(){
var height1=PhotoViewer.images1.height;
var width1=PhotoViewer.images1.width;
PhotoViewer.images1.height=height1*1.2;
PhotoViewer.images1.width=width1*1.2;
}
function fullit()
{
var width_s=screen.width-10;
var height_s=screen.height-30;
window.open("photo.asp?ID=16862", "PhotoView", "width="+width_s+",height="+height_s+",left=0,top=0,location=no,toolbar=no,status=no,resizable=yes,scrollbars=yes,menubar=no,directories=no");
}
function realsize()
{
PhotoViewer.images1.height=PhotoViewer.images2.height;
PhotoViewer.images1.width=PhotoViewer.images2.width;
PhotoViewer.block1.style.left = 0;
PhotoViewer.block1.style.top = 0;

}
function featsize()
{
var width1=PhotoViewer.images2.width;
var height1=PhotoViewer.images2.height;
var width2=760;
var height2=500;
var h=height1/height2;
var w=width1/width2;
if(height1<height2&&width1<width2)
{
PhotoViewer.images1.height=height1;
PhotoViewer.images1.width=width1;
}
else
{
if(h>w)
{
PhotoViewer.images1.height=height2;
PhotoViewer.images1.width=width1*height2/height1;
}
else
{
PhotoViewer.images1.width=width2;
PhotoViewer.images1.height=height1*width2/width1;
}
}
PhotoViewer.block1.style.left = 0;
PhotoViewer.block1.style.top = 0;
}
</script>
<SCRIPT language=JavaScript>
document.onkeydown=nextpage
function nextpage() {
if (event.keyCode==37) location="DISPLAY.asp?id=16863"
if (event.keyCode==39) location="DISPLAY.asp?id=16861"
}
</SCRIPT>

<input name="smallit" type="button" id="smallit" onclick="smallit();" value="缩小">

<input name="bigit" type="button" id="bigit" onclick="bigit();" value="放大" >

<input name="fullit" type="button" id="fullit" onClick="fullit();" value="全屏显示">

<input name="realsize" type="button" id="realsize" onClick="realsize();" value="实际大小">

<input name="featsize" type="button" id="featsize" onClick="featsize();" value="最合适大小">
<span class="tdbg_leftall">

<input name='Prev' type='button' id='Prev' value='上一张' onClick="javascript:window.open('DISPLAY.asp?id=16863', '_self');">

<input name='Next' type='button' id='Next' value='下一张' onClick="javascript:window.open('DISPLAY.asp?id=16861', '_self');">