Maison > interface Web > js tutoriel > 基于原生js淡入淡出函数封装(兼容IE)

基于原生js淡入淡出函数封装(兼容IE)

高洛峰
Libérer: 2016-12-09 15:08:34
original
1013 Les gens l'ont consulté

在开发的过程中,我们要做淡入淡出效果的话,我们完全可以使用jQuery的fadeTo()方法。但是我们的目的不只是会用,而是理解程序底层的逻辑。这篇文章主要就是利用原生的javascript实现淡入淡出的效果。

构建框架,基本没难度。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>透明度函数的封装</title>
  <style type="text/css">
   #box{
    width: 200px;
    height: 200px;
    background: red;
    margin: 50px auto;
    opacity: .3;
    filter: alpha(opacity:30);
   }
  </style>
 </head>
 <body>
  <div id="box"></div>
  <script src="toumingdu.js" type="text/javascript" charset="utf-8"></script>
 </body>
</html>
Copier après la connexion

编写javascript部分,主要难点是changeOpacity()函数。

window.onload = function (){
 var box = document.getElementById(&#39;box&#39;);
 box.onmouseover = function (){
  changeOpacity(this,100);
 }
 box.onmouseout = function (){
  changeOpacity(this,30);
    
 }
}
/**
 *
 * @param {Object} box 要变化透明度的元素
 * @param {Object} target 透明度的目标值(100为最高)
 */
function changeOpacity(box,target){
 var opa;
 var speed;
 if(box.currentStyle){
  //判断浏览器类型,此类型为IE浏览器,即使IE不支持opacity属性,但是仍然可以获取值
  opa = box.currentStyle[&#39;opacity&#39;]*100;
 }
 else{//其他浏览器
  opa = getComputedStyle(box,false)[&#39;opacity&#39;]*100;
 }
 //透明度每次变化的值(步长),根据目标值和当前值的差来决定步长的正负
 target-opa>=0?speed=1:speed=-1;
 clearInterval(box.timer);
 box.timer = setInterval(function (){
  //目标值和当前值差值的绝对值大于等于步长的绝对值,设置透明度为当前值加步长
  if(Math.abs(target-opa)>=Math.abs(speed)){
   box.style.opacity=(opa+speed)/100;
   box.style.filter=&#39;alpha(opacity:&#39;+(opa+speed)+&#39;)&#39;;
  }
  //目标值和当前值差值的绝对值小于步长的绝对值,剩余的距离一步到位,
  //设置透明度直接为目标值,同时清除定时器
  else{
   box.style.opacity=target/100;
   box.style.filter=&#39;alpha(opacity:&#39;+target+&#39;)&#39;;
   clearInterval(box.timer);
  }
  //直接对透明度参数进行加步长的运算,避免每次都要获取当前透明度
  opa=opa+speed;
 },30);
}
Copier après la connexion

   

这个透明度函数的原理在大体上是跟运动函数相同的。总结为三步:
1、获取当前值,根据目标值和当前值确定步长;
2、变化的过程,每次变化一个值(渐变动画和透明度其步长为不同的值,而匀速动画和透明度步长为定值);
3、判断是否达到目标值,达到则清除定时器,结束。

所以如果原理弄不清楚可以看一下另一篇文章javascript匀速动画和缓冲动画。
而在理解原理的情况下最大的难点应该是当前透明度的获取了(赋值比较简单)。获取透明度的值我们要考虑两种情况:

1、IE,虽然在在IE下不支持opacity属性,但是我们是可以通过box.currentStyle['opacity']获取到它的值的,同时我们在写入的时候也会将给opacity的值写入css中,尽管IE不会因为opacity值的改变而变化透明度。
2、其他浏览器,其他浏览器是支持opacity属性,所以我们操作相对简单了许多,写入和读取都针对opacity即可。

接下来细讲在IE浏览器中的操作:

首先我们的css文件中有两个属性值在我们的操作中是有用的  opacity: .3;   filter: alpha(opacity:30);    显然我们很难获取filter属性中的opacity值(我不会!),但是如果我们使用currentStyle来获取opacity是比较简单的。所以我进行了测试发现,尽管IE不支持这个属性,但是这个属性值的读取和写入时完全没问题的,所以,问题就迎刃而解了!我们通过opacity可以读取当前透明度,然后通过filter改变透明度,同时,我们改变opacity的值(不仅是为了兼容其他浏览器,同时我们写入以后IE浏览器中在下次移入的时候还可以获取当前的透明度,否则的话获取的是初始的opacity值)。那么下面不就和动画那个问题一样了?


Étiquettes associées:
js
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal