html5图片 srcset、sizes 属性和 picture 元素

前言

关于图片img的响应属性srcset,和sizes及picture,很久之前看过,但是因为浏览器兼容原因,一直没有在项目中使用,但是最近发现,这几个属性兼容性还可以了,可以去caniuse中看一下,基本可以在项目中使用了。今天,简单介绍一下这几个属性。

srcset 和 sizes 属性

srcset 是一个包含一个或多个源图的源图容器,不同源图用逗号分隔,每一个源图由下面两部分组成:

1、图片 URL

2、 x (像素比描述)或 w (图片像素宽度描述)描述符(与图片 URL 相隔一个空格), w 描述符的加载策略是通过 sizes 属性里的声明来计算选择的

background-attachment实现滚动阴影效果

前言

之前文章视觉差效果制作,用到了background-attachment,今天用background-attachment实现滚动阴影效果。

首先,介绍一下 background-attachment,如果指定了 background-image ,那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。

简单而言,就是决定了在可滚动的容器中,背景图案是如何进行运动的。通过两个简单的 Demo,弄懂 background-attachment: srcoll 和 background-attachment: local。

background-attachment: local,这个就是和我们日常使用中的用法是一致的,可滚动容器的背景图案随着容器进行滚动:

浏览器指纹及用户行为智能推荐简介[视频]

前言

我们在浏览抖音等,抖音会根据你的浏览行为,计算出你个人喜好,然后智能推荐给你喜好的信息。我们在网站上浏览了某个商品,了解了相关的商品信息,但并没有下单购买,甚至没有进行登录操作。过两天用同台电脑访问其他网站的时候却发现很多同类商品的广告。

一般情况下,网站或者广告商都想要一种技术可以在网络上精确的定位到每一个个体,就算你没有账号,没有登录,也可以通过收集这些个体的数据,然后加以分析之后更加精确的去推送广告和其他的一些活动。而这个技术就是浏览器指纹技术。智能推荐是根据用户指纹和行文,推荐相关产品的算法,这个算法比较复杂,本文先讲讲浏览器指纹的收集。

谈谈JSON.stringify第二个参数和第三个参数的用法【视频】

前言

本文主要介绍一个小的知识点,可能不少同学忽略了,或者不清楚,普及一下。就是我们最常用的JSON.stringify,我们用这个参数,通常是在序列化和反序列化的时候使用,有时候也在简单的,非函数的深copy的时候使用。但是不知道其有第二个和第三个参数。

文档属性普及

JSON.stringify(value[, replacer[, space]])

参数说明: