几款类似舰艇世界的手游|几款js图片等比例缩放效果代码

更新时间：2016-10-08 来源：js教程手机版 字体：大中小

【www.bbyears.com--js教程】

几款js图片等比例缩放效果代码
<script>
function wa_setimgautosize(img)
{
//var img=document.all.img1;//获取图片
var maxwidth=200;//设置图片宽度界限
var maxheight=100;//设置图片高度界限
var heightwidth=img.offsetheight/img.offsetwidth;//设置高宽比
var widthheight=img.offsetwidth/img.offsetheight;//设置宽高比
alert("test"+img.offsetheight+img.filesize);
if(img.offsetheight>1) alert(img.offsetheight);
if(img.readystate!="complete"){
return false;//确保图片完全加载
}

if(img.offsetwidth>maxwidth){
img.width=maxwidth;
img.height=maxwidth*heightwidth;
}
if(img.offsetheight>maxheight){
img.height=maxheight;
img.width=maxheight*widthheight;
}
}

</script>

下面看一寺完整的js 图片大小等比例缩放实例

图片自动等比例缩小且垂直居中

实例代码

缩放图片尺寸
<script language="javascript">
var zoomlevel = 0;
var currentwidth = 0;
var currentheight = 0;
var originalwidth = 0;
var originalheight = 0;
function initial(){
    currentwidth = document.myimage.width;
    currentheight = document.myimage.height;
    originalwidth = currentwidth;
    originalheight = currentheight;
    update();
}
function zoomin(){
    document.myimage.width = currentwidth*2;
    document.myimage.height = currentheight*2;
    zoomlevel = zoomlevel + 1;
    update();
}
function zoomout(){
    document.myimage.width = currentwidth/2;
    document.myimage.height = currentheight/2;
    zoomlevel = zoomlevel - 1;
    update();
}
function resetimage(){
    document.myimage.width = originalwidth;
    document.myimage.height = originalheight;
    zoomlevel = 0;
    update();
}
function update(){
    currentwidth = document.myimage.width;
    currentheight = document.myimage.height;
    zoomsize.innertext = zoomlevel;
    imgsize.innertext = currentwidth + "x" + currentheight;
}
</script>

缩放图片尺寸

   overflow-x:scroll;height=350;width=600">

() -