js实现鼠标移动到图片产生遮罩效果


Posted in Javascript onOctober 21, 2017

本文实例为大家分享了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实现鼠标移动到图片产生遮罩效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
彪哥1.1(智能表格)提供下载
Sep 07 Javascript
获取任意Html元素与body之间的偏移距离 offsetTop、offsetLeft (For:IE5+ FF1 )[
Dec 22 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
使用CSS样式position:fixed水平滚动的方法
Feb 19 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
Mar 02 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
vue input实现点击按钮文字增删功能示例
Jan 29 Javascript
详解50行代码,Node爬虫练手项目
Apr 22 Javascript
js 函数性能比较方法
Aug 24 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
js注册时输入合法性验证方法
Oct 21 #Javascript
angular4实现tab栏切换的方法示例
Oct 21 #Javascript
js Dom实现换肤效果
Oct 21 #Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 #Javascript
深入浅析ES6 Class 中的 super 关键字
Oct 20 #Javascript
vue做网页开场视频的实例代码
Oct 20 #Javascript
使用JS中的Replace()方法遇到的问题小结
Oct 20 #Javascript
You might like
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
php生成随机数或者字符串的代码
2008/09/05 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
php获取字符串中各个字符出现次数的方法
2015/02/23 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
php将html转为图片的实现方法
2017/05/19 PHP
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
JavaScript优化专题之Loading and Execution加载和运行
2016/01/20 Javascript
JavaScript判断微信浏览器实例代码
2016/06/13 Javascript
JavaScript表单验证实现代码
2017/05/22 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
2017/07/13 Javascript
JavaScript实现图片切换效果
2017/08/12 Javascript
Node.js调用fs.renameSync报错(Error: EXDEV, cross-device link not permitted)
2017/12/27 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
jQuery实现根据身份证号获取生日、年龄、性别等信息的方法
2019/01/09 jQuery
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场
2018/04/10 DOTA
Python for Informatics 第11章之正则表达式(四)
2016/04/21 Python
Python实现采用进度条实时显示处理进度的方法
2017/12/19 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
Tensorflow实现卷积神经网络用于人脸关键点识别
2018/03/05 Python
python中比较两个列表的实例方法
2019/07/04 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python 中判断列表是否为空的方法
2019/11/24 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
Python 高效编程技巧分享
2020/09/10 Python
用CSS3实现Win8风格的方格导航菜单效果
2013/04/10 HTML / CSS
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
公民授权委托书范本
2014/09/17 职场文书
2014年销售工作总结与计划
2014/12/01 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
社会心理学学习心得体会
2016/01/22 职场文书
如何使用Python实现一个简易的ORM模型
2021/05/12 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/07 其他游戏