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

    Eclipse 创建项目时报错 Could not resolve archetype org.apache.maven.archetypes:maven-archetype-quickstart:1 ...

  2. Linux:spool命令

    格式调整有以下参数: set echo on/off--是否显示脚本中的需要执行的命令 set feedback on/off--是否显示 select 结果之后返回多少行的提示 set linesi ...

  3. 【Linux】【Shell】【text】Vim

    文本编辑器: 文本:纯文本,ASCII text:Unicode: 文本编辑种类: 行编辑器:sed 全屏编辑器:nano, vi vi: Visual Interface vim: Vi IMpro ...

  4. 使用$.post方式来实现页面的局部刷新功能

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  5. last显示出unknown用户

    这问题是群里有朋友发了一张照片看到的: 出现问题第一时间当然是百度或者谷歌,结果还是查到了,原来是gdm作怪,也可以认为是bug 该用户由GDM创建(可能是由于错误).并不是真的有"未知&q ...

  6. PHP数组函数总结与使用

    array_change_key_case(数组,CASE_LOWER/CASE_UPPER) 数组键值转化为小写CASE_LOWER/大写CASE_UPPER   array_chunk(数组,分割 ...

  7. 转: 再谈select, iocp, epoll,kqueue及各种I/O复用机制

    首先,介绍几种常见的I/O模型及其区别,如下: blocking I/O nonblocking I/O I/O multiplexing (select and poll) signal drive ...

  8. Wireshark基本使用(1)

    原文出处: EMC中文支持论坛 按照国际惯例,从最基本的说起. 抓取报文: 下载和安装好Wireshark之后,启动Wireshark并且在接口列表中选择接口名,然后开始在此接口上抓包.例如,如果想要 ...

  9. png crc讲解

    我太难了. 我真的是为你们着想,你们学姐说misc太简单了,可就是这么简单我相信你们也不会做...我还得给你们讲解... 加油吧!!! 工具:010editor    这个我想给你放下载链接来着,后来 ...

  10. 资源相关视图(Project)

    <Project2016 企业项目管理实践>张会斌 董方好 编著 这里就扯到资源了,资源是啥意思?如果是教科书,怕又是有一个名词解释要背吧,吼吼--其实这个资源在这里的意思基本上猜就能猜到 ...