function DocuemntHtmlPageXY (elem) {
 var rect=elem.getBoundingClientRect();
 var scrollTop=window.scrollTop || (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop || 0;
 var scrollLeft=window.scrollLeft || (document.documentElement && document.documentElement.scrollLeft) || document.body.scrollLeft || 0;
 var html=document.documentElement || document.getElementsByTagName_r('html')[0];
 //修復ie6 7 下的瀏覽器邊框也被算在 boundingClientRect 內的 bug
 var deviation=html.getBoundingClientRect();
 //修復 ie8 返回 -2 的 bug
 deviation={ //FF 不允許修改返回的對象
 left: deviation.left < 0 ? 0 : deviation.left,
 top: deviation.top < 0 ? 0 : deviation.top
 };
 return {
 left: rect.left + scrollLeft - deviation.left,
 top: rect.top + scrollTop - deviation.top
 };
 }

于基于Python+PyQt的框架結構的程序開發，前面已經講了很多小例子了，有興趣的小伙伴們可以翻看下前面的文章。

總體來說，實現相同的功能，相比于其它如C/C++等編程語言，確實簡單太多了。

下面，再給出一個小例子，使用PyQt5界面庫，在Python3上來實現一個簡單的顏色拾取器的小工具，下面看看具體的實現過程吧。

1、實例說明

本例運行界面如下圖所示，實現的功能是，實時捕捉當前鼠標所在位置的顏色并進行顯示，顯示結果包括顏色指示、顏色的RGB值、顏色的CSS值及當前鼠標的坐標值等信息。

2、實現思路

可考慮在定時器超時事件中每隔一段時間（如20ms）取一次當前鼠標所在的位置的顏色信息，對該顏色值進行解析并分別顯示其RGB值和CSS樣式的值。

在PyQt中進行編程實現時，需要考慮以下兩個問題：

• 如何取當前鼠標的位置信息？
• 如何獲取當前位置的顏色值并將其分解為RGB值和CSS值？

對于第一個問題，可使用PyQt類中的QCusor類的pos()函數實時獲取當前的鼠標位置信息。

對于第二個問題，可使用QScreen類的grabWindow()函數，將當前鼠標所在區域存儲為QPixmap類型的畫布里面，然后再使用toImage()函數將其轉化為圖像，有了圖像信息后，就可獲取該圖像上任意像素點的顏色信息（QColor類型）了。最后使用QColor類的red()、green()、blue()函數分別獲取其RGB值即可。對于顏色的CSS值顯示，直接將RGB值轉換為16進制顯示即可。

3、核心代碼實現

在定時器超時槽函數里面實現該軟件的具體功能，其代碼（不足20行）如下圖所示：

代碼簡要解釋如下：

（1）第48-50行，使用QCusor類的pos()函數獲取當前的鼠標位置信息x、y并顯示。

（2）第52-56行，使用QScreen類的grabWindow()函數，將當前鼠標所在區域存儲到QPixmap類型的pixmap變量里面，使用toImage()函數將其轉化為圖像，然后使用pixel()函數獲取該圖像上（0,0）像素點的顏色信息，最后使用QColor類的red()、green()、blue()函數分別獲取其RGB顏色的分量值。

（3）第58-60行，將RGB顏色進行顯示，并在label控件上使用樣式表設置其背景色進行實時指示當前鼠標所在位置的顏色信息。

（4）第62-64行，將R、G、B顏色值轉換為16進制，顯示其CSS值信息。

4、完整代碼實現

整個工程除了上面的核心代碼實現外，還包括界面的布局、定時器創建、槽函數關聯等內容，程序的完整實現代碼如下圖所示：

程序主窗口基類為QWidget類，代碼簡要解釋如下：

（1）第9-14行，類初始化函數，調用initUI函數并創建定時器、設置槽函數關聯及啟動定時器等。

（2）第16-40行，具體的界面設計函數，包括控件的創建/布局、窗口的居中設置、標題、圖標設置等。

（3）第61-65行，創建窗口并顯示。

5、總結

總體來說，這個例子界面比較簡單，代碼量比較少，也比較好理解，運行上面的程序后，即可出現前面的軟件界面，當移動鼠標時，可在界面上實時顯示當前鼠標位置的顏色信息。

本文實現顏色拾取器的小工具，僅僅用了不到70行的代碼，試想一下，如果你用純粹的C++語言來實現相同的功能，將需要多少代碼量呢？所以，如果你做軟件界面開發的話，Python+PyQt的框架結構真的是一個不錯的選擇。

本文由編碼那些事原創，請關注+轉發+收藏+點贊，帶你一起長知識！

近看到 ElementPlus 官網上的切換主題方式非常有趣，這是一個過渡的動畫效果

所以在網上查了一番，找到基本的實現方法

實現

基本效果

首先我們起一個 html 文件，寫一個按鈕，以及簡單的背景顏色切換，來模擬主題的切換

可以看到實現了最簡單的主題切換效果

document.startViewTransition

想要實現過渡效果，需要先用到一個 JavaScript 的原生方法：document.startViewTransition

這個方法是用來做動畫過渡效果的

通過調用 API，讓瀏覽器為新舊兩種不同視圖分別捕獲并建立了快照 (即 ::view-transition-old(root)舊快照 和 ::view-transition-new(root) 新快照)，而后新舊兩快照在 ::view-transition-image-pair(root) 容器中完成轉場動畫的過渡。動畫結束后則刪除其相關偽元素 (快照和容器)

過渡動畫效果

我們可以應用一下這個 API

現在去切換主題顏色，發現有過渡效果了~

圓形擴散過渡動畫

接下來實現圓形過渡的效果，其實這個動畫最終是展示::view-transition-new(root)這個偽元素，所以我們只需要讓這個偽元素有原型擴散的過渡動畫即可~

那圓形擴散動畫咋做呢？其實很簡單，只需要將偽元素的半徑，從0 -> 100%即可

代碼如下

并且我們需要取消掉 document.startViewTransition默認的動畫效果，不然它會導致我們自定義的動畫效果無效~

最終得到圓形擴散的效果

完整代碼