对于设置元素的透明度的变化。主要思想也是通过一个定时器来控制的。

此外对于透明度有一点要说明一下，就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中value值从0~100;

在火狐中透明度可以通过opacity：value来设置，其中value=0~1.

代码如下：

html

<!DOCTYPE html>

<html>

<head>

<title>js动画事件</title>

<link href="move.css" rel="stylesheet" type="text/css"/>

<script type="text/javascript" src="move.js"></script>

</head>

<body>

<div id="div1">

</div>

</body>

</html>

css

*{

    margin:0px;

    padding:0px;

}

#div1{

    width:200px;

    height:200px;

    background-color:red;

    border:1px solid #eeddcc;

    opacity:0.3;

    filter:alpha(opacity:30);

}

js

var timer

window.onload=function(){

    var div1=document.getElementById("div1");

    div1.onmouseover=function(){

        startchange(100);

    };

    div1.onmouseout=function(){

        startchange(30);

    };

}

var alpha=30;

function startchange(value){

    var div1=document.getElementById("div1");

    clearInterval(timer);

        var speed=0;

    if(value>alpha){

            speed=10;

        }else if(value<alpha){

            speed=-10;

        }

    timer=setInterval(function(){

        if(value==alpha){

            clearInterval(timer);

        }else{

            alpha+=speed;

            div1.style.filter='alpha(opacity:'+alpha+')';//这个地方的书写千万要注意了！！！，这是支持IE方式的

            div1.style.opacity=alpha/100;//这里要除以100，将opacity的值降到0~1之间，这是支持火狐方式的。

        }

    },50)

}

js动画--透明度变化的更多相关文章

  1. js动画--封装透明度

    这一章我将讲述一些如何将透明度的变化也封装到调用函数中,对于前面几节课的介绍,已经将基本的属性封装到函数中了,宽,长等属性.关于透明度的变化还是有一点区别的,这一章我将封装透明度 先创建一个div & ...

  2. js渐隐渐现透明度变化淡入淡出轮播图

    js渐隐渐现透明度变化淡入淡出轮播图.焦点图 一些广告banner展示常见. (附件) <!DOCTYPE html> <html> <head> <meta ...

  3. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  4. js动画学习（一）

    一.运动框架实现思路 1.匀速运动(属性值匀速变化)(改变 left, right, width, height, opacity 等): 2.缓冲运动(属性值的变化速度与当前值与目标值的差成正比): ...

  5. js动画（一）

    终于放寒假了,哈哈哈,然后,也不准备闲着吧,就是再熟悉一下旧的东西,然后把新的东西也拿来分享一下,自己也准备好了再这个寒假 好好的提高一下自己,哎,菜鸟一枚,真正去实战了,发现自己手上的武器太少了,所 ...

  6. js动画之轮播图

    一. 使用Css3动画实现 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  7. 循序渐进BootstrapVue，开发公司门户网站（2）--- 使用wow.js动画组件以及自定义的CSS样式处理动态效果

    在我们开发的页面中,让页面有一些动画效果,可以让页面更加有吸引力,只要不是处理太过,一般人还是希望有一些动态效果,如滚动动画加载,悬停处理变化等效果,本篇随笔介绍使用wow.js动画组件以及自定义的C ...

  8. js动画之简单运动二

    透明度的变化 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  9. css动画特效与js动画特效（一）------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

随机推荐

  1. GitLab修改root用户密码

    GitLab是一个私有的Git仓库,具有较好的项目管理和用户管理能力.对于普通用户而言,通过系统的重置密码,接受邮件即可解决,可是GitLab的管理员账号,缺省的邮箱是一个不存在的邮箱地址,所以没有办 ...

  2. ORM之Dapper

    ORM之Dapper 一.下载安装: nuget 搜索dapper安装 二.使用: 三.优缺点: 优点: 1.开源.轻量.单文件(代码就一个SqlMapper.cs文件,编译后就40K的一个很小的Dl ...

  3. SQL join 三种扩展用法

    以前学习,只知道  LEFT JOIN.RIGHT JOIN.INNER JOIN.FULL  JOIN,共四种集合,然而加上一些条件,可以组合成另外三种集合,直接上图.

  4. [转帖]kafka 如何保证数据不丢失

    kafka 如何保证数据不丢失 https://www.cnblogs.com/MrRightZhao/p/11498952.html   一般我们在用到这种消息中件的时候,肯定会考虑要怎样才能保证数 ...

  5. kubernetes支持local volume

    目录 local volume 创建一个storage class 静态创建PV 使用local volume PV 动态创建PV local volume kubernetes从1.10版本开始支持 ...

  6. FusionInsight大数据开发---Hive应用开发

    Hive应用开发 了解Hive的基本架构原理 掌握JDBC客户端开发流程 了解ODBC客户端的开发流程 了解python客户端的开发流程 了解Hcatalog/webHcat开发接口 掌握Hive开发 ...

  7. ubuntu开机自动挂载硬盘

    1. 查看硬盘信息 df -h 命令找到目标硬盘(可根据 磁盘分区(路径).分区大小.挂载点  确认/定位 目标) sudo blkid 命令找到目标硬盘的UUID,(关注一下分区的格式化类型,如ex ...

  8. 阿里云服务器连接ftp服务（软件的使用）

    首先你需要有一个阿里云的ECS服务器 开通了宽带之后,ECS服务器就可以上网了 可以在本地电脑cmd控制台运行mstsc.exe启动远程桌面连接 windows+R 计算机名输入ECS服务器的公网ip ...

  9. C# Winform 打印控件PrintDocument

    由于本着节约的原则,这里的打印都只是保存为.oxps格式的文件. 在我调试时每次打印完成后,窗体都会自己闪退. 在网上并没有相关资料,经过加入断点确认问题在 private void btnPrint ...

  10. 比较器Comparable和Comparator

    在java中要实现自定义类的比较,提供了以下两个接口: Comparable(内部排序) int compareTo(Object obj);返回值为int,默认升序排序 Comparator(外部排 ...