html click diffusion circular display interface effects

Prologue
effect
Used in the core code
Think
explore
Source
Compatibility Issues

Prologue

Often see some special effects click on the app proliferation, as proliferation of some display interface, change the subject somewhat diffuse color, it would like to achieve on the page, so there is this.

effect

Not want to hear forced forced to go directly to the source

Used in the core code

css styles

overflow:hidden;/*隐藏超出部分*/
position:fixed;/*用于悬浮*/

jquery animation

$("#id").animate()

Think

Create a div and a circular button:

 <div id="side_circle"></div>
  <button type="button" id="spread" >点我扩散</button>

#side_circle{
position:fixed;   
overflow:hidden;
width:0;height: 0;   
background-color:#0f0;   
border-radius:50%; }

Then try to align for amplifying animate animation effect is click on the button, the circle gradually enlarge

$(document).ready(function() {
     $("#spread").click(function() {
         $("#side_circle").animate({
          height:"1000px",
          width:"1000px",
            }, 1500, function() {/*结束后要做的事*/ });
     });
 })

Complete the look effect

We can see that he is gradually expanded, but he has also undergone a shift, what we want is to click on the position of the button is always the center! It would need to use margin-top:;margin-left:;because there is a need to have a circle interface, so the circle expanded also covered the screen.

Probably do:

[] To maintain the center position coincides with the position of the button
[] Cylindrical screen must be covered
[] Holding position of the interface within the circle

explore

As shown (not drawn), we need to know

$(this).offset().top;//按钮与上的距离
$(this).offset().left;//按钮与左的距离
var cir_radius = $("#side_circle").css("width")//圆宽度
var cir_top = $("#side_circle").css("marginTop")//圆与顶部的距离
var cir_left = $("#side_circle").css("marginLeft")//圆与左边的距离
var max_radius = Math.sqrt(window.screen.width * window.screen.width + window.screen.height * window.screen.height);//斜边大小

//圆需要放大且移动到屏幕外的这个位置
marginLeft:-(max_radius - (cir_left + cir_radius)) + "px",
marginTop:-(max_radius - (cir_top + cir_radius)) + "px",
//圆半径至少要大于斜边 所以宽度=斜边x2
height:max_radius * 2 + "px",
width:max_radius * 2 + "px",

Managers have a clear logic. See results

And imagine the same! The next step is to add div contents of the inner circle, there is a make me feel a little strange, but it is the use of this realization, round sub div same set position:fixed;(first, do not hit me), you heard wrong, strange It is that even though the child div is set fixed parent div will also be overflow:hidden;affected by hidden [but elements of the same size (you can not click, but it is and is intended to expand the display interface, preventing the delays)]
, also in accordance with the contraction of the way like painted gourd enough.

Source

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>这里填写标题</title>
    <meta name="keywords" content="这里填写关键词" />
    <meta name="description" content="这里填写说明内容" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

  </head>
  <body>
<!--div style="position:fixed;overflow:hidden;width:100%;height:100%"-->
    <div id="side_circle">
      <div id="screen_div">
      橙色在边框部分为screen_div
        <div>
         我是screen_div内的元素1
        </div>
        <div >
        我是screen_div内的元素2
        </div>
         <button type="button" id="shrink" >点我收缩</button>
      </div>
    </div>
    <button type="button" id="spread" >点我扩散</button>
<!--/div-->
  </body>
<style type="text/css">
*{margin:0;padding:0;}
#side_circle{
   display:none;/*隐藏*/
   position:fixed;
   z-index:9;
   overflow:hidden;/*即使子元素设置了position:fixed;但父元素overflow:hidden仍然可以限制它*/
   /*margin-top:50%;margin-left:30%;/*外圆的位置随意更改*/
   width:0;height:0;
   background-color:#0f0;
   border-radius:50%;
   /*border:3px solid #f00;*/
}
#screen_div{
   display:none;/*隐藏*/
   z-index:8;
   position:fixed;left:0;top:0;
   margin-left:0px;margin-top:0px;
   width:100%;height:100%;
   background-color:#aaa;
   border:8px solid #f90;
   text-align:center;box-sizing: border-box;
}
/*以下是screen_div下元素的样式可忽略*/
#screen_div div{
width:100px;height:200px;background-color:#00f;

}

#screen_div div:first-child{
   width:80%;height:60px;background-color:#f00;
   position:absolute;right:0;top:100px;
}

</style>
  <script>
  /*以斜边为最大半径*/
var max_radius = Math.sqrt(window.screen.width * window.screen.width + window.screen.height * window.screen.height);
$(document).ready(function() {
     $("#spread").click(function() {
     //按钮距离屏幕最上方和最左边的距离
        var button_top =  $(this).offset().top;
        var button_left =  $(this).offset().left;
       //将圆的位置移动到按钮的位置
        $("#side_circle").css({"marginTop":button_top+"px",
                              "marginLeft":button_left+"px"});
       //显示隐藏的外圆和全屏div
          $("#side_circle").css("display","block");
          $("#screen_div").css("display","block");

        var cir_radius = $("#side_circle").css("width").replace("px", "");
        var cir_top = $("#side_circle").css("marginTop").replace("px", "");
        var cir_left = $("#side_circle").css("marginLeft").replace("px", "");
        $("#side_circle").animate({
          marginLeft:-(max_radius - (cir_left + cir_radius)) + "px",
          marginTop:-(max_radius - (cir_top + cir_radius)) + "px",
          height:max_radius * 2 + "px",
          width:max_radius * 2 + "px",
            }, 1500, function() {/*结束后要做的事*/ });
     });//click
});

$(document).ready(function() {
     $("#shrink").click(function() {
     //扩散完毕后隐藏的外圆显示
    // $("#side_circle").css("display", "block");
        var button_top =  $(this).offset().top;
        var button_left =  $(this).offset().left;
        $("#side_circle").animate({
          marginLeft:button_left + "px",
          marginTop:button_top + "px",
          height:1+ "px",//不设置为0 ，0的话结束之后screen_div会显示，此时再none的话会出现闪烁！
          width:1+ "px",
            }, 1500, function() {/*结束后要做的事*/ $("#side_circle").css("display", "none"); $("#screen_div").css("display", "none");});
     });//click
});

  </script>
</html>

Compatibility Issues

Function to achieve, but raises two issues unresolved [worry],
1. parent and child div div and set fixed, and the parent div to set overflow: hidden; results, Google browser does not support, ie QQ browser can be tried and so, in addition to Google browser does not support, it will directly display the sub div out of control.
2. The first time click expansion button, screen_div will flicker at first thought it was a display of problems or questions width height of the parent, but the attempt failed.