javascript元素跟随鼠标在指定区域运动

最新推荐文章于 2024-07-17 15:26:15 发布

weixin_34010949

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量127

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hutuzhu/p/4435461.html

版权

元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中，下面是完整的Demo：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>鼠标区域</title>
	<style type="text/css">
	*{margin:0;padding:0;}
		.area{
			width:400px;
			height:400px;
			margin:30px auto;
			background: #ccc;
			overflow: hidden;
			position: relative;
		}
		.hover{
			border:1px dashed #000;
			width:100px;
			height:100px;
			background: rgba(0,0,0,0.25);
			position: absolute;
			display: none;
			cursor: move;
		}
	</style>
</head>
<body>
	<div id="area" class="area">
		<div class="hover" id="hover">
	</div>
	<script type="text/javascript">
		var $box = document.getElementById("area");
		var $hover = document.getElementById("hover");
		var boxW=$box.offsetWidth,
			boxH=$box.offsetHeight,
			boxLeft=$box.offsetLeft,
			boxTop=$box.offsetTop;
		var startX,startY,hoverW,hoverH;
		$box.οnmοuseοver=function(event){
			var event=event||window.event;
			$hover.style.display="block";
			hoverW=$hover.offsetWidth,
			hoverH=$hover.offsetHeight;
			var x = event.clientX;
			var y = event.clientY;
			$hover.style.left=(x-boxLeft-hoverW/2)+"px";
			$hover.style.top=(y-boxTop-hoverH/2)+"px";
			console.log(boxW+"<br/>"+hoverW)
		}
		
		$box.οnmοusemοve=function(event){
			var event=event||window.event;
			var x = event.clientX;
			var y = event.clientY;
			var resultX,resultY;
			if(x-boxLeft-50<0){
				resultX=0;
			}else if(x-boxLeft-50>=boxW-hoverW){
				resultX=boxW-hoverW;
			}else{
				resultX=x-boxLeft-50;
			}
			if(y-boxTop-50<0){
				resultY=0
			}else if(y-boxTop-50>=boxH-hoverH){
				resultY=boxH-hoverH;
			}else{
				resultY=y-boxTop-50;
			}
			$hover.style.left=resultX+"px";
			$hover.style.top=resultY+"px";
		}
		$box.onmouseout = function(event) {
			var event=event||window.event;
			var x = event.clientX;
			var y = event.clientY;
			var divx1 = $box.offsetLeft;
			var divy1 = $box.offsetTop;
			var divx2 = $box.offsetLeft + $box.offsetWidth;
			var divy2 = $box.offsetTop + $box.offsetHeight;
			if (x < divx1 || x > divx2 || y < divy1 || y > divy2) {
				$hover.style.display="none";
			}
		}

	</script>
</body>
</html>

　　主要是两个关键点：

1、获取鼠标当前位置，然后设置运动元素的当前位置为鼠标位置；

2、判断元素是否靠近父级元素的边界，设置临界值；

转载于:https://www.cnblogs.com/hutuzhu/p/4435461.html

weixin_34010949

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript元素跟随鼠标在指定区域运动

元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中，下面是完整的Demo：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>鼠标区域</title> <style type="text/css">...
复制链接

扫一扫