700字范文 > JS 实现元素颜色跟随滚动条变化

JS 实现元素颜色跟随滚动条变化

时间：2022-07-17 01:15:45

相关推荐

JS 实现元素颜色跟随滚动条变化

灰色深浅变化滚动部分颜色部分完整JS代码彩色变化颜色部分修改修改后的彩色变化JS完整代码

最近在学习JS开发，突然想实现这样一个效果，滚动条往下拉时元素颜色由浅变深，于是就尝试做这样一个功能。

灰色深浅变化

滚动部分

滚动部分，计算出网页可以滚动的范围，同时监听滚动事件，然后使用计算颜色的变化，给目标加上相应的CSS样式即可。

var scrollBegin = 200,//颜色变化开始位置，自行定义scrollTop, //当前滚动位置scrollArea; //可滚动区域//计算可滚动区域scrollArea = (function () {if ($(document).height() > $(window).height()) {// 可滚动高度 = 网页高度 - 视窗高度return $(document).height() - $(window).height();} else {return $(window).height();}})()//监听滚动$(window).scroll(function () {//获取当前滚动位置scrollTop = $(this).scrollTop();//修改颜色......})

颜色部分

最初想实现的效果内容在顶部时为浅色，滚动到底部变成深色。在RGB颜色上，这种灰色的颜色变化就是三个颜色的色值进行相同的变化。

这里涉及到RGB颜色模式的一些知识，RGB颜色模式就是红（R）、绿（G）、蓝（B）三原色以光的混合模式进行混合得到表现颜色，对应色值越高则该颜色的明度越高，也就是该颜色越明显，如RGB（255，0，0）表示红色光源最亮，绿色和蓝色光源最暗，这样得到的混合颜色最终表现为红色。

如果三个颜色色值均为最高，即为RGB（255，255，255），则混合而成的颜色为白色，反之RGB（0，0，0）则为黑色。因此介于之间的三色值相等的颜色即为不同深浅的灰色。

于是想要实现灰色从浅变深，则需要设置相同的RGB三种颜色的色值即可。需要的参数如下。

vartopColor = 255,//顶部颜色色值(浅灰色)，自行定义bottomColor = 100,//底部颜色色值(深灰色)，自行定义settingColor = 0,//用于设置的颜色色值，计算得出originColor, //元素本身的颜色colorValue; //用于css样式赋值的颜色语句//获取对象本身颜色originColor = $(target).css("background-color");

关于色值，则是按照这个公式来计算。

色值=(顶部色值−底部色值)∗(当前位置−开始位置)可滚动高度−开始位置色值=\frac{(顶部色值-底部色值)*(当前位置-开始位置)}{可滚动高度-开始位置} 色值=可滚动高度−开始位置(顶部色值−底部色值)∗(当前位置−开始位置)

其代码如下

//监听滚动中修改颜色... 的部分if (scrollTop < scrollBegin) {//未到开始位置时，设置为初始颜色$(target).css({"background-color": originColor });} else {//开始颜色变化//计算色值settingColor = topColor - ((topColor - bottomColor) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));//获得css样式赋值语句colorValue = "rgb(" + settingColor + "," + settingColor + "," + settingColor + ")";//颜色变化$(target).css({"background-color": colorValue });}

完整JS代码

完整的JS代码如下，记得引入JQuery

直接对body元素使用这个样式，可以得到以下的效果

彩色变化

后来想了一下，可以拓展成彩色的变化，滚动部分内容基本相同，改变颜色的部分，即可实现彩色变化的效果。

颜色部分修改

首先，如果要让颜色实现彩色变化，那么三原色色值上的变化肯定不相同了，为了方便使用，定义了一个颜色的构造函数。

//颜色构造函数function RGB(r, g, b) {this.red = r;this.green = g;this.blue = b;//获取颜色赋值语句this.getValue = function () {return "rgb(" + this.red + "," + this.green + "," + this.blue + ")";}}

然后对顶部颜色和底部颜色的三原色都计算色值变化

//色值计算公式function colorCalc(top, bottom) {return top - ((top - bottom) * (scrollTop - scrollBegin) / (scrollArea - scrollBegin));}//红色色值settingColor.red = colorCalc(topColor.red, bottomColor.red);//绿色色值settingColor.green = colorCalc(topColor.green, bottomColor.green);//蓝色色值settingColor.blue = colorCalc(topColor.blue, bottomColor.blue);//目标赋值$(target).css({"background-color": settingColor.getValue() });}

修改后的彩色变化JS完整代码

得到的效果如下

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。