JavaScript实现图片跟随鼠标的移动而移动

先，通过视频了解要实现怎么一个效果，视频如下：

分析

1.鼠标不断的移动，使用鼠标移动事件：mousemove

2.在页面中移动，给document注册事件

3.图片要移动距离，而且不占位置，我们使用绝对定位即可

4.核心原理：每次鼠标移动，我们都会获得最新的鼠标坐标，把这个x和y坐标做为图片的top和left值就可以移动图片了。

代码

html中，我们经常会用到table布局；有时候需要实现指定单元格，当鼠标移动到上面的时候，该单元格背景变色，不是该行背景变色，也不是仅仅文字的背景变色；

html的文件结构大家都是知道的了，总体分为head和body部分

我们要实现变色，在head部分实现格式

<style>

.tablex {border-collapse: collapse;}

.tablex tr {}

.tablex tr td {text-align:center; line-height:30px;}

.tablex tr td:hover { background-color:#f00; color:#fff;}

</style>

然后在body部分，使用table时候，注明class="tablex".这样的话，就实现了我们所说的效果了。

附上完整代码：

<html>

<head>

<title>测试鼠标移到到表格单元格背景颜色改变的</title>

<style>

.table1 {border-collapse: collapse;}

.table1 tr {}

.table1 tr td {text-align:center; line-height:30px;}

.table1 tr td:hover { background-color:#006030; color:#006030;}

</style>

</head>

<body>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

在任何一个浏览器中运行，效果如下

南大盛联20年来一直致力于高端IT培训--打造高级软件人才实战培训专家，学生对我们的认可是我们一直前进的动力；项目团队全球招聘，特聘来自海外的老师进行任教，采用100%商业项目进行实战培训，线上线下同步进行。

课程全部紧随市场需求进行设计，并且动态进行调整；7天免费试听，0首付开始学习，学完后进行100%推荐就业，不满意工作岗位2次推荐。

选定一个平台，认识一群志同道合的朋友，你的未来人生路必定不一样。

目前已经开设下面这些培训项目

Java培训

安卓培训

JavaWeb培训

Linux培训

云服务器布置培训

HTML5培训

SEO培训

视频剪辑培训

UI培训

欢迎您们分享给自己愿意分享的朋友，大家一起来进步；相互转告，咨询，学习。

南大盛联培训理念：我懂，我也能让你懂。

见鼠标事件

对鼠标进行操作就会产生鼠标事件，比如按下、松开鼠标左键、右键或滚轮等。

onmousemove事件：当鼠标指针在指定元素上移动时，就会触发该事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>

    <script>
        let box = document.getElementById("box");

        box.onmousemove = function(){
            box.style.backgroundColor = "red";
        }
    </script>
</body>
</html>

当鼠标移动到div方形区域内，背景颜色变为红色。

onmousedown事件：当鼠标指针移动到指定元素上并按下，会触发该事件。

let box = document.getElementById("box");

box.onmousedown = function(){
    box.style.backgroundColor = "red";
}

onmouseup事件：当鼠标指针移动到指定元素上按下并离开，会触发该事件。

let box = document.getElementById("box");

box.onmousedown = function(){
    box.style.backgroundColor = "red";
}

box.onmouseup = function(){
    box.style.backgroundColor = "green";
}

createElement()方法

createElement()：通过指定名称创建一个元素。

项目目标：

在输入框输入非空内容，自动添加到下方列表。

let list = document.getElementById("list");
let word = document.getElementById("word");

let arr = ["吃饭", "睡觉", "打豆豆"];
for (let i = 0; i < arr.length; i++) {
	let temp = document.createElement("li");
	temp.innerHTML = arr[i];
	list.append(temp);
}
word.onblur = function() {
	let value = word.value;
	conssole.log(value);
	if(value){
		let temp = document.createElement("li");
		temp.innerHTML = value;
		list.append(temp);
	}
	else
		alert("请输入内容");
}

event对象

在事件被触发时，js会自动生成一个event对象，控制台输出event可以查看这个事件的具体信息。

项目目标：浏览器中有一个红色小球，鼠标点击，小球就会移动到点击的位置。

let box = document.getElementById("box");
document.onclick = function(event) {
	let x = event.clientX;
	let y = event.clientY;
	box.style.left = x + "px";
	box.style.top = y + "px";
}

拖拽效果

移动时disX和disY没有变化：

项目目标：拖动纸飞机移动。

let img=document.getElementById("img");
img.onmousedown = function (event) {
    let disX = event.clientX - this.offsetLeft;
    let disY = event.clientY - this.offsetTop;
    img.onmousemove = function (event) {
        let l = event.clientX - disX;
        let t = event.clientY - disY;

        this.style.left = l + 'px';
        this.style.top = t + 'px';
    }
    img.onmouseup = function () {
        img.onmouseup = img.onmousemove = null;
    }
}

视频讲解

整合营销服务商

JavaScript实现图片跟随鼠标的移动而移动

先，通过视频了解要实现怎么一个效果，视频如下：

分析

代码

html中，我们经常会用到table布局；有时候需要实现指定单元格，当鼠标移动到上面的时候，该单元格背景变色，不是该行背景变色，也不是仅仅文字的背景变色；

见鼠标事件

createElement()方法

event对象

拖拽效果

视频讲解

相关推荐

您的项目需求

整合营销服务商

JavaScript实现图片跟随鼠标的移动而移动

先， 通过视频了解要实现怎么一个效果，视频如下：

分析

代码

html中，我们经常会用到table布局；有时候需要实现指定单元格，当鼠标移动到上面的时候，该单元格背景变色，不是该行背景变色，也不是仅仅文字的背景变色；

见鼠标事件

createElement()方法

event对象

拖拽效果

视频讲解

相关推荐

您的项目需求

先，通过视频了解要实现怎么一个效果，视频如下：