- 開場白
- 效果
- 用到的核心代碼
- 思考
- 探索
- 原始碼
- 兼容性問題
開場白
經常看到某些app有點擊擴散的特效，有些當做擴散顯示界面，有些擴散改變主題顏色，想在網頁上實作一下，所以就有了這個，
效果
不想聽逼逼的直接去原始碼
用到的核心代碼
css的樣式
overflow:hidden;/*隱藏超出部分*/
position:fixed;/*用于懸浮*/
jquery的影片
$("#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放大影片，效果是點擊按鈕，圓圈逐漸放大
$(document).ready(function() {
$("#spread").click(function() {
$("#side_circle").animate({
height:"1000px",
width:"1000px",
}, 1500, function() {/*結束后要做的事*/ });
});
})
完成看下效果
可以看到他是逐漸擴大了，但是他也發生了位移，我們想要的效果是，點擊的按鈕的位置始終保持是圓心！那就需要用到margin-top:;margin-left:;因為圓里面是需要有界面的，所以擴大后的圓還要鋪滿螢屏，
要做的大概是:
- [ ] 保持圓心位置與按鈕位置一致
- [ ] 外圓必須鋪滿螢屏
- [ ] 圓內的界面保持位置
探索
如圖(畫的不好),我們需要得知
$(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",
邏輯已經理清楚了，看看效果
和想象中的一樣！接下來就是往圓內添加div內容了，這里有個讓我覺得有些奇怪，但是又是利用了這點實作的，圓的子div同樣設定為
position:fixed;
（先別打我），你沒聽錯，奇怪之處在于即使子div設定了fixed也會受到父div
overflow: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://www.cnblogs.com/createwell/p/"https://code.jquery.com/jquery-3.4.1.min.js"></script>
<body>
橙色在邊框部分為screen_div
我是screen_div內的元素1
我是screen_div內的元素2