JavaScript 图片缩放响应鼠标滚动和上下方向键

gaoke

浏览: 86763 次
性别:
来自: 北京

最近访客更多访客>>

devcang

fengfantasy

gaoming1990

yangky281

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript IE UP HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

    <title>查看图片</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    
    <script language="JavaScript">
function zoomimg(img,upOrDown){
   //img.style.zoom获取img对象的缩放比例，并转为十进制整数
   var zoom = 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;
   }else if("up" == upOrDown){
    zoom += 10;
   }else if("down" == upOrDown){
    zoom += -10;
   }
   //当zoom大于10％时重新设置显示比例
   if (zoom>10) img.style.zoom = zoom + "%";
   return false;
}
</script>
<style   type="text/css">
.drag{position:relative;cursor:hand}
</style>

<script   language="javascript">
//初始化页面图片
function init()
{
var url=location.href;
var num=url.indexOf("?")
var picUrl = url.substr(num+1);
document.getElementById("pic").src = picUrl;
listenKey();
}
//注册事件监听键盘上下方向键
function getKey(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
var pic = document.getElementById("pic");
if(keycode == 38){ //如果按的是上方向键
   zoomimg(pic,"up");
}else if(keycode == 40){//如果按的是下方向键
   zoomimg(pic,"down");
}
}
// 把keydown事件绑定到document中
function listenKey() {
if (document.addEventListener) { //FF
   document.addEventListener("keydown",getKey,false);
} else if (document.attachEvent) { //IE
   document.attachEvent("onkeydown",getKey);
} else {
   document.onkeydown = getKey;
}
}

var   dragapproved   =   false;
var   z,x,y
function   move()
{
if(event.button==1&&dragapproved)
{
z.style.pixelLeft=temp1+event.clientX-x
z.style.pixelTop   =   temp2+event.clientY-y
return   false;
}
}
function   drags()
{
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=new   Function("dragapproved=false")
</script>
<style>
   table {
   table-layout: fixed;
   word-wrap:break-word;
   }
   div {
   word-wrap:break-word;
   }
</style>
</head>

<body onload="init()">
<img id="pic" onmousewheel="return zoomimg(this);" src="" name="img" alt="Image" class="drag">
</body>
</html>

分享到：

iBATIS常用Sql语句 | Flex在eclipse调试以及输出Debug信息到文 ...

2011-03-30 09:57
浏览 1075
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论