本身寫的一個給圖片加灰濛效果的實現

時間 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>