js 背景从无到黑的渐变 字从白到黑的渐变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css透明度的变化</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<style type="text/css">
#header {
position: fixed;
width: 100%;
height: 50px;
top: 0;
left: 0;
background: rgba(36, 41, 44,0);//背景的初始值
color: rgba(230,23,71);//文字的初始值
}
</style>
</head>
<body>
<div>
<div id="header">头部</div>
<ul>
<li>12345678910</li>
<li>12345678910</li>
//想看效果的话多赋值几个出来
</ul>
</div>
</body>
<script type="text/javascript">
var header = document.getElementById('header');
window.onscroll = function() {
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;//获取页面滚动的距离
console.log(scrollTop)
var opcaity = (scrollTop / 100 > 1) ? 1 : scrollTop / 100;//透明度的渐变取值
header.style.background = 'rgba(36,41,44,' + opcaity + ')';
if(opcaity>0.2){
header.style.color= 'rgba(255,255,255,' + opcaity + ')';
}else{
header.style.color='rgba(230,23,71)' //往回滑的时候再给一个默认值
}
}
</script>
</html>
js 背景从无到黑的渐变 字从白到黑的渐变的更多相关文章
- 解决 APP启动白屏黑屏问题
闪屏页简介 闪屏页,我们手机上的每个 APP 几乎都有自己的闪屏页,就是在真正进入程序前,会有一个页面停顿几秒钟.其实我们完全可以充分利用好这几秒钟做很多的程序初始化了启动. 为什么我的 APP 启动 ...
- Js实现京东无延迟菜单效果(demo)
一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...
- 无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动
这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下 ,代码实现如下. html+css部分: <style> #moocb ...
- 【01】CSS3 Gradient 分为 linear-gradient（线性渐变）和 radial-gradient（径 向渐变）（转）
CSS3 Gradient 分为 linear-gradient(线性渐变)和 radial-gradient(径 向渐变).而我们今天主要是针对线性渐变来剖析其具体的用法.为了更好的应用 CSS3 ...
- cojs 白树黑 黑树白 题解报告
黑树白 首先如果不是强制在线,这个题用莫队+树状数组就可以在O(n*sqrt(n)*log(n))的时间内搞定 如果没有修改操作,可以直接上主席树就可以辣 我们考虑修改操作,某一个修改操作对于某一个查 ...
- SpringMVC结合ajaxfileupload.js实现文件无刷新上传
直接看代码吧,注释都在里面 首先是web.xml <?xml version="1.0" encoding="UTF-8"?> <web-ap ...
- js背景自适应，学到了
最近在做一个项目,要求实现背景自适应,何为背景自适应呢? 1.如果背景图高度不够,背景height是100%,background-size就应该是 100% auto 2.如果背景图宽度不够,背景w ...
- Lodop背景图无图片时显示放大叉号问题
正常情况下,如果指定图片路径中,图片不存在或指定错误的路径,会因为找不到图片显示叉号,Lodop背景图如果设置了背景图宽度高度控制,显示的叉号也会被相应的放大,形成放大的模糊的图案,看起来就像是黑色边 ...
- Js实现京东无延迟菜单效果(demo) 慕课网
先来理清思路:1.开发基本的菜单结构 2.开发普通的二级菜单效果 3.假如延迟解决移动问题 切换子菜单时候,用setTimeout设置延迟 debounce去抖技 在事件被频繁触发是,只执行一次处理 ...
随机推荐
- Spring Cloud-Bus(十二)
说明 用于分布式上所有微服务都连接到消息总线上面.进行统一的通知 Config动态刷新 configClient configClient通过/actuator/bus-refresh端点通知消息总线 ...
- 译：滑雪租赁问题（ski rental problem）
本文翻译自维基百科词条:http://en.wikipedia.org/wiki/Ski_rental_problem 滑雪租赁问题(ski rental problem)是一类问题的总称, ...
- Method and apparatus for an atomic operation in a parallel computing environment
A method and apparatus for a atomic operation is described. A method comprises receiving a first pro ...
- [bzoj2259][Oibh]新型计算机_Dijkstra
新型计算机 bzoj-2259 Oibh 题目大意:给定一个n个数的数列,第i个数为a[i],更改第i个数至x的代价为|x-a[i]|.求最小代价,使得:读入一个数s1后,向后连着读s1个数,然后如s ...
- HDU 5176
这道题以前好像在哪遇到过. 注意树的每一条边都是桥,所以,桥两端的点要到达对方是必须通过这条边的.于是,可以把边由小到大排序,利用并查集,这样,每加一条边就连通了一部分,而随着权值的增大,必定是桥两端 ...
- 号外：java基础班教材永久免费 报名就送
以前万人疯抢的成都传智播客java基础班教材,今日免费赠送,你hold的住吗? 由成都传智播客传道授业解惑的诸位老师,精心制作的教材.如今免费赠送,你能接的住吗? 书是交融感情.获得知识.传承经验的重 ...
- BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 2013 平台
BEGINNING SHAREPOINT® 2013 DEVELOPMENT 第1章节--SharePoint 2013 介绍 SharePoint 2013 平台 SharePoin ...
- Service启动模式
Service简单介绍 Service表示服务.是Android系统的核心组件之中的一个. Service的本质是一个继承了android.app.Service的java类: ...
- 2016.04.11,英语,《Vocabulary Builder》Unit 12
umbr, from the Latin umbra, 'shadow', umbrella, -ella, 'little', means 'little shadow'. adumbrate: [ ...
- SQLServer2012 表IAM存储结构探究
SQLServer2012 表IAM存储结构探究 Author:zfive5(zidong) Email: zfive5@163.com 引子 国庆节期间,一直在翻阅<程序猿的自我修养-链接.装 ...