《js动画效果》之透明度动画

最新推荐文章于 2024-10-14 10:36:20 发布
最新推荐文章于 2024-10-14 10:36:20 发布
阅读量591 收藏
点赞数
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/raosheng1993/article/details/45419677
版权


js

学习资源来自慕课网《js动画效果》：http://www.imooc.com/learn/167。

例子：初始透明度值为30，鼠标移上改变物体的透明度到100，鼠标移出模块区域将透明度由100变为30

刚开始我没想通为什么要那么复杂将其也用定时器来实现，鼠标移上时，直接将透明度的值设为100，移出时设为30就好了呀。后来比较了两种做法（采用定时器和不采用定时器）我才发现，我忽略了一个重要的现象，采用定时器才能更好的展示物体变化的过程，如图-1所示，而不用定时器，直接从将物体透明度从一个值变成另一个值，虽然简单，但是视觉上给人的感觉太突兀，因为变化太快了，如图-2所示，对于用户体验来说不好。老师把课程标题命名为”透明度动画“而不是”透明度变化“，看来是有理由的呀。



图-1 物体透明度”动画“（采用setInterval()实现）



图-2 物体透明度”变化“


此例也属于匀速运动类型，其匀速改变的是物体的透明度, 练习代码如下：

[html] view plain copy print ? 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE HTML>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="utf-8">  
  5.         <style type="text/css">  
  6.         *{  
  7.             padding:0;  
  8.             margin:0;  
  9.         }  
  10.         #box{  
  11.             width:200px;  
  12.             height:200px;  
  13.             background:red;  
  14.             filter:alpha(opacity:30);  
  15.             opacity:0.3;  
  16.         }  
  17.       
  18.         </style>  
  19.         <script type="text/javascript">  
  20.   
  21.           /*window.onload = function(){  
  22.             var divElem = document.getElementById("box");  
  23.             divElem.onmouseover = function(){  
  24.                 divElem.style.filter = "100";  
  25.                 divElem.style.opacity = 1 ;  
  26.             };  
  27.             divElem.onmouseout = function(){  
  28.                 divElem.style.filter = "30";  
  29.                 divElem.style.opacity = 0.3 ;  
  30.             }  
  31.           }*/  
  32.   
  33.         //使用定时器可以使动画达到更好的效果，突出透明度渐变的过程，可让变化不显得那么突兀  
  34.         window.onload = function(){  
  35.             var divElem = document.getElementById("box");  
  36.             divElem.onmouseover = function(){  
  37.                 changeOpacity(100);  
  38.             };  
  39.             divElem.onmouseout = function(){  
  40.                 changeOpacity(30);  
  41.             }  
  42.         }  
  43.   
  44.         var timer = null;  
  45.         var opacityValue = 30;  
  46.         function changeOpacity(value){  
  47.             var divElem = document.getElementById("box");  
  48.             clearInterval(timer);  
  49.               
  50.             timer = setInterval(function(){  
  51.                 var speed = 0;  
  52.                 if(opacityValue > value){  
  53.                     speed = -10;  
  54.                 }else{  
  55.                     speed = 10;  
  56.                 }  
  57.                 if(opacityValue == value){  
  58.                     clearInterval(timer);  
  59.                 }else{  
  60.                     opacityValue += speed;  
  61.   
  62.                     //兼容浏览器  
  63.                     divElem.style.filter = "alpha(opacity:"+opacityValue+")";  
  64.                     divElem.style.opacity = opacityValue/100 ;  
  65.                 }  
  66.   
  67.             },100);  
  68.         }  
  69.         </script>  
  70.     </head>  
  71.     <body>  
  72.         <div id="box"></div>  
  73.     </body>  
  74. </html>  

小结：

通过 本例子的练习，我对匀速动画有了更好的理解，匀速动画的关键是改变 left, top, height, width, opacity的值，采用定时器setInterval()来实现。在合适的场景运用好动画，可以让用户体验更佳。

