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

    使用位域或位操作移动一个字节中的位 Java中EnumSet代替位域代码详解 关于位域的一些东西 深入理解Java枚举类型(enum) 位域是指信息在存储时,并不需要占用一个完整的字节, 而只需占几个 ...

  2. python学习笔记05-列表

    Python3已经不区分整型和长整型 列表: 查  用切片查  [n:n:n] A[1:2]  只能取出一个数  顾头不顾尾 存在步长  可以按步长1取  也可以按设置其他步长取 若要逆序取数  步长 ...

  3. phpqrcode 分别生成普通、带logo、带背景带logo二维码

    前提:下载好 phpqrcode 类库 1.生成普通二维码 //引入类库 include('phpqrcode/phpqrcode.php'); //二维码里面的链接地址 $url="htt ...

  4. leetcode-162-寻找峰值

    题目描述: 峰值元素是指其值大于左右相邻值的元素. 给定一个输入数组 nums,其中 nums[i] ≠ nums[i+1],找到峰值元素并返回其索引. 数组可能包含多个峰值,在这种情况下,返回任何一 ...

  5. 关于冒泡排序的Java代码实现

    一.排序算法的历史: 排序算法的发展历史几乎和计算机的发展历史一样悠久,而且直到今天,世界范围内依然有计算机科学家正在研究着排序的算法,由此可见排序算法的强大魅力.   我们现在介绍的排序算法都是前任 ...

  6. （转） Rabbitmq学习笔记

    详见原文: http://blog.csdn.net/shatty/article/details/9529463 Rabbitmq学习笔记

  7. traefik+etcd构建grpc微服务demo

    1.下载安装traefik https://github.com/containous/traefik/releases 2.下载安装etcd3 https://github.com/coreos/e ...

  8. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（一）：Kitty 系统介绍

    在线演示 演示地址:http://139.196.87.48:9002/kitty 用户名:admin 密码:admin 温馨提示: 有在演示环境删除数据的童鞋们,如果可以的话,麻烦动动小指,右键头像 ...

  9. 深入SpringBoot:自定义Endpoint（转）

    本文转自:https://www.jianshu.com/p/9fab4e81d7bb 最近在研究改写actuator的方式,这些放这里已备忘 Endpoint SpringBoot的Endpoint ...

  10. Java封装Redis常用操作

    package com.advance.Redis; import org.apache.log4j.Logger; import org.testng.annotations.Test; impor ...