javascript动画效果之透明度
在css中的filter对应老版本的ie浏览器，opacity对应的是其他浏览器
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} div {
width: 200px;
height: 200px;
background: green;
filter: alpha(opacity: 30);
opacity: 0.3;
}
</style>
</head> <body>
<div id="div"> </div> </body> </html>
js中需要在开始自增和开始自减前清除定时器，否则当鼠标多次移动，则会无限叠加自增和自减
<script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} window.onload = function() {
//自定义变量div
var div = $("div");
//定义一个定时器timer
var timer = null;
//定义一个变量用于透明度自增减
var alpha = 30; //定义一个鼠标移进的事件
div.onmouseenter = start; //定义一个函数
function start() {
//当鼠标移动次数过多，会叠加自增，所以需要在开始时，清除定时器
clearInterval(timer);
//定时器用于自动增加
timer = setInterval(show, 30);
} //自定义函数用于透明度的自动增加
function show() {
if (alpha < 100) {
alpha += 10;
//ie浏览器
div.style.filter = 'alpha(opacity: ' + alpha + ');'
//其他浏览器
div.style.opacity = alpha / 100;
}
} //定义一个鼠标移出事件
div.onmouseleave = back; //定义一个函数
function back() {
//当鼠标移动次数过多，会叠加自减，所以需要在开始时，清除定时器
clearInterval(timer);
//定时器用于自动减少
timer = setInterval(clear, 30);
} //自定义函数用于透明度的自动减少
function clear() {
if (alpha > 30) {
alpha -= 10;
//ie浏览器
div.style.filter = 'alpha(opacity: ' + alpha + ');'
//其他浏览器
div.style.opacity = alpha / 100;
}
} }
</script>
javascript动画效果之透明度的更多相关文章
- javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
- javascript动画效果
之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试 <!DOCTYPE html> ...
随机推荐
- Anton and Tree
Anton and Tree 题目链接:http://codeforces.com/contest/734/problem/E DFS/BFS 每一次操作都可以使连通的结点变色,所以可以将连通的点缩成 ...
- kali客户端攻击
浏览器攻击 browser_autpwn2 (BAP2) mkdir /test 为接受响应的服务器创建目录 use auxiliary/server/browser_autopwn2 set ...
- 总结：liunx常见命令集合
没有系统学习过liunx,把工作中遇到的liunx命令集合信息如下: 1.nc传送文件 之前总是用rsync, 今天遇到了一个从阿里云服务器传送文件到我们公司的内网服务器,这就不能传了,又想用一致的文 ...
- ligerUI实现分页
在公司实习看到公司框架里使用了ligerUI的grid进行分页,个人感觉挺好用的,自己摸索着实现了一遍记录下来 简单来说,liger grid 就是提交准备好的数据到指定的目标请求数据,拿到数据以后, ...
- WordPress网站加速优化，一键免费使用七牛CDN插件
利用wordpress搭建网站是个人建站的主流方案,我曾分享过wordpress网站加速优化必做的十件事,帮助了不少个人站长.今天介绍帮助wordpress网站提升速度至少10倍的免费CDN加速插件: ...
- Openjudge-NOI题库-和数
题目描述 Description 给定一个正整数序列,判断其中有多少个数,等于数列中其他两个数的和. 比如,对于数列1 2 3 4, 这个问题的答案就是2, 因为3 = 2 + 1, 4 = 1 + ...
- SURF 特征法
public static void FindMatch(Mat modelImage, Mat observedImage, out long matchTime, out VectorOfKeyP ...
- LoadRunner日志（归档记录，以便自己查阅）
1.当设置迭代次数大于1时,回放从第二次迭代开始发生错误 这种现象多是由于在"Run-time Setting"的"Browse Emulation"的设置中, ...
- 5. test命令
Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值.字符和文件三个方面的测试. 1. 数值测试 参数 说明 -eq 等于则为真 -ne 不等于则为真 -gt 大于则为真 -ge 大 ...
- HDU 2516 取石子游戏 斐波纳契博弈
斐波纳契博弈: 有一堆个数为n的石子,游戏双方轮流取石子,满足: 1)先手不能在第一次把所有的石子取完: 2)之后每次可以取的石子数介于1到对手刚取的石子数的2倍之间(包含1和对手刚取的石子数的2倍) ...