浏览器实现ACDSEE看图功能之--用鼠标移动观看图形

最新推荐文章于 2010-03-01 11:25:00 发布

wanghr100

最新推荐文章于 2010-03-01 11:25:00 发布

阅读量2.9k

点赞数

分类专栏：网站制作技术文章标签：浏览器 function image input 图形 .net

本文链接：https://blog.csdn.net/wanghr100/article/details/16369

版权

网站制作技术专栏收录该内容

6 篇文章 0 订阅

订阅专栏

//初始化
var x=0;
var y=0;
function baoDrag() {
//记录鼠标所点的位置,X,Y.
var x=event.clientX;
var y=event.clientY;
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
event.cancelBubble=true;
event.returnValue=false;

function moveHandler() {
//先捕获鼠标新的位置,和鼠标点击开始拖动之差为要滚动量.
var newx=event.clientX-x;
var newy=event.clientY-y;
//更新鼠标位置.
x=event.clientX;
y=event.clientY;
//开始移动
window.scrollBy(-newx,-newy);
event.cancelBubble=true;
}

function upHandler() {
//鼠标松开.注销相关事件.
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);
event.cancelBubble=true;
}
}
//加入鼠标事件.拖动开始.
document.οnmοusedοwn=baoDrag;
//屏蔽选择图片.
document.onselectstart=new Function("event.returnValue=false")
</script>
<body>

<input type=image src="baby.jpg" style="position:absolute;top:0;left:0;width:1000;height:1000;">

wanghr100

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
浏览器实现ACDSEE看图功能之--用鼠标移动观看图形

* {cursor:hand}/* * author: wanghr100(灰豆宝宝.net) * e-mail: wanghr100@hotmail.com */ //初始化var x=0;var y=0;function baoDrag() { //记录鼠标所点的位置,X,Y. var x=event.clientX; var y=event.clientY; document.a
复制链接

扫一扫