JS实现透明度渐变动画

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS实现透明度渐变动画</title>
  <style type="text/css">
  *{margin:0;padding:0;}
  #box{width:200px;height:200px;background-color:red;filter:alpha(opacity=30);opacity:0.3;}
  </style>
  <script type="text/javascript">
    window.onload = function(){
      var box = document.getElementById(‘box‘);
      box.onmouseover = function(){
        changeopa(100);
      }
      box.onmouseout = function(){
        changeopa(30);
    }
  }

    var timer;
    var opa=30;

    function changeopa(aim){
      var box = document.getElementById(‘box‘);
      clearInterval(timer);
      timer=setInterval(function(){
        if(opa==aim){
          clearInterval(timer);
        }else{
          opa+=(aim-65)/3.5;
          box.style.opacity=opa/100;
          box.style.filter=‘alpha(opacity=‘+opa+‘)‘;
          console.log(opa);
        }
      },30)
    }

  </script>
</head>
<body>
  <div id="box"></div>
</body>
</html>

遇到的问题及注意事项:

1、浮点运算进行多次后会出现误差,尽量使用整数运算。

时间: 2024-11-10 13:07:37

JS实现透明度渐变动画的相关文章

android透明度渐变动画

AlphaAnimation anim01 = new AlphaAnimation(02.f, 0.1f); //动画持续的时间 anim01.setDuration(500); //设置动画持续的次数 anim01.setRepeatCount(AlphaAnimation.INFINITE); //应该做什么当它到达尽头.应用此设置只在重复计数大于0或无限.默认为重启. anim01.setRepeatMode(AlphaAnimation.REVERSE); //开启动画 mArrpw0

android动画的透明度渐变、旋转动画、缩放动画、评议动画

这是我在学习android的时候做的一个小小的东西可以实现图片的旋转.平移.缩放.透明度的渐变 首先我们要创建一个android的项目 在自己的drawable-mdpi中添加自己的图片 然后在res目录中,创建一个名称是anim(动画)的目录,并且在该目录中实现图片的操作 首先是anim_alpha.xml定义一个实现透明渐变的动画该动画实现的是完全不透明-->完全透明---->完全不透明 <pre name="code" class="html"

JS实现多物体动画

一.多物体边栏弹出动画 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>多物体边栏弹出动画</title> <style type="text/css"> *{margin:0;padding:0;} div{width:200px;height:200px;backgro

js函数封装,使一个obj的透明度渐变,淡入淡出(兼容IE)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

UI基础--动画(缩放动画, 渐变动画, 左右振动, 移动动画, 组合动画)(封装好)

创建一个CAAnimation的类别 CAAnimation+HCAnimation .h #import <QuartzCore/QuartzCore.h> #import <UIKit/UIKit.h> typedef NS_ENUM(NSInteger, Axis) { AxisX = 0, ///< x轴 AxisY, ///< y轴 AxisZ ///< z轴 }; typedef NS_ENUM(NSInteger, ShakeDerection) {

动画效果(一)-渐变动画

第1节 概述 在安卓系统中,为了界面或者其中的组件在切换.改变的时候显得自然生动.具有流动性的美感,就给它们添加了动画的效果. 例如图片切换的时候,前一张图片淡出,后一张图片淡入. 动画分了三类: frame动画(逐帧动画). property动画(属性动画). tween动画(渐变动画). 逐帧动画有点像播放电影,它把很多图片串起来,按照顺序一张一张显示,通过播放形成动画效果: 属性动画是对控件某个属性使用的动画,例如一个按钮的宽度要从窄设置到宽,而我们希望它的宽度调整的时候,能看到它从窄到宽

Android之带渐变动画的欢迎界面

这是一个简单的例子,主要功能是在欢迎界面是用一个渐变动画,当动画播放完成后,跳转到主界面中去. 首先需要在res文件夹下新建一个anim文件夹,这个文件夹用来存放动画定义的xml文件,渐变动画的内容是: <?xml version="1.0" encoding="UTF-8"?> <!-- alpha表示渐变动画 duration设置动画播放时长 fromAlpha表示动画开始时的透明度 toAlpha表示动画结束时的透明度 (0表示完全透明 1表

一种高斯模糊渐变动画的实现-b

关于高斯模糊的方式有很多种,但是如果需要模糊渐变,那么对这种高斯模糊算法的性能要求是比较高的,今天这里重点不讨论算法,只是提供一个动画实现的思路.动画效果如下: 高斯模糊渐变动画 //高斯模糊 -(UIImage *)boxblurImage:(UIImage *)image withBlurNumber:(CGFloat)blur {        if (blur < 0.f || blur > 1.f) {              blur = 0.5f;        }      

code实现透明度渐变和颜色渐变的view

最近用code写了些view上的渐变效果,使得app的UI特效不必全部依赖美工出的图片. 效果如下: 主要用到了Layer上的渐变层,核心代码如下,关于CALaer的使用可参考 //Transparent Gradient Layer - (void) insertTransparentGradient { UIColor *colorOne = [UIColor colorWithRed:(33/255.0) green:(33/255.0) blue:(33/255.0) alpha:0.0