在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动画效果之透明度的更多相关文章

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

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

  2. Javascript动画效果（三）

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

  3. Javascript动画效果（一）

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

  4. Javascript动画效果（二）

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

  5. Javascript动画效果（四）

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

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

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

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

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

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

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

  9. javascript动画效果

    之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试 <!DOCTYPE html> ...

随机推荐

  1. 【Python】协程实现生产者消费者模型

    协程的实现为协作式而非抢占式的,这是和进程线程的最大区别.在Python中,利用yield和send可以很容易实现协程. 首先复习下生成器. 如果一个函数使用了yield语句,那么它就是一个生成器函数 ...

  2. #js#简单的在线计算器

    啊因为懒得去找素材了,所以做了一个仿win10计算器的灰白色计算器. 参考:http://www.html5tricks.com/jquery-calculator.html HTML源码: < ...

  3. 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版

    软件名称: 世界之窗(TheWorld)浏览器 3.6.1.0 简体中文绿色版软件语言: 简体中文授权方式: 免费软件运行环境: Win7 / Vista / Win2003 / WinXP 软件大小 ...

  4. 一箭N雕：多任务深度学习实战

    1.多任务学习导引 多任务学习是机器学习中的一个分支,按1997年综述论文Multi-task Learning一文的定义:Multitask Learning (MTL) is an inducti ...

  5. 推荐几个好的 Maven 常用仓库网址

    注意,以下内容转载自:推荐几个好的 Maven 常用仓库网址 Maven 确确实实是个好东西,用来管理项目显得很方便,但是如果是通过 Maven 来远程下载 JAR 包的话,我宿舍的带宽是4兆的,4个 ...

  6. Anaconda 安装概要

    Anaconda 作为开源项目,集成了Python的大部分第三方包,如:pandas,Numpy,scipy等. 1. 下载地址:https://www.continuum.io/downloads ...

  7. oracle数据库 参数open_cursors和session_cached_cursor详解！

    open_cursors 每个session(会话)最多能同时打开多少个cursor(游标) session_cached_cursor 每个session(会话)最多可以缓存多少个关闭掉的curso ...

  8. HDU 4291 A Short problem(2012 ACM/ICPC Asia Regional Chengdu Online)

    HDU 4291 A Short problem(2012 ACM/ICPC Asia Regional Chengdu Online) 题目链接http://acm.hdu.edu.cn/showp ...

  9. Oralce生成前N年的年数据

    今天做一个统计报表的时候正好碰到这个问题,原来,一般是通过后台代码来生成.现在直接通过oracle来生成,记录一下. 方法一: SELECT YEAR FROM ( , UNION SELECT TO ...

  10. WPF之DatePicker使其只能选择日期，不能输入日期

    <DatePicker.Resources>  <Style TargetType="DatePickerTextBox">           <S ...