创建一个页面的图层打开/关闭

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');  
    }); 

});