JS實(shí)現(xiàn)頁(yè)面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效
更新時(shí)間：2020年08月19日 09:26:43 作者：hthththtt
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁(yè)面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)頁(yè)面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片，供大家參考，具體內(nèi)容如下
需求：
在頁(yè)面可視區(qū)鼠標(biāo)點(diǎn)擊時(shí)，鼠標(biāo)位置出現(xiàn)圖片
技術(shù)：
監(jiān)聽(tīng)器，鼠標(biāo)坐標(biāo)獲取
效果圖
源碼分享：
圖片是動(dòng)態(tài)添加進(jìn)頁(yè)面的，所以沒(méi)有HTML部分。
JS
let div = document.createElement("div");
div.id = "mouseImg";
for (let i =0 ; i <3 ;i++){
let img = document.createElement("img");
img.src = "images/timg.gif";
div.appendChild(img);
}
document.body.appendChild(div);
let divImg = document.querySelector("#mouseImg");
document.addEventListener("mousedown",function (e) {
let x = e.pageX;
let y = e.pageY;
divImg.style.left = x + "px" ;
divImg.style.top = y + "px";
let imgs = divImg.children;
for (let i =0 ; i < imgs.length ;i++) {
imgs[i].style.opacity = "1";
setTimeout(function () {
imgs[i].style.opacity = "0";
},2200);
}
});
CSS
body {
background-color: rgba(0, 255, 255, 0.12);
cursor: pointer;
}
#mouseImg {
width: 50px;
height: 50px;
position: absolute;
}
#mouseImg img {
width: 100%;
opacity: 0;
transition: all .9s ease ;
}
#mouseImg img:nth-of-type(2){
transition-delay: .5s;
}
#mouseImg img:nth-of-type(3){
transition-delay: .8s;
}
這個(gè)案例，也可以做成 圖片跟隨鼠標(biāo)移動(dòng) 上圖 ！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)單日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-08-08
比較兩個(gè)字符串中不同的字符2009-05-05
substring是從中截取一段字符串,在組成一個(gè)新的字符串,這篇文章主要介紹了js中substring使用示例小結(jié),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
prototype class詳解...2006-09-09
這篇文章主要為大家介紹了你不知道的Git?log竟然還有這種用法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
js中switch case循環(huán)實(shí)例代碼
這篇文章主要介紹了js中switch case循環(huán)實(shí)例代碼，有需要的朋友可以參考一下2013-12-12
在CSS里寫(xiě)復(fù)雜的JavaScript腳本
在IE下,CSS里可以寫(xiě)入JavaScript腳本,不過(guò),要用expression套住. 雖然可以這樣,但是由于是在CSS里,這個(gè)特殊地方,所以,不能寫(xiě)成如下這樣: width:expression(if(...){}else{...})2008-04-04
使用JavaScript庫(kù)還是自己寫(xiě)代碼？
有時(shí)候在寫(xiě)JavaScript添加到你的網(wǎng)頁(yè)中的時(shí)候，你將需要決定是使用已有的可用的JavaScript庫(kù)還是自己寫(xiě)所有代碼。其中每個(gè)各有優(yōu)缺點(diǎn)，因此沒(méi)有任何一種方式對(duì)每個(gè)人來(lái)說(shuō)都是絕對(duì)正確的選擇。2010-01-01
用函數(shù)式編程技術(shù)編寫(xiě)優(yōu)美的 JavaScript_ibm
函數(shù)式編程語(yǔ)言在學(xué)術(shù)領(lǐng)域已經(jīng)存在相當(dāng)長(zhǎng)一段時(shí)間了，但是從歷史上看，它們沒(méi)有豐富的工具和庫(kù)可供使用。隨著 .NET 平臺(tái)上的 Haskell 的出現(xiàn)，函數(shù)式編程變得更加流行。一些傳統(tǒng)的編程語(yǔ)言，例如 C++ 和 JavaScript，引入了由函數(shù)式編程提供的一些構(gòu)造和特性。在許多情況下，JavaScript 的重復(fù)代碼導(dǎo)致了一些拙劣的編碼。如果使用函數(shù)式編程，就可以避免這些問(wèn)題。此外，可以利用函數(shù)式編程風(fēng)格編寫(xiě)更加優(yōu)美的回調(diào)。2008-05-05
用javascript實(shí)現(xiàn)的激活輸入框后隱藏初始內(nèi)容
用javascript實(shí)現(xiàn)的激活輸入框后隱藏初始內(nèi)容...2007-06-06