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> ...
随机推荐
- zabbix 布署实践【6 使用微信公众号-消息模版推送告警】
使用这个服务的前提是,你必须要有一个微信订阅号,或者公众号,并且是通过认证的号 因为认证过后的号才有模版消息和获取用户openid等信息的权限 ,如下,登录微信公众号的登录页后,底下有个接口权限的展示 ...
- XTU 1250 Super Fast Fourier Transform
$2016$长城信息杯中国大学生程序设计竞赛中南邀请赛$H$题 排序,二分. 对$a$数组,$b$数组从小到大进行排序. 统计每一个$a[i]$作为较大值的时候与$b[i]$对答案的贡献.反过来再统计 ...
- Linq 内联左联等
我们在做SQL查询的时候经常会用到Inner Join,Left Join,笛卡尔积等等,连接方式的概念方面我想也不用给予太多解释, 我们今天的重点是让大家熟悉LINQ是如何使用Join来实现常用的表 ...
- 常用网页标签重置CSS
做前端开发时常需要将网页中所有标签的格式清空,从而使各个浏览器标签样式一样.以下是网络上常见的CSS代码 /* =s Reset (by YUI 3) */ html{color:#000;} bod ...
- SQLite模糊查找（like）
select UserId,UserName,Name,Sex,Birthday,Height,Weight,Role from xqhit_Users where UserName like &qu ...
- WinForm ListView
今天,我学习了公共控件中的ListView的内容. 首先,在利用ListView布置界面时,有以下三个方面: 1.视图: 在其右上方小箭头点击将视图改为Details:或者右键属 ...
- Jquery 获取上传文件大小
<input type="file" id="file1" /> <script> var size = $("#file1& ...
- Hibernate遇到oracle之主键生成策略
一直用Hibernate+mysql,感觉Hibernate很好用,也出过什么大问题:这周,公司的产品要部署到Orecle,虽然产品号称支持Oracle但是我自己知道,这个产品压根儿就没在Oracle ...
- Maven pom项目部署
maven控制台运行程序 <plugin> <groupId>org.codehaus.mojo</groupId> <artifactId>exec- ...
- 实战荟萃-UI篇
一. 前言 平时在处理问题的时候,经常会遇到一些奇奇怪怪的问题,今天在这里将其记录下来.这里将会列举几个常用的UI问题进行讲解 二. 导航栏 iOS导航栏绝对是个巨坑.和很多朋友聊天都是自己实现了一套 ...