JS實(shí)現(xiàn)頁面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效
更新時(shí)間：2020年08月19日 09:26:43 作者：hthththtt
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)頁面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)頁面鼠標(biāo)點(diǎn)擊出現(xiàn)圖片，供大家參考，具體內(nèi)容如下
需求：
在頁面可視區(qū)鼠標(biāo)點(diǎn)擊時(shí)，鼠標(biāo)位置出現(xiàn)圖片
技術(shù)：
監(jiān)聽器，鼠標(biāo)坐標(biāo)獲取
效果圖
源碼分享：
圖片是動(dòng)態(tài)添加進(jìn)頁面的，所以沒有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) 上圖 ！
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
ES6 Object屬性新的寫法實(shí)例小結(jié)
這篇文章主要介紹了ES6 Object屬性新的寫法,結(jié)合實(shí)例形式總結(jié)分析了ES6中object屬性的常見簡化寫法,需要的朋友可以參考下2019-06-06
js實(shí)現(xiàn)無縫循環(huán)滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)無縫循環(huán)滾動(dòng)的具體代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
本篇文章主要介紹了Webpack DLL 用法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08
JavaScript手寫實(shí)現(xiàn)一個(gè)簡單的快捷鍵庫
前端開發(fā)中,有時(shí)項(xiàng)目會(huì)遇到一些快捷鍵需求,比如綁定快捷鍵,展示快捷鍵,編輯快捷鍵等需求,所以本文就來用JavaScript手寫一個(gè)簡單的快捷鍵庫吧2024-02-02
uniapp實(shí)現(xiàn)可滑動(dòng)選項(xiàng)卡
這篇文章主要為大家詳細(xì)介紹了uniapp實(shí)現(xiàn)可滑動(dòng)選項(xiàng)卡，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要介紹了JS匿名函數(shù),結(jié)合實(shí)例形式分析了javascript匿名函數(shù)的定義、參數(shù)、返回值等相關(guān)使用方法,需要的朋友可以參考下2016-11-11
基于JavaScript的操作系統(tǒng)，你聽說過嗎？小編也是第一次聽說，接觸，和大家一起了解一下2016-01-01
本篇文章主要介紹了JS正則表達(dá)式驗(yàn)證中文字符的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法分析
這篇文章主要介紹了javascript勻速運(yùn)動(dòng)實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JavaScript勻速運(yùn)動(dòng)的具體實(shí)現(xiàn)步驟與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-01-01
這篇文章主要介紹了詳解JS模塊導(dǎo)入導(dǎo)出以及相關(guān)問題解決方法，需要的朋友學(xué)習(xí)參考下吧。2017-12-12