Question

您好，我想知道是否可以这样当您点击一个圆圈时，它会扩展以填充它所在的部分/ div？

我希望如此，当您点击它填满屏幕的圆圈时，会出现一些文字。

在我发布此内容之前，我再次在网上查看了jsfiddle

<div class="container">

    <div class="ObjectContainer">
        <div id="red" class="Object"></div>
        <a href="#" >A link </a>
    </div>

    <div class="ObjectContainer">
        <div id="brown" class="Object"></div>
        <a href="#" >A link </a>
    </div>

    <div class="ObjectContainer">
        <div id="dGrey" class="Object"></div>
        <a href="#" >A link </a>
    </div>

    <div class="ObjectContainer">
        <div id="Grey" class="Object"></div>
        <a href="#" >A link </a>
    </div>

</div>

body {
            text-align:center;
            font-family:helvetica;
            font-size: 16px;
            background: #f0f0f0;
            padding-top: 50px;
        }
            a {
                color: #f0f0f0;
                text-decoration: none;
            }
        .container {
            display: inline-block;
            margin: 0 auto;
            width: 400px;
        }
        /* ANIMATIONS */
        .Object, .ObjectContainer a {
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition: all 0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
        }
        .ObjectContainer {
            width: 200px;
            height: 200px;
            float: left;
            display: block;
            position: relative;
            overflow:hidden;
        }
            .ObjectContainer .Object {
                display: block;
                width: 100%;
                height: 100%;
            }
            .ObjectContainer a {
                position: absolute;
                bottom: -200px;
                left: 0;
                opacity: 0;
                width: 100%;
                line-height: 0px;
                text-align: center;
                vertical-align: middle;
            }

        .ObjectContainer:hover .Object {
            margin: 2.5%;
            height: 95%;
            width: 95%;
            border-radius: 100px;
            /* -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -ms-transform: rotate(100deg);
            -o-transform: rotate(100deg);
            transform: rotate(100deg); */
        }
            .ObjectContainer:hover a {
                opacity: 1;
                bottom: 0;
                line-height: 200px;
            }
        #red.Object {
            background: #e7222f;
        }
        #brown.Object {
            background: #796959;
        }
        #dGrey.Object {
            background: #363635;
        }
        #Grey.Object {
            background: #6f6f6e;
        }

这是我正在寻找的，但相反的方式。

修改

我现在越来越少地弄清楚你给我的东西了。这是jsfiddle

的链接

我所做的就是查看代码。我一开始并没有想到这一点。我仍然需要处理文本布局（需要更多的间隔），并可能尝试使用单击基础事件。

   #red.Object {
    background: #e7222f;
    margin: 2.5%;
    height: 95%;
    width: 95%;
    border-radius: 100px;
}
  #red.Object:hover {
    background: #e7222f;
         margin: 2.5%;
    height: 95%;
    width: 95%;
    border-radius:0;
}

Answer 1

$(function(){

$('#circle').click(function(){
  var pw = $('#wrapper').width();
  var ph = $('#wrapper').height();
  $(this).animate({
    width: pw,
    height: ph,
    borderRadius: 0
  },500)
});

});

#wrapper{

width: 300px;
height: 300px;  
background: lightgrey;
}

#circle{
position: absolute;
width: 45px;  
height: 45px;
background: green;  
border-radius: 50%;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  
  <div id="circle"></div>
  
  
</div>

Answer 2

我更改了前两个圈子，这是您想要的起始结果吗？

