本身写的一个给图片加灰蒙效果的实现

时间 2019-11-18

标签本身写的一个图片灰蒙效果实现繁體版

原文原文链接

/**javascript

*看到有些网站的图片显示，当鼠标移到图片上时图片会变清晰，平时好像有被一层半透明物体遮住的感受，闲来无事，本身就想试试能不能实现，我作的css

*比较简单，没有太复杂的逻辑，直接上代码：html

*/java

/**jquery

* css代码编程

**/json

.img-window,.img-cover,.img-content{
    width:200px;   /*图片容器和覆盖物的尺寸*/
    height: 200px
}
.img-window{
    position: relative; /*容器采用相对布局，覆盖物和图片采用绝对定位,这样就*/
    margin: 5px;        /*能够经过控制容器来控制图片和覆盖物*/
    float: left;
}
.img-cover{
    opacity: 0.2;        /*控制覆盖物的透明度*/
    background-color: #A0A0A0;  /*覆盖物的颜色*/
    position: absolute; 
    z-index: 2;
    display: block;
}
.img-content{
    position: absolute;
    z-index: 1;
}

/**app

* js代码，依赖jquery，以插件的形式实现ide

**/布局

;
(function($) {       
    /**
    *添加一张图片，传入参数是一个json对象，目前对象只有一个属性img_path表示图片的src属性
    */
    $.fn.addImg = function(params) {    
        var imgPath = params.img_path;
        var html = "<div class='img-window'> <div class='img-cover'></div> <img class='img-content' src='"+params.img_path+"'/> <div>"
        $(this).append(html);
        return $(this);
    };

    /**
    *添加鼠标移入移出的变化效果，这里须要注意两点,
    *1）由于覆盖物在图片上面，故鼠标移入事件应该加在覆盖物上，鼠标移入后，
    *   覆盖物消失，此时鼠标在图片上，当鼠标移出图片时，覆盖物出现，因此鼠标的移出事件要加在图片上
    *2）鼠标移出事件定位覆盖物时不能用覆盖物样式进行定位，那样会定位到全部的覆盖物，而应该用prev()，
    *   以兄弟的相对定位法定位
    */
    $.fn.addHover = function(){
        $(".img-cover").mouseover(function(){
            $(this).hide(); //本身消失（覆盖物）
        });
        $(".img-content").mouseout(function(){
            $(this).prev().show(); //本身前面的兄弟出现(覆盖物)
        });
    };

})(jQuery);

/**

*html代码

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/layer.css"/>
        <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            $(function(){
                $("#container_div1").addImg({img_path:'images/1.jpg'})
                                   .addImg({img_path:'images/2.jpg'})
                                   .addImg({img_path:'images/3.jpg'})
                                   .addImg({img_path:'images/4.jpg'})
                                   .addImg({img_path:'images/5.jpg'})
                                   .addHover();
            });
        </script>
    </head>
    <body>
        <div id="container_div1">
        </div>
    </body>
</html>

/**

*功能还很不完善，有时间再弄弄，js编程仍是蛮有意思的

**/