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默认的动画效果，不然它会导致我们自定义的动画效果无效~

最终得到圆形扩散的效果

完整代码