body {
        text-align:center;
        font-family:helvetica;
        font-size: 16px;
        background: #f0f0f0;
        padding-top: 50px;
    }
        a {
            color: #f0f0f0;
            text-decoration: none;
        }
    .container {
        display: inline-block;
        margin: 0 auto;
        width: 400px;
    }
    /* ANIMATIONS */
    .Object, .ObjectContainer a {
        -webkit-transition: all 0.25s ease-in-out;
        -moz-transition: all 0.25s ease-in-out;
        -ms-transition: all 0.25s ease-in-out;
        -o-transition: all 0.25s ease-in-out;
        transition: all 0.25s ease-in-out;
    }
    .ObjectContainer {
        width: 200px;
        height: 200px;
        float: left;
        display: block;
        position: relative;
        overflow:hidden;
    }
        .ObjectContainer .Object {
            display: block;
            width: 100%;
            height: 100%;
        }
        .ObjectContainer a {
            position: absolute;
            bottom: -200px;
            left: 0;
            opacity: 0;
            width: 100%;
            line-height: 0px;
            text-align: center;
            vertical-align: middle;
        }

    .ObjectContainer:hover .Object {
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
        /* -webkit-transform: rotate(100deg);
        -moz-transform: rotate(100deg);
        -ms-transform: rotate(100deg);
        -o-transform: rotate(100deg);
        transform: rotate(100deg); */
    }
        .ObjectContainer:hover a {
            opacity: 1;
            bottom: 0;
            line-height: 200px;
        }
    #red.Object {
        background: #e7222f;
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
    }
    #brown.Object {
        background: #796959;
        margin: 2.5%;
        height: 95%;
        width: 95%;
        border-radius: 100px;
    }
    #dGrey.Object {
        background: #363635;
    }
    #Grey.Object {
        background: #6f6f6e;
    }

Answer 3

一些快速入侵你的小提琴（表示！）

以下片段

function clicker(e){
 //console.log(e.target.tagName);
  var width=window.getComputedStyle(e.target,null)||e.target.currentStyle;
  if(e.target.tagName=='DIV'){
   if(width.borderBottomLeftRadius!='0px'){
  e.target.style='width:100%;height:100%;border-radius:0px;'; 
  e.target.children[0].style='opacity: 1;bottom: 100px;line-height: -20px;';
}
  else{
     e.target.style='width:95%;height:95%;border-radius:100px';
       e.target.children[0].style='opacity: 1;bottom: 0px;line-height: 0px;';
  }
  } //endif
 
}
function add(x){
  document.getElementsByClassName('ObjectContainer')[x].addEventListener('click',clicker,true)
}
for(i=0;i<document.getElementsByClassName('ObjectContainer').length;++i){
  add(i);
}

/* setup the very basis for the document */
    body {
            text-align:center;
            font-family:helvetica;
            font-size: 16px;
            background: #f0f0f0;
            padding-top: 50px;
    }
            a {
                    color: #f0f0f0;
                    text-decoration: none;
            }
    .container {
            display: inline-block;
            margin: 0 auto;
            width: 400px;
    }
    /* ANIMATIONS */
    .Object, .ObjectContainer a, .test {
            -webkit-transition: all 0.25s ease-in-out;
            -moz-transition:  0.25s ease-in-out;
            -ms-transition: all 0.25s ease-in-out;
            -o-transition: all 0.25s ease-in-out;
            transition: all 0.25s ease-in-out;
    }
    .ObjectContainer {
            width: 200px;
            height: 200px;
            float: left;
            display: block;
            position: relative;
overflow:hidden;
    }
    
            .ObjectContainer a {
                    position: absolute;
                    bottom: -200px;
                    left: 0;
                    width: 100%;
                    line-height: 0px;
                    text-align: center;
                    vertical-align: middle;
            }

    .ObjectContainer .Object  {
      
            margin: 2.5%;
            height: 95%;
            width: 95%;
            border-radius: 100px;
            /* -webkit-transform: rotate(100deg);
            -moz-transform: rotate(100deg);
            -ms-transform: rotate(100deg);
            -o-transform: rotate(100deg);
            transform: rotate(100deg); */
    }

    #red.Object {
            background: #e7222f;
    }
    #brown.Object {
            background: #796959;
    }
    #dGrey.Object {
            background: #363635;
    }
    #Grey.Object {
            background: #6f6f6e;
    }

<div class="container">

    <div class="ObjectContainer">
            <div id="red" class="Object"> <a href="#" >A link </a></div>
           
    </div>
    
    <div class="ObjectContainer">
            <div id="brown" class="Object"> <a href="#" >A link </a></div>
           
    </div>

    <div class="ObjectContainer">
            <div id="dGrey" class="Object"> <a href="#" >A link </a></div>
           
    </div>

    <div class="ObjectContainer">
            <div id="Grey" class="Object"> <a href="#" >A link </a></div>
           
    </div>
</div>

单击一个圆圈，使其成为section / div的大小

3 个答案: