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

此外对于透明度有一点要说明一下，就是在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. Expect Command And How To Automate Shell Scripts Like Magic

    In the previous post, we talked about writing practical shell scripts and we saw how it is easy to w ...

  2. Qt应用开发所需

    Qt判断当前操作系统? 可使用宏判断,例如: #ifdef Q_OS_MAC //mac ... #endif #ifdef Q_OS_LINUX //linux ... #endif #ifdef ...

  3. SQLite中字段顺序和PAGE_SIZE对性能的影响

    1．背景 SQLite数据库中有1张表,该表含若干个字段,其中有1个字段为BLOB类型,且BLOB字段不是最后1个字段.表结构类似如下(col3为BLOB字段): T (col1 INTEGER,co ...

  4. 腾讯云IPv6技术拿了个一等奖！1.5亿人已经用上

    中国通信学会在其官网上公布了2019年中国通信学会科学技术奖的评选结果,腾讯云和中国移动通信集团,中国信息通信研究院.以及华为联合申报的“移动互联网IPv6技术攻关及规模应用”项目荣获今年科学技术一等 ...

  5. C#实现ActiveMQ消息队列

    本文使用C#实现ActiveMQ消息队列功能. 一.首先需要导入两个包,分别是:Apache.NMS 和 Apache.NMS.ActiveMQ 二.创建Winform程序实现生产者功能. 三.Pro ...

  6. 50道Redis面试题及答案整理，史上最全！

    在网上看到有关Redis的50道面试题,但是没有给出答案,之前我也在寻找这份Redis面试题的答案,今天特地把答案分享出来. 花了大量时间整理了这套Redis面试题及答案,希望对大家有帮助哈~ 弄明白 ...

  7. 获取html 中的内容 将前台的数据获取到后台 用 jquery 生成一个 form表单 提交数据

    使用js创建一个form表单 ,使用post上传到后台中 下面是代码.在获取html内容的时候使用了js节点来获取内容. parent:父节点.上一级的节点 siblings:兄弟节点.同一级别的节点 ...

  8. 虚拟化x86的三种途径

    虚拟化x86的三种途径 作者:缪天翔链接:https://www.zhihu.com/question/20145026/answer/34527331 x86上的全系统虚拟化有三种主要的途径: 二进 ...

  9. 运维利器1-supervisor

    supervisor用来管理进程服务很方便 优点: 1.重启方便,无抖动感 2.可以分组管理进程 3.加入系统自动启动后,可以开机自启,程序异常退出能自动启动 操作: 1.在python沙箱环境下操作 ...

  10. Java自学-类和对象 单例模式

    Java的饿汉式与懒汉式单例模式 LOL里有一个怪叫大龙GiantDragon,只有一只,所以该类,只能被实例化一次 步骤 1 : 单例模式 单例模式又叫做 Singleton模式,指的是一个类,在一 ...