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>

相关推荐

hlfsunshine / 0评论 2015-04-28