元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中，下面是完整的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. elasticsearch 分片(Shards)的理解

    分片重要性 Es中所有数据均衡的存储在集群中各个节点的分片中,会影响ES的性能.安全和稳定性, 所以很有必要了解一下它. 分片是什么? 简单来讲就是咱们在ES中所有数据的文件块,也是数据的最小单元块, ...

  2. [bug] VUE 的 template 中使用 ES6 语法导致页面空白

    如果你在 template 中,使用了 es6 及以上的语法,那么,在部分ios.安卓.微信浏览器中,打开页面后显示一片空白内容.如下: <ul id="example-1" ...

  3. Git 使用流程

    # 下载远程仓库到本地 git clone 仓库地址cd 本地仓库文件夹 # 创建本地开发分支并与远程开发分支关联 git checkout -b develop origin/developgit ...

  4. java对象的结构

    [Java对象解析]不得不了解的对象头 一个Java对象到底占用多大内存? JVM源码分析之java对象头实现 java对象在内存中的结构(转帖) 一个Java对象到底占多大内存? 在Hotspot ...

  5. 使用Pylint规范你的Python代码

    Pylint是一个Python代码风格的检查工具,功能上类似于pychecker,默认用PEP8作为代码风格标准,它所提供的功能包括:检查代码行的长度,检查变量命名是否符合规范,检查声明的接口是否被真 ...

  6. Python小白学习之路（十一）—【局部变量和全局变量】【关键字global】【关键字nonlocal】

    写在前面: 几乎有一周没有更新学习笔记了吧 上周一周身体都不怎么舒服 然后还得写开题报告 然后还得看文献 天天就是写写写写写写~~~~~~改改改改改改~~~~~~~~~ 今天又开始学习了 希望之前的没 ...

  7. Ubuntu“无法打开锁文件(Could not get lock)”问题解决

    用apt-get安装软件时提示: 无法获得锁 /var/lib/dpkg/lock - open(11:资源暂时不可用) 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它? 其 ...

  8. Liunx-history命令

    1. 查看历史命令执行记录 2. 查看命令cd 的历史执行记录 3. 执行历史记录中,序号为1的命令

  9. C/C++ -- Gui编程 -- Qt库的使用 -- 标准对话框

    -----mywidget.cpp----- #include "mywidget.h" #include "ui_mywidget.h" #include & ...

  10. ES6-Proxy and Reflect

    依赖文件地址 :https://github.com/chanceLe/ES6-Basic-Syntax/tree/master/js <!DOCTYPE html> <html&g ...