zoukankan      html  css  js  c++  java
  • 实现盒子水平移动

    /*
    参数:
    element 要运动的元素
    targetValue 目标值 数字
    speed 速度 数字
    */
    function move(element, targetValue, speed) {
    // 清除旧的定时器,flag在此表示的是上一次定时器的标识
    clearInterval(element.flag);
    // 动画
    // 开启一个定时器(创建一个定时器)
    element.flag = setInterval(function () {
    // 获取盒子原有的位置
    var v = element.offsetLeft;
    // 判断是否到达目标
    if (v == targetValue) {
    // 停止定时器
    clearInterval(element.flag);
    // console.log('定时器还在执行...');
    // 向后不要执行了
    return;
    }
    // 更新变量的值
    // 检测最后一步和速度计算是否能够到达目标,若差值小于速度,则说明是最后一步,并且最后一步不能再去和speed计算
    if (Math.abs(targetValue - v) < speed) {
    element.style.left = targetValue + 'px';
    } else {
    if (targetValue > v) {
    v = v + speed;
    } else {
    v = v - speed;
    }
    // 重新设置盒子的left样式属性值
    element.style.left = v + 'px';
    }
    }, 10);
    }
  • 相关阅读:
    android一个纠结的VFY错误
    icon在线编辑和查找工具
    增加Android可用内存
    android对大图片的缓存处理
    MySQL sql语句大全
    Canvas
    Docker 微服务教程
    Docker 入门教程
    项目管理
    JavaScript standard 代码规范的全文
  • 原文地址:https://www.cnblogs.com/lljun/p/11312128.html
Copyright © 2011-2022 走看看