zoukankan      html  css  js  c++  java
  • javascript动画效果之透明度(修改版)

    在编写多块同时触发运动的时候,发现一个BUG,

    timer = setInterval(show, 30);本来show是一个自定义函数,
    当设为timer = setInterval(show(one,two), 30);时,发现show里面的参数onetwo无法被导入,所以需要做以下代码改进和优化

    原版的html和css代码在这里javascript动画效果之透明度

    js代码如下

     1 <script>
     2         function $(id) {
     3             return typeof id === "string" ? document.getElementById(id) : id;
     4         }
     5 
     6         window.onload = function() {
     7 
     8             //自定义变量
     9             var div = $("div");
    10             var timer = null;
    11             var alpha = 30;
    12 
    13             //这里触发进入事件绑定一个无名函数
    14             div.onmouseenter = function() {
    15                 //里面为自定义函数,并传参数100为,达到100%的透明度
    16                 showDiv(100);
    17             }
    18 
    19             //同理触发离开事件
    20             div.onmouseleave = function() {
    21                 //同理传参数为30,达到30%的透明度
    22                 showDiv(30);
    23             }
    24 
    25             //自定义函数,obj为自定义参数
    26             function showDiv(obj) {
    27                 //当前只需要一个定时器,所以需要在每次开始前清除定时器
    28                 clearInterval(timer);
    29                 //定时器是通过传入的参数obj来自增自减
    30                 timer = setInterval(function() {
    31                     console.log(alpha);
    32                     if (alpha < obj) {
    33                         //第一次传参obj为100,alpha为30所以,alpha+10;
    34                         alpha += 10;
    35                     } else {
    36                         //第二次传参obj为30,而alpha为100,所以alpha-10;
    37                         alpha -= 10;
    38                     }
    39                     if (alpha == obj) {
    40                         //当相等时,则透明度为30或者100时,所以清除定时器
    41                         clearInterval(timer);
    42                     } else {
    43                         //老版本ie透明度增加或者减少
    44                         div.style.filter = 'alpha(opacity: ' + alpha + ');'
    45                         //其他浏览器
    46                         div.style.opacity = alpha / 100;
    47                     }
    48                 }, 30);
    49             }
    50 
    51 
    52         }
    53     </script>
  • 相关阅读:
    【转】shell中的内建命令, 函数和外部命令
    clear out all variables without closing terminal
    linux中shell命令test用法和举例
    解决vim粘贴时格式混乱的问题
    scp的两种方式
    source 命令的用法,是在当前bash环境下执行脚本文件
    angularjs中下拉框select option默认值
    redux 及 相关插件 项目实战
    JavaScript 获取当前时间戳
    v-if v-else-if v-else
  • 原文地址:https://www.cnblogs.com/WhiteM/p/6024488.html
Copyright © 2011-2022 走看看