在本次实例中，由于一般主流的浏览器对于透明度opacity最大值为1，但是在IE6最大值是100，此次例子是按主流浏览器的透明度来算的，所以定义的是小数，也可以定义为整数为单位，在运算的时候遇到主流的浏览器除以100就可以了。

实例：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>透明度动画</title>

<style>

body,div{

    margin:0;

    padding:0;

    }

.opacity_move{

    height:200px;

    width:200px;

    background:#936;

    opacity:0.3;

    }

</style>

<script>

window.onload = function (){

    var div = document.getElementById('opacity_move');

    div.onmouseover = function (){

        opacity_move(0.1, 1);

        }

    div.onmouseout = function (){

        opacity_move(-0.1, 0.3);

        }

    }

var timer = null;

var opacity = 0.3;

function opacity_move(speed, target){

    var div = document.getElementById('opacity_move');

    clearInterval(timer);

    timer = setInterval(function(){

    if(opacity.toFixed(1) == target){//浮点数之间的运算存在误差，会有很多位的小数，所以在判断是否等于一时需要四舍五入来计算，并且保留一位小数。

        clearInterval(timer);

        }

    else{

            opacity += speed;

            div.style.filter = 'alpha(opacity:' + opacity + ')';

            div.style.opacity = opacity;

        }

        }, 500);

    }

</script>

</head>

<body>

<div id="opacity_move" class="opacity_move"></div>

</body>

</html>

动画总结：

1.先设置一个定时器；

var timer = null;

2.清空定时器；

clrarInterval(timer);

3.打开定时器，并写功能；

timer = setInterval(function(){

　　/*功能*/

　　},1000);

4.判断相应条件关闭定时器。

timer = setInterval(function(){

　　if(/*条件*/){

　　　　clrarInterval(timer);

　　}

　　else{

　　　　/*功能*/

　　   }

　　},1000);

js动画实现透明度动画的更多相关文章

  1. js简单动画：匀速动画、缓动动画、多物体动画以及透明度动画

    主要实现以下几种简单的动画效果(其实原理基本相同): 1.匀速动画:物体的速度固定 2.缓动动画:物体速度逐渐变慢 3.多物体动画 4.透明度动画 效果实现: 1.匀速动画(以物体左右匀速运动为例) ...

  2. 第一百四十二节，JavaScript，封装库--运动动画和透明度动画

    JavaScript,封装库--运动动画和透明度动画 /** yi_dong_tou_ming()方法,说明 * * yi_dong_tou_ming()方法,将一个元素,进行一下动画操作 * 1,x ...

  3. js实现匀速运动及透明度动画

    1.html代码 <body> <div id="container"> <span id="btn"></span& ...

  4. js进阶 13 jquery动画函数有哪些

    js进阶 13 jquery动画函数有哪些 一.总结 一句话总结: 二.jquery动画函数有哪些 原生JavaScript编写动画效果代码比较复杂,而且还需要考虑兼容性.通过jQuery,我们使用简 ...

  5. js进阶 13-3 jquery动画显示隐藏，滑动，淡入淡出的本质是什么

    js进阶 13-3 jquery动画显示隐藏,滑动,淡入淡出的本质是什么 一.总结 一句话总结:分别改变display,高度,opacity透明度这三种属性. 1.fade系列函数有哪四个? fade ...

  6. 用js触发CSS3-transition过渡动画

    用js触发CSS3-transition过渡动画 经过这几天的工作,让我进一步的了解到CSS3的强大,原本许多需要js才能实现的动画效果,现在通过CSS3就能轻易实现了,但是CSS3也有自身的不足,例 ...

  7. Three.js基础探寻十——动画

    本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...

  8. js spin 加载动画（loading）

    js spin 加载动画 最近做页面ajax加载是又用到loading动画,还好有一个spin.js 具体的包大家可以去http://fgnass.github.com/spin.js/下载, 如果想 ...

  9. Android 动画-alpha(渐变透明度动画效果)

    今天苦于思索应用如何美观,首先从载入页面的第一眼开始,Android动画分为四种:alpha(渐变透明度),scale(渐变尺寸伸缩),translate(画面转换位置移动),rotate(画面转移旋 ...

随机推荐

  1. 如何:使用PicturBox实现类似淘宝网站图片的局部放大功能

    转载至http://xuzhihong1987.blog.163.com/blog/static/267315872011822113131823/ 概要: 本文将讲述如何使用PictureBox控件 ...

  2. HDU 5833 Zhu and 772002 (数论+高斯消元)

    题目链接 题意:给定n个数,这n个数的素因子值不超过2000,从中取任意个数使其乘积为完全平方数,问有多少种取法. 题解:开始用素筛枚举写了半天TLE了,后来队友说高斯消元才想起来,果断用模板.赛后又 ...

  3. bootstrap弹出提示窗口功能

    大家常用弹出提示成功或失败时候喜欢用alert,如果不用这个,写个弹窗又麻烦,bootstrap中就有个方法 alert("操作成功"); commonAlert("操作 ...

  4. 更新补丁Bind

    1.查询补丁版本信息 (1) rpm -qa|grep bind (2) dig @localhost version.bind 2.下载安装 BIND最新漏洞和升级解决办法 现在有非常多的公司的都有 ...

  5. IOS开发中与设计沟通之字体大小转换

    px:相对长度单位.像素(Pixel).pt:绝对长度单位.点(Point).1in = 2.54cm = 25.4 mm = 72pt = 6pc 具体换算是: Points Pixels Ems ...

  6. ShareSdk使用心得

    1. 微信和朋友圈:分享的时候设置了链接和图片,但就是不显示: 需要指明ShareType为WEB_PAGE 2. 需要完整添加 ShareSdk 的所需要的权限,不然分享闪退,并且不报异常:网络请求 ...

  7. 重温WCF之消息契约（MessageContract）（六）

    对于SOAP来说主要由两部分构成Header和Body,他们两个共同构成了SOAP的信封,通常来说Body保存具体的数据内容,Header保存一些上下文信息或关键信息.比如:在一些情况下,具有这样的要 ...

  8. Freemarker遍历map

    map的键尽量是字符串或者数字类型: <#if map?exists> <#list map?keys as key> ${key}---${map[key]} </#l ...

  9. JqueryEasyUI 解决IE下加载时页面错乱的问题 分类： JavaScript JqueryEasyUI 2014-09-20 09:50 545人阅读 评论(1) 收藏

    问题描述: 一直觉得jqueryeasyui在IE下的渲染效果不大好,尤其刚进入页面时的加载,页面会出现布局错乱,虽然是一闪而过,但是给用户的体验不好: 可以通过在页面onload时,增加一个遮罩层, ...

  10. jquery 仿百度搜索下拉框的插件

    转载地址:http://www.open-open.com/lib/view/open1420624048437.html 今天写了个下拉插件分享出来 效果: , 可以搜素,也可以使用上下键选择匹配出 ...