javascript动画效果之多物体透明度

html和css 仅为布局，需要注意的是filter对应的是老版本的ie浏览器透明度，而opacity对应的其他浏览器的透明度

filter: alpha(opacity: 50);
opacity: 0.5;

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>Document</title><style type="text/css">* {margin: 0;padding: 0;font-size: 12px;}div {margin: 10px;height: 360px;width: 200px;}ul {list-style: none;}ul li {width: 200px;height: 100px;background: blue;margin-bottom: 20px;cursor: pointer;filter: alpha(opacity: 50);opacity: 0.5;}</style>
</head><body><div><ul id="squLi"><li></li><li></li><li></li></ul></div></body></html>

js部分也是通过for循环来给每个li标签都加入一个鼠标触发事件

 1 <script type="text/javascript">
 2         function $(id) {
 3             return typeof id === "string" ? document.getElementById(id) : id;
 4         }
 5         window.onload = function() {
 6             //自定义变量为li标签的集合
 7             var aLi = $("squLi").getElementsByTagName("li");
 8
 9             //通过for循环给每个li都添加一个触发效果
10             for (var i = 0; i < aLi.length; i++) {
11                 //每个li都需要一个单独的定时器，避免冲突
12                 aLi[i].timer = null;
13                 //设置每一个li初始的透明度为50，避免冲突
14                 aLi[i].alpha = 50;
15                 //绑定事件
16                 aLi[i].onmouseenter = function() {
17                     //调用自定义函数，并传参(需要达到的透明度为100)
18                     squartLi(this, 100);
19                 }
20                 //绑定事件
21                 aLi[i].onmouseleave = function() {
22                     //调用同一个自定义函数，传参(离开时透明度为50)
23                     squartLi(this, 50);
24                 }
25             }
26
27             //自定义函数，自定义参数obj和onAlpha
28             function squartLi(obj, onAlpha) {
29                 //一个li同一时间只需要一个定时器，所以事件触发时，要清除已经触发的定时器
30                 clearInterval(obj.timer);
31                 //定时器
32                 obj.timer = setInterval(function() {
33                     //鼠标进入obj.alpha为50，onAlpha为100，所以+10
34                     if (obj.alpha < onAlpha) {
35                         obj.alpha += 10;
36                     } else {
37                         //离开时，obj.alpha为100，onAlpha为50，所以-10
38                         obj.alpha -= 10;
39                     }
40                     if (obj.alpha == onAlpha) {
41                         //当为50或者100则达到要求，清除定时器
42                         clearInterval(obj.timer);
43                     } else {
44                         //老版本ie
45                         obj.style.filter = 'alpha(opacity: ' + obj.alpha + ');'
46                         //其他浏览器
47                         obj.style.opacity = obj.alpha / 100;
48                     }
49
50                 }, 30);
51             }
52
53         }
54     </script>

转载于:https://www.cnblogs.com/WhiteM/p/6025371.html

javascript动画效果之多物体透明度相关推荐

Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
JavaScript 动画效果
文章目录 JS动画实现概述匀速动画缓速动画无缝连续滚动特效轮播图轮播图淡入淡出效果 JS动画实现概述在CSS3中可以通过transition过渡属性可以实现动画 JS可以利用CSS3中 ...
JavaScript 动画效果的实现（附带示例）
在学习 CSS 时我们知道,通过 CSS 可以实现简单的动画效果,但对于比较复杂的动画,使用 CSS 实现起来就会比较麻烦. 除了可以使用 CSS 来实现外,也可以使用 JavaScript 来实现. ...
html js 动画效果,JavaScript 动画效果
使用JavaScript可以生成图像的动画效果. ----------------------- JavaScript 动画使用JavaScript可以生成图像的动画效果,技巧是使用JavaScri ...
javascript动画效果之透明度
在css中的filter对应老版本的ie浏览器,opacity对应的是其他浏览器 1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 & ...
JavaScript之jQuery够用即可（事件委托、动画效果、扩展插件）
文章目录一.事件委托二.JS的动画效果三.扩展插件一.事件委托 1.事件委托其实就是给对象绑定一个事件,但是委托给它所属的每一个子对象了,因此每一个子对象都具有添加进的功能书写格式如下: ...
html动画之制作烟花效果,JavaScript实现烟花绽放动画效果
先编写一个烟花绽放的动画效果. 放烟花时,一个烟花可分为两个阶段:(1)烟花上升到空中:(2)烟花炸开成碎片,炸开的碎片慢慢消散. 为此抽象出两个对象类:Firework和Particle.其中,Fi ...
iOS几种动画效果的实现
做过一个项目,里面涉及到的动画效果比较多,在这里做个小小的总结. 直线动画效果实现一个物体在某段时间从一个点移动到另一个点. 效果如下: 动画相关代码如下: 动画模型: @interface Ani ...
自定义动画属性java_创建酷炫动画效果的10个JavaScript库
原标题:创建酷炫动画效果的10个JavaScript库 1) Dynamics.jsDynamics.js是设计基于物理规律的动画的重要Java库.它可以赋予生命给所有包含CSS 和SVG属性的DOM ...

javascript动画效果之多物体透明度

javascript动画效果之多物体透明度相关推荐

最新文章

热门文章