【WEB】百度糯米学院学习笔记

最新推荐文章于 2020-10-04 22:07:39 发布

WHUZXQ

最新推荐文章于 2020-10-04 22:07:39 发布

阅读量620

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/WHUZXQ/article/details/77937737

版权

这篇博客主要探讨了CSS3实现的鼠标悬浮模糊效果、动态数据绑定的原理及其实现，包括如何监听对象属性变化，以及如何处理深层次对象结构。此外，还介绍了自定义checkbox和radio样式、网络右键菜单的实现、正则表达式的基本用法，以及CSS3饼状loading动画的创建技巧。

摘要由CSDN通过智能技术生成

一.鼠标悬浮模糊效果(css3实现)

这里写图片描述
1.图片模糊

-webkit-filter:blur(2px);

2.字体流光渐变效果
（1）绘制渐变背景图

background-image: -webkit-linear-gradient(left, blue, red 25%, blue 50%, red 75%, blue 100%);

使用CSS3的渐变绘制图像，从左到右。
需要注意的是颜色是 0到49%的颜色组 = 50%到99%的颜色组，且最后100%的颜色要和开头0的颜色相等。这是为了能无缝衔接流光效果。

（2）裁剪背景图

-webkit-background-clip: text;

使用文字作为裁剪区域向外裁剪，此时文字颜色仍覆盖背景图

（3）设置字体颜色

-webkit-text-fill-color: transparent; or color: transparent;

将字体颜色设置成透明，这样就能将背景图显示出来了

（4）设置背景图长度

background-size: 200% 100%;

将背景图宽度拉长至两倍，之前设置background-image的两份相同的颜色组，就是为了能在此拉长后只显示一份颜色组，另外超出的半截颜色组用来实现流光效果

（5）开始动画

animation: streamer 5s infinite linear;

@keyframes streamer {
    0%  {
        background-position: 0 0;
    }
    100% {
        background-position: -100% 0;
    }
}

二.动态数据绑定（一）

给定一个对象，如何监听属性的读取与变化？
实现这样一个obserer,要求如下：

传入参数只考虑对象，不考虑数组。
new Observer返回一个对象，其 data 属性要能够访问到传递进去的对象。
通过 data 访问属性和设置属性的时候，均能打印出右侧对应的信息。

我们有两个难点需要解决。

第一：当对象的某个属性变化的时候，如何触发自定义的回调函数？
答案：ES5中新添加了一个方法：Object.defineProperty，通过这个方法，可以自定义getter和setter函数，从而在获取对象属性和设置对象属性的时候能够执行自定义的回调函数。

第二：对象往往是一个深层次的结构，对象的某个属性可能仍然是一个对象，这种情况怎么处理？
比如说

let data = {
    user: {
        name: "liangshaofeng",
        age: "24"
    },
    address: {
        city: "beijing"
    }
};

答案：递归算法，也就是下面代码中的walk函数。如果对象的属性仍然是一个对象的话，那么继续new一个Observer，直到到达最底层的属性位置。

// 观察者构造函数
function Observer(data) {
   
    this.data = data;
    this.walk(data)
}

let p = Observer.prototype;

// 此函数用于深层次遍历对象的各个属性
// 采用的是递归的思路
// 因为我们要为对象的每一个属性绑定getter和setter
p.walk = function (obj) {<