html點擊圓形擴散顯示界面特效

時間 2020-01-29

標籤 html 點擊圓形擴散顯示界面特效欄目 HTML 简体版

原文原文鏈接

html點擊圓形擴散顯示界面特效

開場白

常常看到某些app有點擊擴散的特效，有些當作擴散顯示界面，有些擴散改變主題顏色，想在網頁上實現一下，因此就有了這個。css

效果

不想聽逼逼的直接去源碼 html

用到的核心代碼

css的樣式jquery

overflow:hidden;/*隱藏超出部分*/
position:fixed;/*用於懸浮*/

jquery的動畫chrome

$("#id").animate()

思考

先建立一個圓形div和一個按鈕:瀏覽器

<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%; }

而後試着對齊進行animate放大動畫，效果是點擊按鈕，圓圈逐漸放大app

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

完成看下效果
ide

能夠看到他是逐漸擴大了，可是他也發生了位移，咱們想要的效果是，點擊的按鈕的位置始終保持是圓心！那就須要用到margin-top:;margin-left:;由於圓裏面是須要有界面的，因此擴大後的圓還要鋪滿屏幕。動畫

要作的大概是:

[ ] 保持圓心位置與按鈕位置一致
[ ] 外圓必須鋪滿屏幕
[ ] 圓內的界面保持位置

探索

如圖(畫的很差),咱們須要得知ui

$(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",

邏輯已經理清楚了。看看效果
this

和想象中的同樣！接下來就是往圓內添加div內容了，這裏有個讓我以爲有些奇怪，可是又是利用了這點實現的，圓的子div一樣設置爲position:fixed;（先別打我），你沒聽錯，奇怪之處在於即便子div設置了fixed也會受到父divoverflow:hidden;的影響而隱藏[可是元素大小不變（你沒法點擊，不過這正和擴展顯示界面的意，防止誤點了）]
，收縮的方式也依樣畫葫蘆就行了。

源碼

<!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>

兼容性問題

功能實現了，但是引起了兩個未能解決的問題[愁]，
1.父級div與子級div同時設置fixed,且父級div設置overflow:hidden;的效果，谷歌瀏覽器不支持，ie QQ瀏覽器等都試過了均可以，除了谷歌瀏覽器不支持，會直接顯示子div不受控制。
2.第一次點擊擴展按鈕時，screen_div會閃爍一下，起初覺得是display的問題或者父級的width height的問題，可是嘗試失敗。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。