js实现滚动网页的同时背景渐变

最新推荐文章于 2024-05-07 21:04:09 发布
最新推荐文章于 2024-05-07 21:04:09 发布
阅读量2.2k 收藏 1
点赞数 1
分类专栏： HTML 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/everlasting_20141622/article/details/81351328
版权

实现起来非常简单，由于不太会js，代码也非常的丑，放这里方便再次使用

<body style="height:5000px;">
    <script type="text/javascript" src="http://wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script>
    <script src="http://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
    
    <script>
        var r=255,g=0,b=0,a=0;
        var la=4,lr=0,lg=0,lb=255;
        var speed=10;
        document.body.style.background = "linear-gradient(to bottom right, rgb("+lr+","+lg+","+lb+"), rgb("+r+","+g+","+b+") ) fixed  ";
        document.onscroll = (function(){
            if(a==0){
                g=g+speed;
                if(g>=255)a=1;
            }
            if(la==0){
                lg=lg+speed;
                if(lg>=255)la=1;
            }
            if(a==1){
                r=r-speed;
                if(r<=0)a=2;
            }
            if(la==1){
                lr=lr-speed;
                if(lr<=0)la=2;
            }
            if(a==2){
                b=b+speed;
                if(b>=255)a=3;
            }
            if(la==2){
                lb=lb+speed;
                if(lb>=255)la=3;
            }
            if(a==3){
                g=g-speed;
                if(g<=0)a=4;
            }
            if(la==3){
                lg=lg-speed;
                if(lg<=0)la=4;
            }
            if(a==4){
                r=r+speed;
                if(r>=255)a=5;
            }
            if(la==4){
                lr=lr+speed;
                if(lr>=255)la=5;
            }
            if(a==5){
                b=b-speed;
                if(b<=0)a=0;
            }
            if(la==5){
                lb=lb-speed;
                if(lb<=0)la=0;
            }
            document.body.style.background = "linear-gradient(to bottom right, rgb("+lr+","+lg+","+lb+"), rgb("+r+","+g+","+b+") ) fixed  ";
        });
    </script>
</body>

 

