编程 Javascript

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实现鼠标移动到图片产生遮罩效果

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

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

- Author -

数星星的咚咚咚

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript tips提示框组件实现代码

Nov 19 Javascript

jQuery固定浮动侧边栏实现思路及代码

Sep 28 Javascript

jQuery判断对象是否存在的方法

Feb 05 Javascript

JS实现带圆弧背景渐变效果的导航菜单代码

Oct 13 Javascript

KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定

Oct 10 Javascript

Bootstrap基本样式学习笔记之按钮(4)

Dec 07 Javascript

浅谈regExp的test方法取得的值变化的原因及处理方法

Mar 01 Javascript

运用jQuery写的验证表单(实例讲解)

Jul 06 jQuery

input type=file 选择图片并且实现预览效果的实例

Oct 26 Javascript

详解在React中跨组件分发状态的三种方法

Aug 09 Javascript

JS/HTML5游戏常用算法之碰撞检测包围盒检测算法详解【矩形情况】

Dec 13 Javascript

浅谈Angular7 项目开发总结

Dec 19 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