元素跟随鼠标在指定区域运动通常是用在商城图片的放大镜中，下面是完整的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. SQL 必知必会 总结（一）

    SQL必知必会 总结(一) 第 1 课 了解SQL 1.数据库(database): 保存有组织的数据容器(通常是一个文件或一组文件). 2.数据库管理系统(DBMS): 数据库软件,数据库是通过 D ...

  2. call、apply、bind的异同

    一.call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观看出 ...

  3. WPF一步步开发XMPP IM客户端2：主窗体设计

    UI设计方案: 在设计窗体UI之前,先要了解一些主要的接口和帮助类: 对于主窗的左侧列表,容器内的Item必须实现ILeftItem的接口,比如联系人.系统消息.群等,接口包含点击事件 public ...

  4. php if 的实现

    简单分析下php中的分支背后的实现 <?php ){ echo "a"; }else{ echo "b"; } 1.语法分析 unticked_state ...

  5. python3模块: uuid

    一. 简介 UUID是128位的全局唯一标识符,通常由32字节的字母串表示.它可以保证时间和空间的唯一性,也称为GUID. 全称为:UUID--Universally Unique IDentifie ...

  6. ANR触发原理（what triggers ANR?）

    Ref: http://developer.android.com/training/articles/perf-anr.html http://stackoverflow.com/questions ...

  7. (转)python 判断数据类型

    原文:https://blog.csdn.net/mydriverc2/article/details/78687269 Python 判断数据类型有type和isinstance 基本区别在于: t ...

  8. sql server 2012 数据库日志文件过大，怎么缩小？

    最近发现网站不能访问,原因数据库服务器磁盘剩余空间没了.再细查发现日志文件占用了70%,收缩日志文件失败. 在网上查找原因,是没有备份不能收缩日志文件. 临时解决的方式: 备份事务日志,再收缩日志文件 ...

  9. django第一课 简单的网页视图

    注意本人django版本2.0      python3.6 第一步:创建自己的django项目 django-admin.py startproject ** 第二步:进入**创建app pytho ...

  10. 部分替换mysql表中某列的字段

    UPDATE `table_name` SET `field_name` = replace (`field_name`,'from_str','to_str') WHERE `field_name` ...