注释:可以用于盒子弹出,收回效果,比如:某东的产品详情页,侧边有购物车、优惠卷等,鼠标经过弹出效果
可以看这个网址使用案例:https://www.cnblogs.com/jq-growup/p/15609471.html
   function box_mv(element,long,goback){//此时elemt是以个对象, 自定义每个元素的定时器
         clearInterval(element.timer); //先去除原有定时器,只保留当前定时器,
         element.timer =   setInterval( function(){ //elemt.timer  给elemt自定一个属性  旧写法,var定义变量很占用内存,
                                                           //如果调用多次,则要开辟多个内存空间,之分占用内存
         var step = (long - element.offsetLeft) /10; //前进:步长值需要取整数,不然到不了最终目标,那么将小数取临近最大的整数math.ceil
         step = step>0?Math.ceil(step):Math.floor(step) ; //后退取最小的值math.floor
         if(element.offsetLeft == long){
           clearInterval(element.timer);
              if(goback){
                  goback()
              }
                    // callback && callback();
                }
          element.style.left = element.offsetLeft + step + 'px';
                //匀速走 element.offsetLeft + 固定速度 + 'px';
                //逐渐缓慢走  element.offsetLeft + 变速 + 'px'  //变速公式:(目标距离 - 现在的距离)/10
                //                                                  (也就是总长-element.offsetLeft)/10
           
        },15)
       
        }
       

js 盒子逐渐缓慢移动效果的更多相关文章

  1. Rainyday.js – 使用 JavaScript 实现雨滴效果

    Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...

  2. 用js枚举实现简易菜单效果

    用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...

  3. 实用js+css多级树形展开效果导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js+css实现带缓冲效果右键弹出菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. JS实现图片翻书效果示例代码

    js 图片翻书效果.  picture.html  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  ...

  6. js实现图片自动切换效果。

    js实现图片自动切换效果,简单实用,原谅我只是一只小菜鸟还在学大神天天写博文装逼. <script language="javascript"> setInterval ...

  7. JS实现图片翻书效果

    picture.html <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http- ...

  8. js盒子模型

    1.js盒子模型 指的是通过js中提供的一系列的属性和方法,获取页面中元素的样式信息值 例: #box有很多自己的私有属性: HTMLDivElement.prototype->HTMLElem ...

  9. js实现轮播图效果(附源码)--原生js的应用

    1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

随机推荐

  1. entfrm开源免费模块化无代码开发平台,开放生态为您创造更多的价值

    entfrm开发平台6大特性,赋能快速开发,为您创造更多的价值: 1. 模块化 丰富的模块稳定的框架 后台极易上手 目前已包括系统管理.任务调度.运维监控.开发工具.消息系统.工作流引擎.内容管理等模 ...

  2. HDD深圳站:全生命周期赋能开发者,华为引领应用生态升级

    12月14日,由华为开发者联盟主办的HDD(HUAWEI Developer Day)于深圳举行.此次HDD主论坛,围绕打造应用全生命周期服务,介绍了华为在创新孵化.开发测试.应用分发和运营增长阶段的 ...

  3. NepCTF pwn writeup

    上周抽时间打了nepnep举办的CTF比赛,pwn题目出的挺不错的,适合我这种只会一点点选手做,都可以学到新东西. [签到] 送你一朵小红花 64位程序,保护全开. 程序会在buf[2]处留下一个da ...

  4. libevent源码学习(13):事件主循环event_base_loop

    目录开启事件主循环执行事件主循环校对时间 阻塞/非阻塞处理激活队列中的event事件主循环的退出event_base_loopexitevent_base_loopbreak开启事件主循环       ...

  5. springboot使用线程池(ThreadPoolTaskExecutor)

    代码仓库:gitee 线程池创建 ` @Configuration @EnableAsync public class TaskPoolConfig { @Bean("syncExecuto ...

  6. ubuntu ffmpeg 转码错误

    [aac @ 0xde2400] The encoder 'aac' is experimental but experimental codecs are not enabled, add '-st ...

  7. qt creator设置默认输出目录

    note creator version : 4.13.1 敲黑板,一定要先配置好 Qt creator的default build directory , 再创建项目,最后再编译 敲黑板,一定要先配 ...

  8. 【LeetCode】1432. 改变一个整数能得到的最大差值 Max Difference You Can Get From Changing an Integer

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力 日期 题目地址:https://leetcode ...

  9. 【LeetCode】563. Binary Tree Tilt 解题报告(Java & Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 Java解法 Python解法 日期 题目地址:ht ...

  10. GCD (hdu 5726)

    GCD Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total Submis ...