everlasting__
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS练习三：炫酷渐变进度条效果滚动条（不兼容火狐浏览器）
langyixuan的博客
05-14 480
炫酷渐变进度条效果滚动条制作 页面起始，将原来浏览器自带的滚动条宽度设为0不显示 滚动滚动条，显示动态渐变滚动条效果 滚动条高度随着页面浏览的进度变化 代码： css+html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
分享一个通过JS、CSS3滚动渐变的效果
技术无止境
05-12 2925
效果预览：http://bbs.3uol.com/tongchengmama/ 主要是skrollr.min.js这个类的使用。 API具体可参考官方：https://github.com/Prinzhorn/skrollr 下面是其中一个渐变模块的HTML <div class="item" id="jiangxi" data-1630="backgr...
js 图片渐变
最新发布
路过人间
05-07 509
缓动函数可以根据需要进行调整，常见的缓动函数还包括linear（线性）、ease-in（加速）、ease-out（减速）等，可以根据具体效果选择合适的缓动函数。当图片被点击时，先添加淡出动画使图片透明度从0渐变到1，然后在1秒后切换图片源并添加淡入动画使新图片透明度从0渐变到1，实现图片渐变效果。使用了CSS动画来实现图片的渐变效果，结合JavaScript来实现图片的切换和动画效果。可以根据需要添加更多的图片到images数组中，实现多张图片之间的渐变效果。
[JavaScript] 用JS制作博客页面背景随滚动渐变的效果
weixin_30883777的博客
10-28 214
用JS制作博客页面背景随滚动渐变的效果 准备 [x] 申请博客园的JS权限（如果你也想把它用在自己的博客园上） [x] 可能需要一些JS的基础知识（你可以打开w3school，然后就当自己准备好了） [x] 可能需要一些CSS基础知识（你需要知道颜色是怎样用16进制表示的） 当然，你也可以复制下面的代码然后走人qwq…… 注意：如果你想要用在自己的博客园上，请注意博客园的不同模板对应的...
JS 禁用背景页面滚动
我就是我不一样的美男子！
09-07 1503
var s_top=0; // 禁止滚动 function bodyScroll(event){ event.preventDefault(); } //禁止背景页面滚动 function unScroll(){ s_top = $(window).scrollTop(); document.body...
JS滚轴-文字根据滚动渐入渐出的效果
Jackie_Mina
02-06 495
javascript 滚轴
使用Js让背景实现自动改变linear-gradient颜色
BuerYouth分享
01-12 2368
渐变背景自动变换效果CSS线性渐变函数linear-gradient()实例菜鸟教程对函数的解释直接上实例 CSS线性渐变函数linear-gradient()实例 菜鸟教程对函数的解释 CSS linear-gradient() 函数 直接上实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>自动渐变背景</title> </head>
JS实现带圆弧背景渐变效果的导航菜单代码
10-23
【JS实现带圆弧背景渐变效果的导航菜单代码】是一种使用JavaScript和CSS技术来创建具有独特视觉效果的网页导航菜单。在这个实例中，当鼠标悬停在菜单项上时，背景会呈现出有趣的弧形渐变效果。这个效果是通过CSS定义...
JS实现山水湖景动态背景特效.zip
10-05
在这个"JS实现山水湖景动态背景特效.zip"项目中，我们将会探讨如何利用JavaScript、jQuery以及CSS来创建一个引人入胜的山水湖景背景动画。 首先，让我们关注JavaScript部分。在网页特效中，JavaScript是不可或缺的...
CSS3 SVG渐变网页动态背景特效.rar
10-01
总结起来，这个压缩包提供了一种利用CSS3和SVG技术实现的网页动态背景渐变特效，结合jQuery可以实现丰富的用户交互。对于开发者来说，这是一个很好的学习和实践资源，可以帮助他们提升网页设计的视觉效果，同时也...
微信小程序仿淘宝滚动导航栏背景色渐变
12-30
在这个项目中，“微信小程序仿淘宝滚动导航栏背景色渐变”是一个具体的功能实现，旨在模仿淘宝App中的一个常见交互设计，即当用户在商品列表中上下滑动时，顶部导航栏的背景色会从透明逐渐变为白色，从而提供良好的...
可制作炫酷页面滚动效果的jQuery事件插件
03-16
插件描述：该插件可制作炫酷页面滚动效果，包含有一组预置的jQuery事件，通过这些事件，可以在页面滚动时为指定元素制作相应的动画效果。 参考示例：http://www.jq22.com/jquery-info6220
微信小程序 ---- 导航栏随滚动透明渐变
11-08
该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变，但是需要注意的是不兼容IE8及以下的IE浏览器，原因：由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值！
Android Textview实现颜色渐变滚动效果
08-29
主要为大家详细介绍了Android Textview实现颜色渐变滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jQuery网页上下滚动背景变色特效
06-10
jQuery网页上下滚动背景变色特效，页面滚动改变背景颜色，背景颜色修改对应的data-background值即可。
背景色自动切换html,JavaScript实现网页背景自动变色
weixin_39905816的博客
07-01 2560
JavaScript实现网页背景自动变色，自己变换颜色，设定时间和颜色值即可，在你设定的颜色值、一定时间内自动切换网页背景颜色。/p>"http://www.w3.org/TR/html4/loose.dtd">背景自动变色背景自动变色var Arraycolor=new Array("#00FF66","#FFFF99","#99CCFF","#FFCCFF","#FFCC99","...
炫酷的滑动效果实现
万小凡的专栏
08-17 462
1、先看效果图 二、实现原理 在网上搜的时候也发现了这个案例，列出出处，表示尊重 https://blog.csdn.net/qq_34709056/article/details/72765273 通过自定义ScrollView  然后在通过自定义LinearLayout ，然后去修改其中的参数，然后在添加平移、缩放或者透明度渐变效果就能实现 三、实现 1、首先继承ScrollV...
【js/css】渐变色linear-gradient简明教程
当白的技术小窝 ( git : https://github.com/canwhite )
11-17 1454
经常的一些使用 注意这个角度是顺时针旋转的， 初始是竖直，颜色从下到上 (1)角度0，颜色方向是竖直从下到上 background:linear-gradient(0deg, red 0%, blue 100%); (2)角度为90，颜色顺时针旋转，变为水平从左到右 所以90度是从左到右的 background:linear-gradient(0deg, red 0%, blue 100%); (3)角度为180，颜色顺时针旋转，变为竖直从上到下 所以180度是从上到下的 background:li
vue.js border-image和linear-gradient（）属性做一个边框渐变色
ycycycyc1的博客
02-22 5183
首先我们今天的需求是用border-image做一个边框渐变色！！！ 那我们先来介绍一下什么是border-image和linear-gradient border-image是指定作为div元素周围边框的图像，那么它有几个参数，我们该怎么正确使用它呢？ border-image有五个参数分别是： 我们最常用的就是border-image-source和border-image-slice还有border-image-repeat， 接下来就是linear-gradient() 函数用于创建一个线性渐变的
html纵向滚动导航栏,html+css+js实现导航栏滚动渐变效果
05-25
以下是一个简单的实现纵向滚动导航栏并且带有渐变效果的HTML、CSS和JS代码示例： HTML代码： ```html <li><a href="#section1">Section 1</a></li> <li><a href="#section2">Section 2</a></li> <li><a href...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值