用opcity模拟zindex渐变的效果
github地址:
https://github.com/echoorx/opacity-Gradient
zindex好像不能渐变改变，所以用opcity来模拟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
width: 100px;
height: 100px;
position: absolute;
top: 0;
}
.big{
background-color: red;
}
.small{
background-color: green;
z-index: 1;
opacity: 0;
}
#btn{
margin-top: 200px;
}
</style>
</head>
<div class="big"></div>
<div class="small"></div>
<input id="btn" value="1111" type="button">
<body>
<script>
var btn = document.querySelector('#btn');
var small = document.querySelector('.small')
btn.addEventListener('click',function(){
var timer = setInterval(function(){
var opc = window.getComputedStyle(small, null)["opacity"];
opc = opc * 100 + 2;
opc /= 100;
small.style.opacity = opc;
if(opc == 1){
clearInterval(timer)
}
},10)
})
</script>
</body>
</html>
用opcity模拟zindex渐变的效果的更多相关文章
- CSS3下的渐变文字效果实现
如下,第一种方法已实践 一.方法一:借助mask-image属性 可以狠狠地点击这里:CSS3下的渐变文字效果方法一demo 如果您手头上的浏览器是Chrome或是Safari,则您可以在demo页面 ...
- 用JS制作博客页面背景随滚动渐变的效果
今天颓了一会,用JavaScript给我的博客园博客写了一个页面背景随滚动而渐变的效果,做完之后自我感觉良好-- 下面就以我的博客园博客为例,介绍一下如何制作这个效果! 准备 [x] 申请博客园的JS ...
- 小tip:CSS3下的渐变文字效果实现——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1601 一.方法一:借 ...
- php模拟数据库常用操作效果
test.php <?php header("Content-type:text/html;charset='utf8'"); error_reporting(E_ALL); ...
- 经典！HTML5 Canvas 模拟可撕裂布料效果
这是一个模拟可撕裂布料效果的 HTML5 Canvas 应用演示,效果逼真.你会看到,借助 Canvas 的强大绘图和动画功能,只需很少的代码就能实现让您屏息凝神的效果. 温馨提示:为保证最佳的效果, ...
- jQuery中的渐变动画效果
jQuery中的渐变动画效果jQuery中的渐变动画效果
- CAGradientLayer实现图片渐变透明效果
CAGradientLayer实现图片渐变透明效果 要实现的效果如下: 源码: // // RootViewController.m // CAGradientLayer // // Copyrigh ...
- 用POP动画模拟真实秒钟摆动效果
用POP动画模拟真实秒钟摆动效果 静态图: 动画图: 此处用到了POP中的Spring系列动画,现提供源码如下: SecondClockView.h 与 SecondClockView.m // // ...
- Silverlight调用一般性处理程序模拟Silverlight调用WCF效果（2）
[置顶] Silverlight调用一般性处理程序模拟Silverlight调用WCF效果(2) 分类: 技术2012-03-31 12:51 548人阅读 评论(0) 收藏 举报 silverlig ...
随机推荐
- efcore 控制台迁移架构
添加 nuget 包: Microsoft.EntityFrameworkCore.Design Microsoft.EntityFrameworkCore.SqlServer Microsoft.E ...
- Math工具类的使用
1.包:java.lang 不需要导包 2.Math 类包含用于执行基本数学运算的方法,如初等指数.对数.平方根和三角函数. 特点: 该类中的方法都是静态方法,所以可以直接使用类名.方法名(实参)调 ...
- 环境变量、system（day10）
一.环境变量 bash下的环境变量. 每个进程都默认从父进程继承环境变量 bash本身就是一个程序,这个程序运行的时候,bash进程 可以定义只能之自己这个进程中使用的变量,这种变量称为自定义变量. ...
- 05.Python高级编程
1 ==,is的使用 is 是比较两个引用是否指向了同一个对象(地址引用比较). == 是比较两个对象是否相等.(比较的数值) 2 深拷贝.浅拷贝.copy.copy 2.1 浅拷贝 浅拷贝: 拷贝的 ...
- 继续聊WPF——进度条
ProgressBar控件与传统WinForm使用方法完全一样,我们只需关注: Minimum——最小值,默认为0: Maximum——最大值,默认为100. Value——当前值. 关键是它的控 ...
- CodeVS 1013&1029
若干二叉树遍历的数据结构题. Problem 1013 传送门:http://codevs.cn/problem/1013/ 本题是一个数据结构——二叉树遍历问题. 对二叉树,给定中序遍历序列(In- ...
- Java基础学习总结（68）——有关Java线程方面的面试题
不管你是新程序员还是老手,你一定在面试中遇到过有关线程的问题.Java 语言一个重要的特点就是内置了对并发的支持,让 Java 大受企业和程序员的欢迎.大多数待遇丰厚的 Java 开发职位都要求开发者 ...
- orcale 多表连接
多表连接:
- Summary of Memory Management Methods
Summary of Memory Management Methods Table 18-1 summarizes the various memory management methods. If ...
- 百度之星2014复赛 - 1001 - Find Numbers
先上题目: Find Numbers Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...