动态渐变的滚动条

最新推荐文章于 2022-07-19 01:18:18 发布
最新推荐文章于 2022-07-19 01:18:18 发布
阅读量569 收藏
点赞数
分类专栏： Javascript专区 文章标签： javascript function c

将以下代码插入<head></head>中:

 

<SCRIPT LANGUAGE="JavaScript">

function eightb()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="F2FCFF";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="9CE4FA";
}
setTimeout("one()",100);
}
</script>
<script language="javascript">
function sevenb()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="E2F7FD";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="A8E9FD";
}
setTimeout("eightb()",100);
}
</script>
<script language="javascript">
function sixb()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="D5F3FC";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="B5EDFE";
}
setTimeout("sevenb()",100);
}
</script>
<script language="javascript">
function fiveb()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="CAF0FC";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="C2F0FE";
}
setTimeout("sixb()",100);
}
</script>
<script language="javascript">
function fourb()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="BCECFB";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="CDF2FD";
}
setTimeout("fiveb()",100);
}
</script>
<script language="javascript">
function threeb()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="B1EAFB";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="D9F5FE";
}
setTimeout("fourb()",100);
}
</script>
<script language="javascript">
function twob()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="A4E6FA";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="E6F8FE";
}
setTimeout("threeb()",100);
}
</script>
<script language="javascript">
function oneb()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="98E3FA";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="F2FBFE";
}
setTimeout("twob()",100);
}
</script>
<script language="javascript">
function eight()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="A4E6FA";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="E6F8FE";
}
setTimeout("oneb()",100);
}
</script>
<script language="javascript">
function seven()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="B1EAFB";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="D9F5FE";
}
setTimeout("eight()",100);
}
</script>
<script language="javascript">
function six()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="BCECFB";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="CDF2FD";
}
setTimeout("seven()",100);
}
</script>
<script language="javascript">
function five()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="CAF0FC";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="C2F0FE";
}
setTimeout("six()",100);
}
</script>
<script language="javascript">
function four()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="D5F3FC";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="B5EDFE";
}
setTimeout("five()",100);
}
</script>
<script language="javascript">
function three()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="E2F7FD";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="A8E9FD";
}
setTimeout("four()",100);
}
</script>
<script language="javascript">
function two()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="F2FCFF";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="9CE4FA";
}
setTimeout("three()",100);
}
</script>
<script language="javascript">
function one()
{
with(document.body.style)
{
scrollbarDarkShadowColor="13AED8";
scrollbar3dLightColor="F6FCFE";
scrollbarArrowColor="51BFE0";
scrollbarBaseColor="13AED8";
scrollbarFaceColor="ffffff";
scrollbarHighlightColor="13AED8";
scrollbarShadowColor="13AED8";
scrollbarTrackColor="9CE8FF";
}
setTimeout("two()",100);
}
</script>
<script langauge="javascript">
setTimeout("one()",500);
</script>

