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> ...
随机推荐
- linux服务器没网情况下手动安装软件几个方法
1,找到一个有网的服务器,使用yumdownloader gcc,获取需要的rmp包: 2,在http://pkgs.org 下下载所需要的rpm包
- Qt 学习笔记
继承自QObject 的Qt类都具有支持信号和槽的能力,并且在子类的实现代码中直接使用connect()函数 pwdLineEdit->setEchoMode(QLineEdit::Passwo ...
- cshtml一二
布局页:_MyLayout.cshtml <!DOCTYPE html> @*Razor布局页*@ <html> <head> @*HTTP的头部协议,提示浏览器网 ...
- Swift中GCD与NSOperation相关
GCD Swift 3必看:从使用场景了解GCD新API 常用写法: dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_ ...
- Redis--Latest Windows Version
Redis Windows Ver https://github.com/MSOpenTech/redis/releases service-install.batredis-server.exe - ...
- VS发布网站步骤（先在vs上发布网站到新的文件夹，然后挂到iis上面）
VS发布网站步骤(先在vs上发布网站到新的文件夹,然后挂到iis上面) 首先用vs2010打开一个Asp.Net项目, 也可以通过vs菜单->生成->发布网站 选择发布网站的路径 ...
- non-ARC代码转 ARC 排除 “Existing instance variable 'delegate' for property with assign attribute must be _unsafe _unretained” 错误
原来非ARC代码是 @interface MHWebImageDownloader : NSObject { id<MHWebImageDownloaderDelegate> delega ...
- Eclipse主题设置
1. 内部编辑区域主题 Eclipse黑色主题包 下载主题包解压到Eclipse安装目录下的dropins目录,重启Eclipse,Windows—>Preferences—>Genera ...
- Output\TEST.sct(7): error: L6236E: No section matches selector - no section to be FIRST/LAST.
点击错误信息,跳转到了一个.sct文件:*.o (RESET, +First) 按照如下操作,也不能解决问题.对比别的工程,也没找出问题. "操作是: Options for Target ...
- 微信支付服务商模式（受理机构模式）开发注意事项，jsapi支付
1.首先下载的demo,一般都是有些bug的,先要改一下. 2.微信貌似没有为服务商模式单独开发demo,下载的也都是普通商户的支付demo,其实这里没有必要单独写,因为他们区别就是几个参数的区别. ...