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标签都加入一个鼠标触发事件

 <script type="text/javascript">

         function $(id) {

             return typeof id === "string" ? document.getElementById(id) : id;

         }

         window.onload = function() {

             //自定义变量为li标签的集合

             var aLi = $("squLi").getElementsByTagName("li");

             //通过for循环给每个li都添加一个触发效果

             for (var i = 0; i < aLi.length; i++) {

                 //每个li都需要一个单独的定时器，避免冲突

                 aLi[i].timer = null;

                 //设置每一个li初始的透明度为50，避免冲突

                 aLi[i].alpha = 50;

                 //绑定事件

                 aLi[i].onmouseenter = function() {

                     //调用自定义函数，并传参(需要达到的透明度为100)

                     squartLi(this, 100);

                 }

                 //绑定事件

                 aLi[i].onmouseleave = function() {

                     //调用同一个自定义函数，传参(离开时透明度为50)

                     squartLi(this, 50);

                 }

             }

             //自定义函数，自定义参数obj和onAlpha

             function squartLi(obj, onAlpha) {

                 //一个li同一时间只需要一个定时器，所以事件触发时，要清除已经触发的定时器

                 clearInterval(obj.timer);

                 //定时器

                 obj.timer = setInterval(function() {

                     //鼠标进入obj.alpha为50，onAlpha为100，所以+10

                     if (obj.alpha < onAlpha) {

                         obj.alpha += 10;

                     } else {

                         //离开时，obj.alpha为100，onAlpha为50，所以-10

                         obj.alpha -= 10;

                     }

                     if (obj.alpha == onAlpha) {

                         //当为50或者100则达到要求，清除定时器

                         clearInterval(obj.timer);

                     } else {

                         //老版本ie

                         obj.style.filter = 'alpha(opacity: ' + obj.alpha + ');'

                         //其他浏览器

                         obj.style.opacity = obj.alpha / 100;

                     }

                 }, 30);

             }

         }

     </script>

javascript动画效果之多物体透明度的更多相关文章

  1. javascript动画效果之多物体缓冲运动

    这个是通过一个for循环控制的三个li标签,被鼠标触发则会有一个宽度增加和减少的事件 html和css同样写在一起方便察看,这里就是简单的布局,重点在js <!DOCTYPE html> ...

  2. javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  3. Javascript动画效果（三）

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  4. Javascript动画效果（一）

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  5. Javascript动画效果（二）

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  6. Javascript动画效果（四）

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  7. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  9. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

随机推荐

  1. JNDI实现服务器(tomcat)与数据库(mysql)连接的数据源配置以及获取连接的java代码

    ->首先将mysql的jar包导入到tomcat/lib文件夹下 ->然后在tomcat/conf/context.xml文件中配置以下内容 <Resource name=" ...

  2. hdu 2188 选拔志愿者(sg博弈）

    Problem Description 对于四川同胞遭受的灾难,全国人民纷纷伸出援助之手,几乎每个省市都派出了大量的救援人员,这其中包括抢险救灾的武警部队,治疗和防疫的医护人员,以及进行心理疏导的心理 ...

  3. python 学习 异常处理

    异常处理实例 while True: num1 = input('num1:') num2 = input('num2:') try: num1 = int(num1) num2 = int(num2 ...

  4. chrom 快捷键 整理版

    chrome窗口和标签页快捷键: Ctrl+N 打开新窗口 Ctrl+T 打开新标签页 Ctrl+Shift+N 在隐身模式下打开新窗口 Ctrl+O,然后选择文件 在谷歌浏览器中打开计算机上的文件 ...

  5. 《JavaScript高级程序设计》读书笔记 ---小结

    对象在JavaScript 中被称为引用类型的值,而且有一些内置的引用类型可以用来创建特定的对象,现简要总结如下: 引用类型与传统面向对象程序设计中的类相似,但实现不同: Object 是一个基础 ...

  6. 自定义按钮~自适应布局~常见bug

    一.元件 自定义按钮可用button或a   display为 inline-block 方便设置格式,通过 padding,height,line-height,font-size设置按钮的大小 & ...

  7. android 一些数据转换方法

    android 一些数据转换方法 package com.ai9475.util; import android.content.Context; import android.content.res ...

  8. POJ 3264 RMQ裸题

    POJ 3264 题意:n个数,问a[i]与a[j]间最大值与最小值之差. 总结:看了博客,记下了模板,但有些地方还是不太理解. #include<iostream> #include&l ...

  9. PAT 团体程序设计天梯赛-练习集 L1-007. 念数字

    输入一个整数,输出每个数字对应的拼音.当整数为负数时,先输出“fu”字.十个数字对应的拼音如下: 0: ling 1: yi 2: er 3: san 4: si 5: wu 6: liu 7: qi ...

  10. ubuntu显卡驱动安装及设置

    转自: Ubuntu 14.04 Nvidia显卡驱动安装及设置   更换主板修复grub 引导后,无法从Nvidia进入系统(光标闪烁), 可能是显卡驱动出了问题. 1. 进入BIOS设置, 从集成 ...