如何擴大這個圈子來填充轉換屏幕？

我目前正在使用HTML + CSS，並且遇到了擴展圓圈以填充屏幕的問題。我知道這個結構很奇怪，但我需要這個圈子在特定的位置（它在技術上是標誌的一部分）。如何擴大這個圈子來填充轉換屏幕？

這基本上是我想什麼： http://jsfiddle.net/frapporti/85qfu/Code

，但是這是我目前： https://jsfiddle.net/IaZoro/ou9vwovr/Code

的目標是有這個紅點佔滿整個屏幕，創建CSS幻燈片過高，然後右上角的「x」將「關閉」（或隱藏）所有內容。

如果在所有可能的情況下，我想繼續使用CSS來創建這種效果，但如果需要，我可以使用Javascript/jquery 任何幫助非常感謝，謝謝！

編輯：我想出了爲什麼我的JavaScript不能正常工作，我使用jQuery，而上面提到的演示使用Zepto.js。

仍然有問題，但想通了我會提到這一點。

來源

2017-02-15 Eddie Maiale

希望我正確理解喲。我試圖儘可能清楚地說明這一點。這是我會怎麼做：

HTML：

<body> 
    <div id="main-wrapper"> 
     <div id="inner-wrapper"> 
      <div id="close-box"></div> 
      <div id="slideshow-wrapper"> 
       <img class="shown" src="http://i.imgur.com/XeBydh2.png" />   
       <img src="http://i.imgur.com/xy1Aqbn.jpg" />  
       <img src="http://i.imgur.com/i7elQhu.jpg" /> 
      </div> 
     </div> 
    </div> 
</body>

CSS：

* { 
    box-sizing: border-box; 
    padding: 0; 
    margin: 0; 
} 

img { 
    max-width: 100%; 
} 

/* you can position the main-wrapper on top of your logo to get the required outcome */ 
#main-wrapper { 
    background: red; 
    border-radius: 50%; 
    overflow: hidden; 
    height: 100px; 
    width: 100px; 
    transition: all .5s; 
    position: absolute; 
    top: 50%; 
    left: 50%; 
} 

#inner-wrapper { 
    margin: 30px; 
    border: 1px solid; 
    position: relative; 
    display: none; 
} 

#close-box { 
    background-color: black; 
    border: 2px solid white; 
    position: absolute; 
    top: -10px; 
    right: -10px; 
    height: 30px; 
    width: 30px; 
} 

#slideshow-wrapper img { 
    display: none; 
} 

#slideshow-wrapper img.shown { 
    display: block; 
    /* you can add cool animations/transitions here for when the image is shown */ 
} 

#main-wrapper.shown { 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background-color: blue; 
    border-radius: 0; 
} 

#main-wrapper.shown #inner-wrapper { 
    display: block; 
}

的JavaScript：

$(function() { 
    $('#main-wrapper').click(function() { 
     $(this).toggleClass('shown'); // toggle hiding and showing 
    }); 
    // making the close-box work as expected 
    $('#close-box').click(function(){ 
     $('#main-wrapper').removeClass('shown'); 
    }); 
    // we don't want to close unnecessarily 
    $('#inner-wrapper').click(function(e){ 
     e.stopPropagation(); // 
    }); 
    $('#slideshow-wrapper').click(function(){ 
     /* 
     * Note: You might have noticed I use the shown class to hide and show items. 
     * This gives me the ability to add other cool features like adding other cool CSS animations for your transitions 
     */ 
     var current = $(this).children('.shown'); 
     current.removeClass('shown'); // hide current slide 

     var next = current.next(); 
     if(next.length < 1) // if current was last, set next to be first child 
      next = $(this).children().eq(0); 
     next.addClass('shown'); // show next slide 
    }); 
});

請不要忘記加載jQuery ...

來源

2017-02-16 00:59:28

對不起，對於遲到的評論，但我終於得到它的工作，非常感謝你的時間和幫助。 PS：我喜歡那些額外的img's/gif's –

如何擴大這個圈子來填充轉換屏幕？

回答

相關問題