要完成此效果需要两个步骤
第一步：把如下代码加入到<head>区域中
<style>
.divstyle{position:absolute; width="0";height:"0"}
</style>
<script>
<!--
function showimg(form)
{
adres = form.image_file.value;
index = adres.indexOf(".gif");
index = index + adres.indexOf(".jpg");
index = index + adres.indexOf(".bmp");
if (form.image_file.value == "")
{alert("错误，未发现任何图片!");}
else
{if (index == -3){alert("错误的图片格式");
form.width.value=0;
form.height.value=0;}
else
{
var img_obj = new Image();
img_obj = form.image_file.value;
document.changing.src = img_obj;
document.changing2.src= img_obj;
document.changing.width = document.changing2.width;
document.changing.height = document.changing2.height;
set();
}
}
}
fast = 0;
change = 0;
function upw(){
document.image.width.value=parseInt(document.image.width.value)+1;
resize();}
function over_upw(){upw();
change = 1;
changetime = setTimeout("fast_upw()","600");}
function fast_upw(){clearTimeout(changetime);
upw();
fast = setTimeout("fast_upw()","100");}
function clt(){
if (change == 1){clearTimeout(changetime);}
clearTimeout(fast);
change = 0;
}
function resize() {document.changing.height = document.image.height.value;
document.changing.width = document.image.width.value;}
function downw(){document.image.width.value=parseInt(document.image.width.value)-1;
resize();}
function over_downw(){downw();
change = 1;
changetime = setTimeout("fast_downw()","600");}
function fast_downw(){clearTimeout(changetime);
downw();
fast = setTimeout("fast_downw()","100");}
function uph(){document.image.height.value=parseInt(document.image.height.value)+1;
resize();}
function over_downh(){downh();
change = 1;
changetime = setTimeout("fast_downh()","600");}
function fast_downh(){clearTimeout(changetime);
downh();
fast = setTimeout("fast_downh()","100");}
function over_uph(){uph();
change = 1;
changetime = setTimeout("fast_uph()","600");}
function fast_uph(){clearTimeout(changetime);
uph();
fast = setTimeout("fast_uph()","100");}
function downh(){document.image.height.value=parseInt(document.image.height.value)-1;
resize();}
function set(){
document.image.width.value=document.changing.width;
document.image.height.value=document.changing.height;}
-->
</script>
第二步：把如下代码加入到<body>区域中
<center>
<form name="image">
<input type="file" name="image_file"><br><br>
<input type="button" name="show" value="Show image" onclick="showimg(this.form)">
<br><br>
宽 高
<br><img src="../ts/pic/up.gif" onmousedown="over_upw()" onmouseup="clt()">
<img src="../ts/pic/down.gif" onmousedown="over_downw()" onmouseup="clt()">
<input type="text" name="width" size="4" readonly>
<input type="text" name="height" size="4" readonly>
<img src="../ts/pic/up.gif" onmousedown="over_uph()" onmouseup="clt()" >
<img src="../ts/pic/down.gif" onmousedown="over_downh()" onmouseup="clt()">
<br><br>
<table border ="2">
<tr><td>
<img src="http://jojoo.net/www.jojoo.net/LOGO.gif" name="changing">
</td></tr></table>
</form>
<div STYLE="left:-5000 px;top:0" class="divstyle">
<P ><img src="http://jojoo.net/www.jojoo.net/LOGO.gif" name="changing2"></p>
</div>
</center>
|
