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> ...
随机推荐
- PHP strtotime在linux服务器时间延迟8小时问题
今天客户反映有个功能投票模块第一天投了后,第二天就不能投了,理论上是第二天凌晨就可以再答题的,发现本地是正常的,linux服务器异常, 仔细查找原因发现是strtotime函数获取的值和本地获取的值不 ...
- HDU 5903 Square Distance
$dp$预处理,贪心. 因为$t$串前半部分和后半部分是一样的,所以只要构造前一半就可以了. 因为要求字典序最小,所以肯定是从第一位开始贪心选择,$a,b,c,d,...z$,一个一个尝试过去,如果发 ...
- 使用 JUnit 报错 java.lang.Exception: No runnable methods
错误详情如下: java.lang.Exception: No runnable methods at org.junit.runners.BlockJUnit4ClassRunner.validat ...
- jmeter java性能测试
本篇文章主要讲解jmeter如何测试java请求,以项目中某个接口为例,请求数据为post,返回也为post 1:新建maven工程,pom文件为 <project xmlns="ht ...
- Python学习笔记——基础篇【第七周】———类的静态方法 类方法及属性
新式类和经典类的区别 python2.7 新式类——广度优先 经典类——深度优先 python3.0 新式类——广度优先 经典类——广度优先 广度优先才是正常的思维,所以python 3.0中已经修复 ...
- C# 语言规范_版本5.0 (第6章 转换)
1. 转换 转换(conversion) 使表达式可以被视为一种特定类型.转换可导致将给定类型的表达式视为具有不同的类型,或其可导致没有类型的表达式获得一种类型.转换可以是隐式的 (implicit) ...
- js检测对象中是否存在某个属性
1.使用in关键字.该方法可以判断对象的自有属性和继承来的属性是否存在. 2.使用对象的hasOwnProperty()方法.该方法只能判断自有属性是否存在,对于继承属性会返回false. 3.用un ...
- php 分析
php code in D:\10\11\php test in D:\10\11\php\test issue 1: <html><head><title>标记 ...
- Oracle Day 08 游标与例外的总结
1.游标的使用(cursor) 基本格式: 定义游标: cursor 游标名 is select语句; 打开游标: open 游标名; loop(循环) fetch ... into ...; ...
- FileZilla客户端源码解析
FileZilla客户端源码解析 FTP是TCP/IP协议组的协议,有指令通路和数据通路两条通道.一般来说,FTP标准命令TCP端口号是21,Port方式数据传输端口是20. FileZilla作为p ...