不想聽逼逼的直接去原始碼
css的樣式
overflow:hidden;/*隱藏超出部分*/
position:fixed;/*用於懸浮*/
$("#id").animate()點我擴散
#side_circle$(document).ready(function() , 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;overflow:hidden;，收縮的方式也依樣畫葫蘆就好了。
橙色在邊框部分為screen_div
我是screen_div內的元素1
我是screen_div內的元素2
點我收縮
點我擴散
1.父級div與子級div同時設定fixed,且父級div設定overflow:hidden;的效果，谷歌瀏覽器不支援，ie qq瀏覽器等都試過了都可以，除了谷歌瀏覽器不支援，會直接顯示子div不受控制。
2.第一次點選擴充套件按鈕時，screen_div會閃爍一下，起初以為是display的問題或者父級的width height的問題，但是嘗試失敗。
監控滑鼠的位置點選實現圓形擴散動畫
首先看效果圖如下 一 要實現如下的效果我們先分析都要什麼？1 首先我們要先實現這個動畫擴散效果。2 然後當滑鼠點選該標籤時，你需要在他的下面新增乙個標籤並把這個動畫給這個新增標籤。3 其次我們要監控滑鼠的位置。4 在其次找到被點選的標籤的位置與滑鼠點選位置相減就是這個做動畫的標籤的初始位置。5 讓這...
canvas動畫 圓形擴散 運動軌跡
在echarts中看到過這種圓形擴散效果，類似css3，剛好專案中想把它用上，but我又不想引入整個echart.js檔案，更重要的是想弄明白它的原理，所以自己動手。在這篇文章中我們就來分析實現這種效果的兩種方法，先上效果圖 通過不斷的改變圓的半徑大小，不斷重疊達到運動的效果，在運動的過程中，設定當...
Android實現控制項點選波紋擴散效果
public class mybutton extends private static final string tag mybutton public static final int invalidate duration 15 每次擴散半徑 public static int difuse ...