js实现鼠标移动到图片产生遮罩效果
更新时间:2017年10月21日 09:29:59 作者:数星星的咚咚咚
这篇文章主要为大家详细介绍了js实现鼠标移动到图片产生遮罩效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
效果图:
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript高级模块化require.js的具体使用方法
本篇文章主要介绍了javascript高级模块化require.js的具体使用方法,非常具有实用价值,需要的朋友可以参考下2017-10-10javascript+iframe 实现无刷新载入整页的代码
用iframe也可以实现,但没有上述做法完美,参见discuz那些网站,如登陆弹出一个层,也是载入的一个页面,但我发现状态栏左边出现的是 正在打开about:blank2010-03-03Javascript 获取链接(url)参数的方法[正则与截取字符串]
有时我们需要在客户端获取链接参数,一个常见的方法是将链接当做字符串,按照链接的格式分解,然后获取对应的参数值。本文给出的就是这个流程的具体实现方法。2010-02-02
最新评论