創建一個頁面的圖層打開/關閉

Question

我想創建一個圖層打開和關閉選項頁面。

沒有人知道如何做這種頁面？

請讓我知道， 感謝

Answer 1

這裏有一個FIDDLE

<button class="on">Show All</button> 
<button class="off">Hide All</button> 
<button data-rel="one">One</button> 
<button data-rel="two">Two</button> 
<button data-rel="three">Three</button> 

<div class="one layer"></div> 
<div class="two layer"></div> 
<div class="three layer"></div> 

---

div { 
    position: absolute; 
    width: 500px; 
    height: 500px; 
    top: 100px; 
    left: 50%; 
    margin-left: -250px;; 
    opacity: 0.3; 
} 
button { 
    width: 75px; 
    margin-right: 15px; 
} 
.one { 
    background: url(image1.png) 110px 0 no-repeat; 
    background-size: 40px 40px; 
} 
.two { 
    background: url(image2.png) 250px 150px no-repeat; 
    background-size: 60px 60px; 
} 
.three { 
    background: url(image3.png) 410px 310px no-repeat; 
    background-size: 80px 80px; 
} 

---

$(function() { 

    $('button').click(function() { 

    var el = $('.'+$(this).data('rel')); 

    if(el.css('opacity') === '1') { 
     el.stop().animate({ opacity: '0.3' }, 300, 'linear'); 
    } 
    else { 
     el.stop().animate({ opacity: '1' }, 300, 'linear'); 
    } 

    }); 

    $('.on').click(function() { 
    $('.layer').stop().animate({ opacity: '1' }, 300, 'linear');  
    }); 

    $('.off').click(function() { 
    $('.layer').stop().animate({ opacity: '0.3' }, 300, 'linear');  
    }); 

});