JavaScript 图片缩放 响应鼠标滚动 和 上下方向键
maple00 2011-03-30
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN">
<html>
<head>
<title>查看图片</title>
<metahttp-equiv="pragma"content="no-cache">
<metahttp-equiv="cache-control"content="no-cache">
<metahttp-equiv="expires"content="0">
<metahttp-equiv="keywords"content="keyword1,keyword2,keyword3">
<metahttp-equiv="description"content="Thisismypage">
<!--
<linkrel="stylesheet"type="text/css"href="styles.css">
-->
<scriptlanguage="JavaScript">
functionzoomimg(img,upOrDown){
//img.style.zoom获取img对象的缩放比例，并转为十进制整数
varzoom=parseInt(img.style.zoom,10);
if(isNaN(zoom)){//当zoom非数字时zoom默认为100％
zoom=100;
}
//event.wheelDelta滚轮移动量上移＋120，下移－120或者按上下方向键，显示比例每次增减10％
if(event.wheelDelta!=0){
zoom+=event.wheelDelta/12;
}elseif("up"==upOrDown){
zoom+=10;
}elseif("down"==upOrDown){
zoom+=-10;
}
//当zoom大于10％时重新设置显示比例
if(zoom>10)img.style.zoom=zoom+"%";
returnfalse;
}
</script>
<styletype="text/css">
.drag{position:relative;cursor:hand}
</style>
<scriptlanguage="javascript">
//初始化页面图片
functioninit()
{
varurl=location.href;
varnum=url.indexOf("?")
varpicUrl=url.substr(num+1);
document.getElementById("pic").src=picUrl;
listenKey();
}
//注册事件监听键盘上下方向键
functiongetKey(e){
e=e||window.event;
varkeycode=e.which?e.which:e.keyCode;
varpic=document.getElementById("pic");
if(keycode==38){//如果按的是上方向键
zoomimg(pic,"up");
}elseif(keycode==40){//如果按的是下方向键
zoomimg(pic,"down");
}
}
//把keydown事件绑定到document中
functionlistenKey(){
if(document.addEventListener){//FF
document.addEventListener("keydown",getKey,false);
}elseif(document.attachEvent){//IE
document.attachEvent("onkeydown",getKey);
}else{
document.onkeydown=getKey;
}
}
vardragapproved=false;
varz,x,y
functionmove()
{
if(event.button==1&&dragapproved)
{
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop=temp2+event.clientY-y
returnfalse;
}
}
functiondrags()
{
if(!document.all)
return
if(event.srcElement.className=="drag")
{
dragapproved=true
z=event.srcElement;
temp1=z.style.pixelLeft
temp2=z.style.pixelTop
x=event.clientX
y=event.clientY
document.onmousemove=move
}
}
document.onmousedown=drags
document.onmouseup=newFunction("dragapproved=false")
</script>
<style>
table{
table-layout:fixed;
word-wrap:break-word;
}
div{
word-wrap:break-word;
}
</style>
</head>
<bodyonload="init()">
<imgid="pic"onmousewheel="returnzoomimg(this);"src=""name="img"alt="Image"class="drag">
</body>
</html>
