元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中，下面是完整的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.onmouseover=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.onmousemove=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、判断元素是否靠近父级元素的边界，设置临界值；

javascript元素跟随鼠标在指定区域运动的更多相关文章

  1. js进阶 12-3 如何实现元素跟随鼠标移动

    js进阶 12-3 如何实现元素跟随鼠标移动 一.总结 一句话总结:获取鼠标位置,将鼠标位置设置为元素偏移即可. 1.用什么事件获取鼠标位置? 用mousemove可以获取鼠标移动的时候的位置 $(d ...

  2. HTML元素跟随鼠标一起移动,网页中回到顶部按钮的实现

    对象跟随鼠标: 1.对象css设置绝对定位position: absolute; 2.获取鼠标坐标: 3.通过鼠标坐标计算出对象坐标位置,并设置为css定位的位置: document.onmousem ...

  3. 完整的html+css+javascript实现跟随鼠标移动显示选中效果

    1,显示效果: 2,html结构 <div class="process_list-lpu"> <div class="process_line&quo ...

  4. javascript div跟随鼠标移动

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  5. javascript创建跟随鼠标好玩的东西

    不说话,直接上代码. css: #createGoDivBox{ display: none; } #createGoDivBox div{ background-color: #00A6C2; po ...

  6. WPF DragDrop事件元素跟随

    前一段时间项目里面要实现一个鼠标拖动一个元素到另外一个元素上面并且赋值的功能,由于要在surface上运行,拖动的时候手指会挡住系统默认的拖动图标,导致用户意识不到自己是不是在拖动着东西,所以要解决这 ...

  7. Javascript之盒子拖拽（跟随鼠标、边界限定、轨迹回放）

    本文通过拖拽案例,实现"跟随鼠标.边界限定.轨迹回放"三大效果: 完整代码中有详尽注释,故不再进行细致讲解: 对于案例中需要注意的重点或易错点问题,会总结在最后. 效果图(仅演示左 ...

  8. html5跟随鼠标炫酷网站引导页动画特效

    html5跟随鼠标炫酷网站引导页动画特效一款非常不错的引导页,文字效果渐变,鼠标跟随出绚丽的条纹.html5炫酷网站引导页,鼠标跟随出特效. 体验效果:http://hovertree.com/tex ...

  9. JS打造的跟随鼠标移动的酷炫拓扑图案

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Windows 内核漏洞学习—空指针解引用

    原标题:Windows Kernel Exploitation – NullPointer Dereference 原文地址:https://osandamalith.com/2017/06/22/w ...

  2. javascript 模块依赖管理的本质

    模块模式定义 模块是'javascript'的一种设计模式,它为函数定义一个包装函数,并且该包装函数的返回值与模块的API保持一致: function createModule() { functio ...

  3. ffmpeg开发基础知识

    1.音频采集 面临的问题:延时敏感,噪声消除,回声消除,静音检测 主要参数: 采样率,位宽,声道数,音视频帧 采样率: 也称为采样速度或者采样率,定义了每秒从连续信号中提取并组成离散信号的采样个数,它 ...

  4. 编写线程安全的Java缓存读写机制 （原创）

    一种习以为常的缓存写法: IF value in cached THEN return value from cache ELSE compute value save value in cache ...

  5. Requests库入门实例

    爬虫入门5个实例 实例1:京东商品页面的爬取 import requests def getHTMLText(url): try: r = requests.get(url,timeout = 30) ...

  6. 剑指offer五十六之删除链表中重复的结点

    一.题目 在一个排序的链表中,存在重复的结点,请删除该链表中重复的结点,重复的结点不保留,返回链表头指针. 例如,链表1->2->3->3->4->4->5 处理后 ...

  7. 【Java】认识 JDK，JRE，JVM

    JDK,JRE,JVM 今天我们讨论下这三个Java工具 JDK 全称Java Development ToolKit(Java 开发工具包). JDK是整个JAVA的核心,其包括了Java运行环境( ...

  8. JVM-压缩指针

    什么是压缩指针: 通常64位JVM消耗的内存会比32位的最多会多用1.5倍,这是因为对象指针在64位架构下,对象指针长度会翻倍. 对于那些将要从32位平台移植到64位的应用来说,平白无辜多了1/2的内 ...

  9. Android_Universal-Image-Load使用

    一,快速使用(确保ImageLoader只初始化一次,这样图片缓存会更加优秀.) 场景:为ImageView设置一张指定Uri的图片. 1,导包,配置联网,读写SD卡权限. 2,初始化: ImageL ...

  10. 解决chrome，下载在文件夹中显示，调用错误的关联程序

    https://blog.csdn.net/qq_32337527/article/details/81778732?utm_source=blogxgwz0