Question

我目前正在使用HTML + CSS，我遇到了扩展圆圈以填满屏幕的问题。我知道结构是奇怪的但我需要圆圈在特定的位置（它在技术上是徽标的一部分）。

这基本上是我想要的： http://jsfiddle.net/frapporti/85qfu/ Code

但这是我目前所拥有的： https://jsfiddle.net/IaZoro/ou9vwovr/ Code

目标是让这个红点填满屏幕，创建一个CSS幻灯片叠加，然后右上角的“x”将“关闭”（或隐藏）所有内容。

如果可能的话我想继续只使用CSS来创建这个效果，但如果需要我可以使用Javascript / Jquery 非常感谢任何帮助，谢谢！

编辑：我弄清楚为什么我的javascript工作不正常，我使用的是jQuery，而上面提到的演示使用的是Zepto.js。

仍有问题，但我想提到这一点。

Answer 1

希望我能正确理解你。我试图尽可能清楚地说明这一点。我就是这样做的：

<强> 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 ......

如何扩展此圈以填充屏幕的过渡？

1 个答案: