js實現(xiàn)鼠標移動到圖片產(chǎn)生遮罩效果
更新時間：2017年10月21日 09:29:59 作者：數(shù)星星的咚咚咚
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標移動到圖片產(chǎn)生遮罩效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)鼠標移動到圖片產(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>
效果圖：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js中split和replace的用法,實例分析了split和replace的功能及使用技巧,需要的朋友可以參考下2015-02-02
Blob常用于處理文件數(shù)據(jù)、圖像數(shù)據(jù)、音頻數(shù)據(jù),本文主要介紹了JavaScript中URL和Blob的具體實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-08-08
這篇文章主要介紹了WebView啟動支付寶客戶端支付失敗的問題小結的相關資料,需要的朋友可以參考下2017-01-01
在JavaScript中for循環(huán)是同步的,意味著每個循環(huán)都會等待前一個循環(huán)的請求完成后才會執(zhí)行下一個循環(huán),這篇文章主要給大家介紹了關于JS多次請求接口按順序依次執(zhí)行的解決辦法,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了JS ES6中的解構，對解構感興趣的同學，可以參考下2021-04-04
近，在客戶端解吸xml時候，需要將XML轉化成字符串，看了很多文章，介紹的最多的是將XML字符串轉化成對象2011-12-12
javascript中$(function() {});寫與不寫有哪些區(qū)別
javascript中$(function() {....}) 是jQuery中的經(jīng)典用法，等同于 $(document).ready(function() {....}) javascript中$(function() {});寫與不寫有哪些區(qū)別，需要的朋友可以參考下2015-08-08
indexOf是在一個字符串中尋找一個字的位置，lastIndexOf 也是找字 , 它們倆的區(qū)別是前者從字符串頭開始找，后者是從字符串末端開始找2014-09-09
基于js實現(xiàn)復制內(nèi)容到操作系統(tǒng)粘貼板過程解析
這篇文章主要介紹了基于js實現(xiàn)復制內(nèi)容到操作系統(tǒng)粘貼板過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
JS動態(tài)增加刪除UL節(jié)點LI及相關內(nèi)容示例
這篇文章主要介紹了JS如何動態(tài)增加刪除UL節(jié)點LI及相關內(nèi)容,需要的朋友可以參考下2014-05-05