js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果
更新時(shí)間：2017年10月21日 09:29:59 作者：數(shù)星星的咚咚咚
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)鼠標(biāo)移動(dòng)到圖片產(chǎn)生遮罩效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>mask</title>
<style>
.pic{
width:300px;
height:250px;
background:url(icon/product1.jpg) no-repeat;
margin:40px auto;
}
#mask{
width:300px;
height:250px;
background-color: gray;
margin:40px auto;
opacity: 0.5;
z-index: 1000;
}
</style>
</head>
<body>
<div class="pic">
<!-- <div id="mask"></div> -->
</div>
</body>
<script>
var pic=document.getElementsByClassName("pic")[0];
var d=document.createElement("div");
pic.onmouseenter=function(){
// var d=document.createElement("div");
d.id="mask";
pic.appendChild(d);
};
pic.onmouseleave=function(){
this.removeChild(d);
};
</script>
</html>
效果圖：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- js+html5實(shí)現(xiàn)半透明遮罩層彈框效果
- js遮罩效果制作彈出注冊(cè)界面效果
- JavaScript仿flash遮罩動(dòng)畫(huà)效果
- JavaScript編寫(xiě)頁(yè)面半透明遮罩效果的簡(jiǎn)單示例
- 使用CSS+JavaScript或純js實(shí)現(xiàn)半透明遮罩效果的實(shí)例分享
- 基于JavaScript實(shí)現(xiàn)全屏透明遮罩div層鎖屏效果
- js點(diǎn)擊按鈕實(shí)現(xiàn)帶遮罩層的彈出視頻效果
- js彈窗返回值詳解(window.open方式)
- js彈出框、對(duì)話(huà)框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
- JS使用遮罩實(shí)現(xiàn)點(diǎn)擊某區(qū)域以外時(shí)彈窗的彈出與關(guān)閉功能示例
相關(guān)文章
放在你的首頁(yè)比較不錯(cuò)，寬屏圖片格式，每張圖片平滑飛入切換，鼠標(biāo)放上自動(dòng)切換，和FLASH的平滑效果差不多，喜歡的朋友可以收藏下2013-11-11
JavaScript中的純函數(shù)與偏函數(shù)你了解嗎
JS中，純函數(shù)指在相同的輸入下始終產(chǎn)生相同的輸出并且沒(méi)有副作用的函數(shù)，偏函數(shù)指一種創(chuàng)建新函數(shù)的方法，通過(guò)預(yù)設(shè)一個(gè)或多個(gè)參數(shù)從而實(shí)現(xiàn)對(duì)原始函數(shù)的封裝和定制，本文主要來(lái)講講純函數(shù)與偏函數(shù)的一些使用，需要的可以參考一下2023-05-05
下拉選擇框想必大家并不陌生，一邊情況下都是使用默認(rèn)的，為了打破傳統(tǒng)，下面與大家分享下使用js自定義下拉選擇框示例代碼,感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了bootstrap組件之按鈕式下拉菜單，包括單按鈕下拉菜單，分裂式下拉菜單和向上彈出式菜單，本文給大家介紹的非常詳細(xì)，需要的朋友參考下吧2017-01-01
詳釋JavaScript執(zhí)行環(huán)境與執(zhí)行棧
一句話(huà)就可以概括：代碼 ( 包括函數(shù) ) 執(zhí)行時(shí)所需要的所有信息就是執(zhí)行環(huán)境。由于 ES 歷經(jīng)多個(gè)版本，所以執(zhí)行環(huán)境的標(biāo)準(zhǔn)也一直在變。文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
巧用js提交表單輕松解決一個(gè)頁(yè)面有多個(gè)提交按鈕
使用js提交表單想必大家都會(huì)，如果要實(shí)現(xiàn)一個(gè)頁(yè)面有多個(gè)提交按鈕，你會(huì)嗎？下面有個(gè)不錯(cuò)的示例，大家可以感受下2013-11-11
代碼永遠(yuǎn)都是那么好玩，而 Trick 不斷。那天張克軍在 twitter 上說(shuō)還有比 [].slice.call() 更短的 Array 轉(zhuǎn)換么2011-10-10
JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端飛機(jī)大戰(zhàn)小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-05-05
微信小程序之導(dǎo)航滑塊視圖容器功能的實(shí)現(xiàn)代碼(簡(jiǎn)單兩步)
這篇文章主要介紹了微信小程序之導(dǎo)航滑塊視圖容器功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
JavaScript編寫(xiě)棋盤(pán)覆蓋代碼詳解
這篇文章主要介紹了JavaScript編寫(xiě)棋盤(pán)覆蓋代碼詳解,需要的朋友可以參考下2017-08-08