zoukankan      html  css  js  c++  java
  • 原生JS封装运动框架。

    //获取非行内样式
    function getStyle(obj,attr){
    if(obj.currentStyle){ return obj.currentStyle[attr]; }else{ return getComputedStyle(obj,1)[attr]; } } //运动框架 function sport(obj,json,fn){ //回调函数:把一个函数以一个参数的形式传递给另一个函数时,传递的这个参数就叫做回调函数 //1. 清除上一次的计时器 clearInterval(obj.timer); //2. 开启新的计时器 obj.timer = setInterval(function(){ //1. 设置开关 var stop = true; //2. 遍历json for(var attr in json){ //1. 获取当前属性值 //透明度和其它属性 if(attr === 'opacity'){ var cur = parseInt(parseFloat(getStyle(obj,attr)) * 100); }else{ var cur = parseInt(getStyle(obj,attr)); } //2. 计算速度 var speed = (json[attr] - cur) / 8; // 0.75 // -0.75 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //3. 判断属性是否到达目标值,没有到达,开关为false if(cur != json[attr]){ stop = false; } //4. 设置运动 if(attr === 'opacity'){ obj.style.opacity = (cur + speed) / 100; obj.style.filter = 'alpha(opacity=' + (cur + speed) + ')'; }else{ obj.style[attr] = cur + speed + 'px'; } } //3. 停止计时器 if(stop){ clearInterval(obj.timer); if(typeof fn === 'function'){ fn(); } } },30) }
  • 相关阅读:
    11. Container With Most Water
    9. Palindrome Number
    375. 猜数字大小 II leetcode java
    leetcode 72 编辑距离 JAVA
    73. 矩阵置零 leetcode JAVA
    快速排序 JAVA实现
    63. 不同路径 II leetcode JAVA
    重写(override)与重载(overload)
    62 不同路径 leetcode JAVA
    leetcode 56 合并区间 JAVA
  • 原文地址:https://www.cnblogs.com/PrayLs/p/10411252.html
Copyright © 2011-2022 走看看