本文实例为大家分享了js实现鼠标移动到图片产生遮罩效果的具体代码,供大家参考,具体内容如下
<!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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- js+html5实现半透明遮罩层弹框效果
- js遮罩效果制作弹出注册界面效果
- JavaScript仿flash遮罩动画效果
- JavaScript编写页面半透明遮罩效果的简单示例
- 使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
- 基于JavaScript实现全屏透明遮罩div层锁屏效果
- js点击按钮实现带遮罩层的弹出视频效果
- js弹窗返回值详解(window.open方式)
- js弹出框、对话框、提示框、弹窗实现方法总结(推荐)
- JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例