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