JavaScript實(shí)現(xiàn)圖片跟隨鼠標(biāo)的移動(dòng)而移動(dòng)

先，通過(guò)視頻了解要實(shí)現(xiàn)怎么一個(gè)效果，視頻如下：

分析

1.鼠標(biāo)不斷的移動(dòng)，使用鼠標(biāo)移動(dòng)事件：mousemove

2.在頁(yè)面中移動(dòng)，給document注冊(cè)事件

3.圖片要移動(dòng)距離，而且不占位置，我們使用絕對(duì)定位即可

4.核心原理：每次鼠標(biāo)移動(dòng)，我們都會(huì)獲得最新的鼠標(biāo)坐標(biāo)，把這個(gè)x和y坐標(biāo)做為圖片的top和left值就可以移動(dòng)圖片了。

代碼

html中，我們經(jīng)常會(huì)用到table布局；有時(shí)候需要實(shí)現(xiàn)指定單元格，當(dāng)鼠標(biāo)移動(dòng)到上面的時(shí)候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

html的文件結(jié)構(gòu)大家都是知道的了，總體分為head和body部分

我們要實(shí)現(xiàn)變色，在head部分實(shí)現(xiàn)格式

<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時(shí)候，注明class="tablex".這樣的話，就實(shí)現(xiàn)了我們所說(shuō)的效果了。

附上完整代碼：

<html>

<head>

<title>測(cè)試鼠標(biāo)移到到表格單元格背景顏色改變的</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>

在任何一個(gè)瀏覽器中運(yùn)行，效果如下

南大盛聯(lián)20年來(lái)一直致力于高端IT培訓(xùn)--打造高級(jí)軟件人才實(shí)戰(zhàn)培訓(xùn)專家，學(xué)生對(duì)我們的認(rèn)可是我們一直前進(jìn)的動(dòng)力；項(xiàng)目團(tuán)隊(duì)全球招聘，特聘來(lái)自海外的老師進(jìn)行任教，采用100%商業(yè)項(xiàng)目進(jìn)行實(shí)戰(zhàn)培訓(xùn)，線上線下同步進(jìn)行。

課程全部緊隨市場(chǎng)需求進(jìn)行設(shè)計(jì)，并且動(dòng)態(tài)進(jìn)行調(diào)整；7天免費(fèi)試聽(tīng)，0首付開(kāi)始學(xué)習(xí)，學(xué)完后進(jìn)行100%推薦就業(yè)，不滿意工作崗位2次推薦。

選定一個(gè)平臺(tái)，認(rèn)識(shí)一群志同道合的朋友，你的未來(lái)人生路必定不一樣。

目前已經(jīng)開(kāi)設(shè)下面這些培訓(xùn)項(xiàng)目

Java培訓(xùn)

安卓培訓(xùn)

JavaWeb培訓(xùn)

Linux培訓(xùn)

云服務(wù)器布置培訓(xùn)

HTML5培訓(xùn)

SEO培訓(xùn)

視頻剪輯培訓(xùn)

UI培訓(xùn)

歡迎您們分享給自己愿意分享的朋友，大家一起來(lái)進(jìn)步；相互轉(zhuǎn)告，咨詢，學(xué)習(xí)。

南大盛聯(lián)培訓(xùn)理念：我懂，我也能讓你懂。

見(jiàn)鼠標(biāo)事件

對(duì)鼠標(biāo)進(jìn)行操作就會(huì)產(chǎn)生鼠標(biāo)事件，比如按下、松開(kāi)鼠標(biāo)左鍵、右鍵或滾輪等。

onmousemove事件：當(dāng)鼠標(biāo)指針在指定元素上移動(dòng)時(shí)，就會(huì)觸發(fā)該事件。

<!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>

當(dāng)鼠標(biāo)移動(dòng)到div方形區(qū)域內(nèi)，背景顏色變?yōu)榧t色。

onmousedown事件：當(dāng)鼠標(biāo)指針移動(dòng)到指定元素上并按下，會(huì)觸發(fā)該事件。

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

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

onmouseup事件：當(dāng)鼠標(biāo)指針移動(dòng)到指定元素上按下并離開(kāi)，會(huì)觸發(fā)該事件。

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

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

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

createElement()方法

createElement()：通過(guò)指定名稱創(chuàng)建一個(gè)元素。

項(xiàng)目目標(biāo)：

在輸入框輸入非空內(nèi)容，自動(dòng)添加到下方列表。

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

let arr = ["吃飯", "睡覺(jué)", "打豆豆"];
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("請(qǐng)輸入內(nèi)容");
}

event對(duì)象

在事件被觸發(fā)時(shí)，js會(huì)自動(dòng)生成一個(gè)event對(duì)象，控制臺(tái)輸出event可以查看這個(gè)事件的具體信息。

項(xiàng)目目標(biāo)：瀏覽器中有一個(gè)紅色小球，鼠標(biāo)點(diǎn)擊，小球就會(huì)移動(dòng)到點(diǎn)擊的位置。

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";
}

拖拽效果

移動(dòng)時(shí)disX和disY沒(méi)有變化：

項(xiàng)目目標(biāo)：拖動(dòng)紙飛機(jī)移動(dòng)。

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;
    }
}

視頻講解

整合營(yíng)銷服務(wù)商

JavaScript實(shí)現(xiàn)圖片跟隨鼠標(biāo)的移動(dòng)而移動(dòng)

先，通過(guò)視頻了解要實(shí)現(xiàn)怎么一個(gè)效果，視頻如下：

分析

代碼

html中，我們經(jīng)常會(huì)用到table布局；有時(shí)候需要實(shí)現(xiàn)指定單元格，當(dāng)鼠標(biāo)移動(dòng)到上面的時(shí)候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

見(jiàn)鼠標(biāo)事件

createElement()方法

event對(duì)象

拖拽效果

視頻講解

相關(guān)推薦

您的項(xiàng)目需求

整合營(yíng)銷服務(wù)商

JavaScript實(shí)現(xiàn)圖片跟隨鼠標(biāo)的移動(dòng)而移動(dòng)

先， 通過(guò)視頻了解要實(shí)現(xiàn)怎么一個(gè)效果，視頻如下：

分析

代碼

html中，我們經(jīng)常會(huì)用到table布局；有時(shí)候需要實(shí)現(xiàn)指定單元格，當(dāng)鼠標(biāo)移動(dòng)到上面的時(shí)候，該單元格背景變色，不是該行背景變色，也不是僅僅文字的背景變色；

見(jiàn)鼠標(biāo)事件

createElement()方法

event對(duì)象

拖拽效果

視頻講解

相關(guān)推薦

您的項(xiàng)目需求

先，通過(guò)視頻了解要實(shí)現(xiàn)怎么一個(gè)效果，視頻如下：