javascript – 响应圈图像？

2019年8月5日 149次阅读

我正在尝试制作一个响应式网页.

我使用这个
question和
answer,为这个项目形成了我的图标圈.

但是我想让它更具响应性,因为我需要在里面包装一些jQuery toggle().

<div class="jumbotron">
    <div class="circle-container">
        <div class="row">

            <span data-scrollreveal="enter top, wait 1.0s">
              <a href="#" class="center hvr-grow"><img src="img/specialoffers.jpg" class="img-circle" alt="">
              </a>
            </span>

            <span data-scrollreveal="enter right, wait 1.2s">
              <a href="#" class="deg0"><img src="img/circle/special.png" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter right, wait 1.4s">
              <a href="#" class="deg45"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter right, wait 1.6s">
              <a href="#" class="deg135"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter left, wait 1.8s">
              <a href="#" class="deg180"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
            </span>

            <span data-scrollreveal="enter left, wait 2.0s">
              <a href="#" class="deg225"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>   
 /* Position icons into sircle */
.circle-container {
    position: relative;
    width: 35em;
    height: 35em;
    padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    border: none;
    border-radius: 50%;
    margin: 1.75em auto 0;
}

.circle-container a {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%; left: 50%;
    width: 6em; height: 6em;
    margin: -2em; /* 2em = 4em/2 */ /* half the width */
}

.circle-container img {
    display: block; width: 100%;
}

.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }

.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }
                  </span>

                  <span data-scrollreveal="enter left, wait 2.2s">
                    <a href="#" class="deg315"><img src="img/specialoffers.jpg" class="img-circle" alt=""></a>
                  </span>


              </div>
          </div><!--end circle-container-->
      </div>

这个div的CSS：

/* Position icons into sircle */
.circle-container {
    position: relative;
    width: 35em;
    height: 35em;
    padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
    border: none;
    border-radius: 50%;
    margin: 1.75em auto 0;
}

.circle-container a {
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%; left: 50%;
    width: 6em; height: 6em;
    margin: -2em; /* 2em = 4em/2 */ /* half the width */
}

.circle-container img {
    display: block; width: 100%;
}

.deg0 { transform: translate(18em); } /* 12em= half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(18em) rotate(-45deg); }
.deg135 { transform: rotate(135deg) translate(18em) rotate(-135deg); }
.deg180 { transform: translate(-18em); }
.deg225 { transform: rotate(225deg) translate(18em) rotate(-225deg); }
.deg315 { transform: rotate(315deg) translate(18em) rotate(-315deg); }

.circle-container a.deg45:hover, a.deg45:activate { img-size: 150%; }

我想将我的图像包裹在div中并将它们定位成圆圈,这样它们就会变得敏感.

那可能吗？

请帮忙.
保护你.

我正在为这个项目使用bootstrap和html5boilerplate.

我需要将它设置为responsive.,在较小的视口上它看起来像这样

最佳答案你可以查看我为你创建的JsFiddle
https://jsfiddle.net/1et5s06h/来检查尝试调整预览窗格的大小.

仅供参考我的答案取决于bootstrap的Grid system和Responsive utilities.您可能希望阅读它们以更好地了解网格系统和响应式实用程序类,并自定义我的答案以更好地满足您的需求.

请参阅以下代码(使用您的css)：

 <div class="jumbotron">
            <div class="circle-container hidden-xs hidden-sm">
                <div class="row">
                    <span data-scrollreveal="enter top, wait 1.0s">
                        <a href="#" class="center hvr-grow">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" alt="">
                        </a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.2s">
                        <a href="#" class="deg0">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.4s">
                        <a href="#" class="deg45">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter right, wait 1.6s">
                        <a href="#" class="deg135">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter left, wait 1.8s">
                        <a href="#" class="deg180">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter left, wait 2.0s">
                        <a href="#" class="deg225">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                    <span data-scrollreveal="enter left, wait 2.2s">
                        <a href="#" class="deg315">
                            <img src="http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg" class="img-circle" alt=""></a>
                    </span>

                </div>
            </div>
            <!--end circle-container-->
            <div class='container hidden-lg hidden-md '>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2003-28-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1994-02-c-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2005-37-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2010-26-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">Strange book here :)</div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-27-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-1992-17-a-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                    <div class="col-sm-4 col-xs-4">
                        <a href='#'>
                            <img src='http://imgsrc.hubblesite.org/hu/db/images/hs-2004-32-d-thumb.jpg' class="img-circle" alt=""></a>
                    </div>
                </div>
            </div>
        </div>

更新：我做了一点改进here,即仅在超小设备(xs)中显示网格界面,并通过添加以下css将图像集中在其容器中：

div.container.hidden-lg.hidden-md.hidden-sm div.row div.col-sm-4.col-xs-4 a img.img-circle 
    {
         display:block;margin:10px auto;
    }

而且我认为我最好更清楚地说明我的答案背后的想法：我基本上创建了两个你的内容实例并使用responsive utility classes我使你的图像圈可见：

>大型设备(大型台式机,1200px及以上)(lg)
>中型设备(台式机,992px及以上)(md)
>小型设备(平板电脑,768px及以上)(sm)

并隐藏圆圈放置并使网格放置在以下位置可见：

>超小型设备(手机,小于768px)(xs)

当然,为了再次强调,我的更新说明解释了here中更改的代码.