注释:可以用于盒子弹出,收回效果,比如:某东的产品详情页,侧边有购物车、优惠卷等,鼠标经过弹出效果
可以看这个网址使用案例: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. java内存管理的小技巧

    1,尽量使用直接量.     采用String str="hello"; 而不是 String str = new String("hello"): 2,使用S ...

  2. 【编程思想】【设计模式】【行为模式Behavioral】chaining_method

    Python版 https://github.com/faif/python-patterns/blob/master/behavioral/chaining_method.py #!/usr/bin ...

  3. Tomcat简单介绍

    1.目录结构 在conf文件夹中修改了配置之后一定要重启Tomcat

  4. 【Git】【Gitee】通过git远程删除仓库文件

    安装Git Git安装配置-菜鸟教程 没有安装下载的,请读者自行安装下载. 启动与初步配置 配置用户名与邮箱 git config --global user.name "用户名" ...

  5. 熔断和降级的初步详解实现(NET Core控制台输出讲解Polly)

    概述 很多朋友包括我,对于"八股文"可以说是比较熟练的,每次面试前都会专研不少东西,各种固定答案.专业术语都是张口就来,一个字,稳. 八股文:程序员八股文是指程序员在面试过程中经常 ...

  6. python之异步编程

    一.异步编程概述 异步编程是一种并发编程的模式,其关注点是通过调度不同任务之间的执行和等待时间,通过减少处理器的闲置时间来达到减少整个程序的执行时间:异步编程跟同步编程模型最大的不同就是其任务的切换, ...

  7. Linux中find命令与三剑客之grep和正则

    昨日内容回顾 1.每个月的3号.5号和15号,且这天时周六时 执行 00 00 3,5,15 * 6 2.每天的3点到15点,每隔3分钟执行一次 */3 3-15 * * * 3.每周六早上2点半执行 ...

  8. Raft成员变化(Membership Change)

    我司高产作家唐刘老师的小猪佩奇版"深入浅出 Raft"第四弹来啦~~前几篇内容戳这里 ↓ 在猪爸爸的努力下,泥坑银行终于能高效正常的运作了,但猪爸爸一直比较担心海盗岛那边的网点,因 ...

  9. Linux(Centos)配置vsftp使用账号密码(虚拟用户)登录ftp进行文件上传和修改

    安装vsftp yum install vsftpd -y 安装完成之后进入vsftp的配置文件夹 cd /etc/vsftpd/ 文件夹内容如下 [root@VM-0-12-centos vsftp ...

  10. Linux蓝牙库blueZ

    1.blueZ 官网 2.zigbee 网络库zigbee(可用在smart home devices)