地图双屏鼠标跟随效果

最新推荐文章于 2022-08-18 10:19:58 发布

zhu_zhu_xia

最新推荐文章于 2022-08-18 10:19:58 发布

阅读量167

点赞数

分类专栏： JavaScript 文章标签： servlet javascript html

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/zhu_zhu_xia/article/details/126020265

版权

JavaScript 专栏收录该内容

18 篇文章

订阅专栏

很早的一个效果，今天偶然用到

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>双屏鼠标跟随效果</title>

<style>

body {

margin: 0;

padding: 0;

overflow: hidden;

border: 0;

height: 100%;

width: 100%;

}

#handDiv {

width: 40px;

height: 40px;

background: url("123.png");

position: absolute;

display: none;

}

</style>

<script>

window.onload = function() {

var oTop = document.getElementById("handDiv");

document.getElementById("leftdiv").onmousemove = function(event) {

document.getElementById("handDiv").style.display="block";

var oEvent = event || window.event;

var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;

oTop.style.left = oEvent.clientX + window.screen.availWidth / 2 + 10 + "px";

oTop.style.top = oEvent.clientY + scrolltop + 10 + "px";

}

document.getElementById("leftdiv").onmousedown = function(event) {

document.getElementById("handDiv").style.display="block";

var oEvent = event || window.event;

var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;

oTop.style.left = oEvent.clientX + window.screen.availWidth / 2 + "px";

oTop.style.top = oEvent.clientY + scrolltop + "px";

}

document.getElementById("leftdiv").onmouseout = function(event) {

document.getElementById("handDiv").style.display="none";

}

document.getElementById("rightdiv").onmousemove = function(event) {

document.getElementById("handDiv").style.display="block";

var oEvent = event || window.event;

var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;

oTop.style.left = oEvent.clientX - window.screen.availWidth / 2 + "px";

oTop.style.top = oEvent.clientY + scrolltop + "px";

}

document.getElementById("rightdiv").onmousedown = function(event) {

document.getElementById("handDiv").style.display="block";

var oEvent = event || window.event;

var scrollleft = document.documentElement.scrollLeft || document.body.scrollLeft;

var scrolltop = document.documentElement.scrollTop || document.body.scrollTop;

oTop.style.left = oEvent.clientX - window.screen.availWidth / 2 + "px";

oTop.style.top = oEvent.clientY + scrolltop + "px";

}

document.getElementById("rightdiv").onmouseout = function(event) {

document.getElementById("handDiv").style.display="none";

}

}

</script>

</head>

<body>

<div id="leftdiv" style="width: 50%;height: 100%;background-color: gray;position: absolute;">

</div>

<div id="rightdiv" style="width: 50%;height: 100%;background-color: green;position: absolute;float: right;right: 0;">

</div>

<div id="handDiv"></div>

</body>

</html>

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。