元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中，下面是完整的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. webpack快速入门——集中拷贝静态资源

    工作中会有一些已经存在但在项目中没有引用的图片资源或者其他静态资源(比如设计图.开发文档), 这些静态资源有可能是文档,也有可能是一些额外的图片.项目组长会要求你打包时保留这些静态资源, 直接打包到制 ...

  2. spring定时任务的注解实现方式

    STEP 1:在spring配置文件中添加相应配置,以支持定时任务的注解实现 (一)在xml里加入task的命名空间 <!-- beans里添加:--> xmlns:task=" ...

  3. 使用SUI框架下的<a>标签点击跳转页面不刷新的问题

    最近写好了几个页面,今天试着将各个页面的链接打通,然后问题就来了...(╯︵╰) 这里看一下原来想要实现的两个页面跳转的效果--点击图一标注的栏目可以跳转到一个新的页面图二... 按照之前写a标签的跳 ...

  4. 【2018北京集训十二】 coin 矩阵快速幂

    矩阵快速幂原来还可以这么用?? 你们城里人还真会玩. 我们令$f[i][j][k]$表示总的钱数为i,当前使用的最大面值硬币的面值为$v_j$,最小为$v_k$的方案数量. 不难发现$f[i][j][ ...

  5. 剑指offer四十二之和为S的两个数字

    一.题目 输入一个递增排序的数组和一个数字S,在数组中查找两个数,是的他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 二.思路 数列满足递增,设两个头尾两个指针i和j,若ai + ...

  6. springMVC执行流程及原理

    spring的MVC执行原理 1.spring mvc将所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责对请求 进行真正的处理工作. 2.DispatcherSer ...

  7. Javac语法糖之TryCatchFinally

    https://docs.oracle.com/javase/specs/jls/se7/html/jls-14.html#jls-14.20.3 Optionally replace a try s ...

  8. 《Mysql技术内幕，Innodb存储引擎》——文件、表

    文件 日志 错误日志 对Mysql启动.运行和关闭过程进行记录,通过SHOW VARIABLES LIKE 'log_error'查看日志文件位置. 慢查询日志 Mysql启动时设置一个阈值,运行时间 ...

  9. seajs源码分析（一）---整体结构以及module.js

    1,seajs的主要内容在module.js内部,最开始包含这么几个东西 var cachedMods = seajs.cache = {} var anonymousMeta var fetchin ...

  10. SFTP服务器搭建

    Sftp搭建文档 1.  查看openssh的版本 # ssh  -V Openssh版本必须大于4.8p1. 2.  创建用户并设置登录密码 #groupadd sftp #useradd –d / ...