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

此外对于透明度有一点要说明一下，就是在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. 【Gamma】 Phylab 发布说明

    Phylab Gamma阶段发布说明 一.发布地址 网站:Phylab GitHub Release: WhatAHardChoice/Phylab Gamma版本 二.新功能 1. 控制台完全接入 ...

  2. 【Linux脚本学习案例】shell脚本多通道并发执行存储过程

    使用shell脚本开启多个子任务并发调用存储过程,存储过程按照通道处理数据,提高效率: 外层调用脚本: #!/bin/sh #------------------------------------- ...

  3. ASP.NET Core WebApi基于Redis实现Token接口安全认证

    一.课程介绍 明人不说暗话,跟着阿笨一起玩WebApi!开发提供数据的WebApi服务,最重要的是数据的安全性.那么对于我们来说,如何确保数据的安全将会是需要思考的问题.在ASP.NET WebSer ...

  4. 【视频开发】IR-CUT作用

    自然界存在着各种波长的光线,通过折射人眼能看到不同颜色的光线,这就是光线的波长不同所导致的.其实还有许多光线是人眼看不到的,人眼识别光线的波长范围在320nm-760nm之间,超过760nm的光线人眼 ...

  5. etcd备份与恢复

    目录 备份 恢复 备份 通常而言,etcd都是集群部署,其实并不需要额外备份,但实在是架不住猪队友误操作. 写一个简单的etcd备份脚本如下: #!/bin/bash set -e exec > ...

  6. vivado sdx 綜合報錯ERROR: [SdsCompiler 83-5019] Exiting sds++ : Error when calling 'aarch64-linux-gnu-g++ -c

    ERROR: [SdsCompiler 83-5019] Exiting sds++ : Error when calling 'aarch64-linux-gnu-g++ -c 主函數 添加 頭文件 ...

  7. apache添加ssl协议实现用户认证

    目标 1对服务器的访问由http改为https, 2仅有证书的客户端可以访问服务器, 3.通过服务器端的配置,可以停用某个客户端的证书. 一 Apache服务器相关配置: 在../apache/con ...

  8. ubuntu docker 下mongodb集群和分片

    首先我们计划启动了三个mongo服务:master,salve,arbiter 1.准备工作 新建文件夹如图(每个文件夹下面有db和configdb文件夹): 生成认证文件并修改权限 openssl ...

  9. PowerBI开发 第四篇：DAX 表达式基础

    DAX 表达式主要用于创建度量列(Measure),度量值是根据用户选择的Filter和公式,计算聚合值,DAX表达式基本上都是引用对应的函数,函数的执行有表级(Table-Level)上下文和行级( ...

  10. C#安装和卸载windowsService的bat指令

    只需新建2个文本文档,将2个指令分别复制进去,再将txt格式改为bat格式,以管理员身份运行 安装指令 %SystemRoot%\Microsoft.NET\Framework\v4.0.30319\ ...