ruby小酱
关注
专栏目录
JS基础-特效篇-透明度动画
weixin_45799003的博客
05-12 382
1.设置opacity。1-0。高版本用：filter。alpha()。 2.特殊属性特殊处理： 1）页面元素和样式 <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } body {
js动画（2）——透明度动画
爱吃番茄的西红柿的专栏
02-18 641
透明度变化效果 body{ margin: 0px; padding: 0px; } .redb{ width:200px; height: 200px; background: red; filter:alpha(opacity=30); opacity: 0.3; } window.onload
Js动画-改变透明度（二）
依稀梦兮的博客
04-02 517
JS改变透明度 //Description:鼠标移入颜色变深，移出变淡 var timer=null; var alpha=30; function startMove(target) { var Div=document.getElementById("div1"); clearInterval(timer); timer=setInterval ( ...
JS透明度变化动画
DiDaDi的博客
08-16 520
透明度变化动画
JS实现的透明度渐变动画效果示例
10-18
JS实现的透明度渐变动画效果示例主要涉及了以下几个知识点： 1. HTML和CSS基础：示例代码中使用了HTML来构建页面结构，包括一个带有id="opbtn"的div元素，并使用CSS来定义这个div的样式。其中红色背景的div元素具有...
jQuery实现鼠标响应式透明度渐变动画效果示例
11-26
本文实例讲述了jQuery实现鼠标响应式透明度渐变动画效果。分享给大家供大家参考，具体如下： 先来看看运行效果： 具体代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> &...
使用ArcGIS JS API与Tween.js实现图层闪烁动画效果（源码）.zip
03-19
在本文中，我们将深入探讨如何使用ArcGIS JavaScript API（JS API）与Tween.js库来创建图层闪烁动画效果。这是一个非常实用的技术，特别是在地理信息系统（GIS）应用中，可以吸引用户的注意力或者突出显示特定的地理...
js动画--透明度变化
aizhubian7623的博客
01-08 147
对于设置元素的透明度的变化。主要思想也是通过一个定时器来控制的。 此外对于透明度有一点要说明一下，就是在IE中我们在css中设置透明度的方式filter:alpha(opacity:value)其中value值从0~100; 在火狐中透明度可以通过opacity：value来设置，其中value=0~1. 代码如下： html <!DOCTYPE html> ...
前端--js实现透明度动画效果
need_just_word的博客
12-27 1465
这个效果的实现和我的上一篇博客一样，主要还是应用setInterval(fun(),milltime);
js动画--封装透明度
aizhubian7623的博客
01-11 86
这一章我将讲述一些如何将透明度的变化也封装到调用函数中，对于前面几节课的介绍，已经将基本的属性封装到函数中了，宽，长等属性。关于透明度的变化还是有一点区别的，这一章我将封装透明度 先创建一个div <!DOCTYPE html> <html> <head> <title>js动画事件</title> <li...
原生JS透明度动画案例
温壁
11-09 299
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>透明度动画</title> </head> <style> *{margin: 0;pa.
js动画效果之透明度变化
伊人笑桃花酒的博客
04-11 782
此案例总结的是鼠标移入框内透明度渐变的效果，使用原生js、jquery与css3 3种方法分别实现。照常下面是效果图： 下面是js的实现代码：window.onload=function(){ var odiv=document.getElementById("mydiv"); odiv.onmouse
JavaScript动画函数增加属性，函数，层级，透明度的封装
流楚丶格念的博客
08-21 4076
文章目录获取元素计算后的属性元素增加任一属性增加多个属性增加多个属性和回调函数增加多个属性，回调函数，层级，透明度 获取元素计算后的属性元素 function getStyle(element,attr) { //判断浏览器是否支持这个方法 return window.getComputedStyle? window.getComputedStyle(element,null)[attr]:element.currentStyle[attr]; } 增加任一属性 <!DOCTY
js学习笔记（js改变css多属性值，多组动画，透明度动画）
dawanhjiao的博客
05-29 425
js改变css多属性值
动画总结【Android】
.....
10-24 370
Android中提供了两种实现动画的方式 纯编码的方式 Xml配置的方式 单一动画(Animation) 复合动画(AnimationSet) 坐标类型： Animation.ABSOLUTE绝对坐标 Animation.RELATIVE_TO_SELF相对自己 Animation.RELATIVE_TO_PARENT相对父容器 setDuration(long 微秒):
问题小结（17）-透明度控制动画alpha
agods--足迹
07-26 946
简单示例： <alpha android:fromAlpha="0.1" android:toAlpha="1.0" android:duration="3000" /> <!-- 透明度控制动画效果 alpha 浮点型值： fromAlpha 属性为动画起始时透明度 toAlpha 属性为动画结束时透明度 说明:
JS图片动画效果实现：循环与速度控制指南
最新发布
weixin_33480380的博客
10-14 556
本文还有配套的精品资源，点击获取 简介：本教程将深入探讨如何使用JavaScript创建图片动画，包括循环播放和速度控制。文章首先介绍了HTML5 <img> 标签的基础用法，然后详细说明如何利用CSS属性和JavaScript定时器来实现图片的移动和旋转动画。接着讲解了如何通过数组和循环语句实现图片的循环播放，并展示了如何通过调整定时器间隔时间来...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值