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 相关文章推荐
iframe子页面获取父页面元素的方法
Nov 05 Javascript
jquery获取tagName再进行判断
May 29 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
jquery.uploadView 实现图片预览上传功能
Aug 10 jQuery
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
vue2.0使用swiper组件实现轮播效果
Nov 27 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
vue弹窗插件实战代码
Sep 08 Javascript
vue获取时间戳转换为日期格式代码实例
Apr 17 Javascript
简单了解Javscript中兄弟ifream的方法调用
Jun 17 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 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远程连接MYSQL数据库非常慢的解决方法
2008/07/05 PHP
PHP 第二节 数据类型之转换
2012/04/28 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
laravel接管Dingo-api和默认的错误处理方式
2019/10/25 PHP
匹配任意字符的正则表达式写法
2010/04/29 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
2012/08/06 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
2012/11/07 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
js星星评分效果
2014/07/24 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
原生js开发的日历插件
2017/02/04 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
2017/05/12 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
Vue解析剪切板图片并实现发送功能
2020/02/04 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
JavaScript中使用Spread运算符的八种方法总结
2020/06/18 Javascript
python中enumerate的用法实例解析
2014/08/18 Python
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
利用pyecharts读取csv并进行数据统计可视化的实现
2020/04/17 Python
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
HTML5拖拽功能实现的拼图游戏
2018/07/31 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
一套软件开发工程师笔试题
2015/05/18 面试题
社区爱国卫生月活动总结
2014/06/30 职场文书
质量保证书格式模板
2015/02/27 职场文书
终止解除劳动合同证明书
2015/06/17 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Vue项目中如何封装axios(统一管理http请求)
2021/05/02 Vue.js
QT与javascript交互数据的实现
2021/05/26 Javascript