JavaScript实现跟随鼠标移动的盒子
本文实例为大家分享了JavaScript实现跟随鼠标移动的具体代码，供大家参考，具体内容如下
跟随鼠标移动的盒子(包括检测边界值)
效果图：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
position: absolute;
top: 0px;
left: 0px;
width: 100px;
height: 100px;
background-color: red;
}
</style>
<body>
<div>111111111</div>
<script>
var div = document.getElementsByTagName('div')[0];
div.onmousedown = function(e) {
e = window.event || e;
// 鼠标按下 获取鼠标距离页面左侧距离
var x = e.clientX;
// 获取鼠标距离页面上侧距离
var y = e.clientY;
// 元素距离页面左侧距离
var elex = div.offsetLeft;
// 元素距离页面上侧距离
var eley = div.offsetTop;
// 相减得到鼠标距离元素的距离
var X = x - elex;
var Y = y - eley;
console.log(X, Y);
document.onmousemove = function(e) {
e = window.event || e;
// 鼠标移动过程中 获取鼠标距离页面距离
var movex = e.clientX;
var movey = e.clientY;
// 1.左侧边界值
// 元素移动过程中距离页面左侧距离
var leftx = movex - X;
var lefty = movey - Y;
// 1.左侧边界值
if (leftx <= 0) {
leftx = 0;
}
// 2.上侧边界值
if (lefty <= 0) {
lefty = 0
}
// 3.右侧边界值
// 页面可视区宽 -元素宽
var rightx = document.documentElement.clientWidth - div.offsetWidth;
if (leftx >= rightx) {
leftx = rightx
}
// 4.下侧边界值
// 页面可视区高 -元素高
var righty = document.documentElement.clientHeight - div.offsetHeight;
if (lefty >= righty) {
lefty = righty;
}
// 鼠标移动过程中 获取鼠标距离页面距离 - 鼠标距离元素的距离 =元素的left top值
div.style.left = leftx + 'px';
div.style.top = lefty + 'px';
}
// 抬起清除移动事件
document.onmouseup = function() {
document.onmousemove = null;
}
// 阻止默认事件
return false;
}
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
js实现跟随鼠标移动的小球
本文实例为大家分享了js实现跟随鼠标移动的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>follow mouse</title> </head> <style type="text/css"> *{ margin: 0; padding:0; } #div1{width: 50px;height: 50px;background: red;
-
Javascript 鼠标移动上去 滑块跟随效果代码分享
先来一张截图. 鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随.不管有多少个都可以.javascript code: 复制代码 代码如下: function changeCoord(id, left) { $$(id).style.left = left;} function $$(id) { return document.getElementById(id);} function $$$(id) { return document.getElementsByClassNam
-
js+html+css实现鼠标移动div实例
js: 复制代码 代码如下: var posX; var posY; fdiv = document.getElementById("divBody"); document.getElementById("divHead").onmousedown=function(e) { if(!e) e = window.event; //IE posX = e.clientX - parseInt(fdiv.style.left); posY = e.clientY - p
-
js实现图片放大并跟随鼠标移动特效
图片跟随鼠标移动并放大js特效,供大家参考,具体内容如下 很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于" DEDECMS "官网的案例中心的效果 ! 本案例代码,效果图,代码,参考如下: JS代码: <script> //展示 function showBigPic(filepath) { //将文件路径传给img大图 document.getElementById('bigPic').src
-
原生JS实现的多个彩色小球跟随鼠标移动动画效果示例
本文实例讲述了原生JS实现的多个彩色小球跟随鼠标移动动画效果.分享给大家供大家参考,具体如下: 实现方法: 每个小球移动都有自己的坐标,小球移动的同时,需要进行坐标传递,将第一个坐标依次传递给最后一个坐标,来实现小球跟着移动的效果 实现代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小球运动</title> <style type
-
js实现文字跟随鼠标移动而移动的方法
本文实例讲述了js实现文字跟随鼠标移动而移动的方法.分享给大家供大家参考.具体分析如下: 这是一款非常简单的鼠标特性代码,在网页中移动鼠标的时候,后面跟着一串文字跟随者鼠标移动 复制代码 代码如下: <html> <head> <style type="text/css"> .spanstyle { COLOR: 000000; FONT-SIZE: 10pt; POSITION: absolute; TOP: -50px; VISIBILITY:
-
js实现图片跟随鼠标移动效果
本文实例为大家分享了js实现图片跟随鼠标移动效果的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 1000px; height: 600px; background: #cecece; margin: 20px auto; } img{ width: 5
-
javascript DIV跟随鼠标移动
首先介绍的是一个div跟随鼠标移动的效果,具体代码如下 javascript div跟随鼠标移动 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script type="text/javascript"> window.o
-
javascript实现图片跟随鼠标移动效果的方法
本文实例讲述了javascript实现图片跟随鼠标移动效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>图片跟着鼠标走</title&g
-
js图片跟随鼠标移动代码
在很多网站上能看到图片跟随鼠标移动的JS特效,其实做法很简单,在这里与大家分享下. 在实现这个特效之前,需要了解JS中一个对象,event(事件对象),对,只需了解这一个对象.它的方法属性我不多说了,想详细了解的童鞋点击这里,http://www.jb51.net/article/17266.htm. 我们用到的只有这个对象的两个属性,clientX与clientY,就是触发当前事件(可能是Click,也肯能是onmousemove等等事件)时鼠标在窗口区域的X,Y坐标(它们都是只读属性,所以只