kingya2008
关注
专栏目录
高仿今日头条顶部渐变滚动条
02-26
高仿今日头条顶部渐变滚动条 选中的标签通过一个矩形红框高亮显示，红框背景中的标签文字变为白色，红框外的区域标签文字仍为灰色。
css边框动画|滚动条样式修改|文本颜色设置为渐变...
weixin_57660777的博客
10-15 1160
并且设置伪元素的z-index比父元素的z-index低，这样文字就会出现在伪元素的上面了。这里hover之前使用了transform来调整位置，所以hover时，transform要带上之前transform的代码，不然之前设置的transform会清空，会出现位置错乱进行旋转的情况。通用代码主要设置的是布局，比如伪元素设置绝对定位，而父盒子设置相对定位。设置scrollbar的thumb的样式之前，要先设置scrollbar的width和高度，不然效果看不见。斜切角度，这样就会有进度条变多的效果。
qt QProgressBar渐变滚动条
weixin_43246170的博客
06-08 3631
实现渐变滚动条，使用样式实现： 三种渐变样式： qlineargradient（线性渐变颜色设置），qradialgradient（辐射渐变），qconicalgradient（圆锥形渐变）。详情。 这边实现如下： 效果： 具体代码： .h .cpp...
css实现彩色渐变滑动条
AlbertYang的博客
09-04 3438
效果： 标题 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="jquery-1.11.3.min.js" type="text/javascript"></script> <style type="text...
JS练习三：炫酷渐变进度条效果滚动条（不兼容火狐浏览器）
langyixuan的博客
05-14 491
炫酷渐变进度条效果滚动条制作 页面起始，将原来浏览器自带的滚动条宽度设为0不显示 滚动滚动条，显示动态渐变滚动条效果 滚动条高度随着页面浏览的进度变化 代码： css+html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
Android开发：TextView加入滚动条示例
09-05
此外，还可以通过编程方式动态添加滚动条和控制其行为。例如，可以使用`TextView.setMovementMethod()`方法设置移动方式，使其支持滚动。如果希望滚动条始终可见，可以调用`setScrollbarFadingEnabled(false)`。 总...
自定义滚动条
12-30
例如，我们可以使用`$('body').css()`方法来动态改变滚动条的样式： ```javascript $(window).scroll(function() { var scrollPos = $(this).scrollTop(); // 获取当前滚动位置 if (scrollPos > 100) { $('...
动态设计滚动条风格
01-25
在IT领域，动态设计滚动条风格是一种提升用户体验和界面美观度的重要技术。滚动条作为用户界面（UI）中常见的交互元素，它允许用户查看和浏览超过屏幕可视区域的内容。随着Web应用和移动应用的快速发展，设计师们...
滚动条css精美样式
05-12
在描述中提到的"20种自定义滚动条css样式"，这可能是指一系列不同的滚动条设计示例，涵盖了各种风格和效果，例如：扁平化设计、透明度调整、渐变色应用、滑块的圆角处理、滚动条的hover效果等。这些样式可以适应不同...
WPF自定义连续滚动条
09-19
WPF 强大的动画系统使得滚动条的滑动可以有更丰富的动态效果。通过添加`Storyboard`到`ControlTemplate`，可以实现滑块平滑移动、渐变颜色等动画。 4. **连续滚动**： "连续滚动条"可能指的是在用户按下箭头按钮...
分享一个通过JS、CSS3滚动渐变的效果
技术无止境
05-12 2932
效果预览：http://bbs.3uol.com/tongchengmama/ 主要是skrollr.min.js这个类的使用。 API具体可参考官方：https://github.com/Prinzhorn/skrollr 下面是其中一个渐变模块的HTML <div class="item" id="jiangxi" data-1630="backgr...
CSS3自定义滚动条样式 -webkit-scrollbar
热门推荐
韩世雷 程序员专栏
10-23 30万+
有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？ 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。 演示
UISlider——渐变色滑动条
u012380572的博客
09-11 3926
渐变色的滑动条效果网上实现方案有很多，方法都大同小异，就是用颜色组生成新的Image插入到UISlider中。 生成image的方法如下所示： -(UIImage *)getGradientImageWithColors:(NSArray*)colors imgSize:(CGSize)imgSize { NSMutableArray *arRef = [NSMutableArray...
01超精美渐变色动态背景完整示例【CSS动效实战（纯CSS与JS动效）】
1_bit 的博客
07-19 9795
本节案例如下（其他动效篇幅原因逐步讲解，欢迎三连）： 一、线性渐变 1.1 渐变分类 在 CSS 中，使用渐变色需要用到 gradient 属性，而 gradient 属性分为 线性渐变 linear-gradient 与 径向渐变 radial-gradient。 线性渐变 和 径向渐变的不同在于渐变色方向不同，线性渐变的渐变方向可以指定为 上下左右、角度以及对角渐变，径向渐变的方向则是基于某个中心点。 例如咱们使用一个线性渐变给定渐变方向为上下，渐变色为红橙，那么可以写成： <style&gt
vue 顶部导航监听滚动条渐变效果
一个没人看的博客
05-15 2501
直接上代码 HTML: <header id="fixedBar" :style="style"> <div :style="{fontSize:'16px'}"> 导航条里的内容 </div> </header> data: data() { return { style: {}...
渐变色进度条
云淡风轻的博客
11-14 2295
效果图： 实现方式： 1.drawable下新建process_bg.xml<?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <!-- 背景 gradient是渐变,corners定义的是圆角 --> <ite
css自定义渐变滚动条
最新发布
08-03
CSS自定义渐变滚动条是指通过CSS样式来改变浏览器默认滚动条的外观，包括颜色、形状和动画效果，使其更具个性化。这通常涉及到选择器`::-webkit-scrollbar`, `::-webkit-scrollbar-track`, `::-webkit-scrollbar-...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值