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

此外对于透明度有一点要说明一下，就是在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. Spring boot2X集成zuul与consul实现负载均衡和反向代理

    zuul 是netflix开源的一个API Gateway 服务器 所有从设备或网站来的请求都会经过Zuul到达后端的Netflix应用程序. 作为一个边界性质的应用程序,Zuul提供了动态路由.监控 ...

  2. cad.net GeometricExtents出错了 调试看不到文字

     飞诗: 难道块不能取GeometricExtents   GeometryExtentsBestFit 用这个解决    GeometryExtentsBestFit 对动态块也不准   com方式 ...

  3. sde.layers表的eflags字段解析

    ArcSDE地理数据库,虽然经常在用,但仅限于了解功能层面的东西,其内部实现机制对我来说是个黑盒子.因为想了解register with geodatabase操作在数据库层面到底发生了什么,我分析了 ...

  4. Linux常用基础（三）

    1.gcc编译器 (1)简介 前期的GCC是GNU C Compiler,仅仅用于C语言的编译,经过多年的发展,现在的GCC为GNU Compiler Collection,并且目前支持多种编程语言的 ...

  5. Linux下查看.so和可执行文件是否debug编译

    如何判断一个.so是否是debug编译的? 如果用此方法:用file来查看一个.so, 根据是否包含”not stripped”来判断该.so是否是debug编译的.然而stripped/not st ...

  6. Android.mk文件官方使用说明

    本页介绍了 ndk-build 所使用的 Android.mk 编译文件的语法. 概览 Android.mk 文件位于项目 jni/ 目录的子目录中,用于向编译系统描述源文件和共享库.它实际上是编译系 ...

  7. 破解Charles4.2.7版本

    软件下载地址:请点我 密码:sats dmg软件解密密码是:xclient.info 激活方法 1.将 Charles.app 拖至 应用程序 文件夹 2.将 keygen.jar 拖至 桌面 3.打 ...

  8. 百度前端技术学院task13源代码

    突然发现只看书不练习也是不行的,这么简单的我竟然都不会写了. 要注意innerHTML,innerText和outText之间的异同. 同时也要会使用DOM2的添加事件,移除事件等 <!DOCT ...

  9. 【题解】Luogu P5291 [十二省联考2019]希望

    ytq鸽鸽出的题真是毒瘤 原题传送门 题目大意: 有一棵有\(n\)个点的树,求有多少方案选\(k\)个联通块使得存在一个中心点\(p\),所有\(k\)个联通块中所有点到\(p\)的距离都\(\le ...

  10. bootstrap vs react

    我觉得react是js 框架,而bootstrap只是一个前端ui框架 bootstrap:基于html的UI构建工具: react:基于组建的工程构建方式: