如何扩大这个圈子来填充转换屏幕？

我目前正在使用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 –

如何扩大这个圈子来填充转换屏幕？

回答

相关问题