注释:可以用于盒子弹出,收回效果,比如:某东的产品详情页,侧边有购物车、优惠卷等,鼠标经过弹出效果
可以看这个网址使用案例: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. 使用NSURLSessionDownloadTask实现大文件下载-监听下载进度

    - 5.1 涉及知识点(1)创建NSURLSession并设置代理,通过NSURLSessionDownloadTask并以代理的方式来完成大文件的下载 //1.创建NSURLSession,设置代理 ...

  2. 3.0 go mod之远程仓库搭建-代码示例

    注意事项 所谓的远程仓库指的是github,个人首次使用go mod在其他云仓库上尝试,并未成功,这浪费了我近2小时的时间: 如果你是初次尝试,那么除了github的地址换一下之外,其他的都按照示例操 ...

  3. 【Spring Framework】Spring入门教程(八)Spring的事务管理

    事务是什么? 事务:指单个逻辑操作单元的集合. 在操作数据库时(增删改),如果同时操作多次数据,我们从业务希望,要么全部成功,要么全部失败.这种情况称为事务处理. 例如:A转账给B. 第一步,扣除A君 ...

  4. 【力扣】有序矩阵中第K小的元素

    给定一个 n x n 矩阵,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素.请注意,它是排序后的第 k 小元素,而不是第 k 个不同的元素. 示例: matrix = [ [ 1, 5, ...

  5. Python 字典是如何解决哈希冲突的

    本文主要翻译自 so 上面的问题 Why can a Python dict have multiple keys with the same hash? 下 Praveen Gollakota 的答 ...

  6. 解决电脑连接 iPhone 热点没有 IPv6地址的问题

    问题描述: 初入 iPhone ,电脑使用 ios 共享的热点无法连接 IPv6 地址.但是,直接在 iPhone 上面打开 https://www.test-ipv6.com/ 完美支持 IPv6 ...

  7. JAVA使用百度链接实时推送API提交链接

    官网地址:http://data.zz.baidu.com/ 百度推广API的token获取 http://data.zz.baidu.com/site/index 填写完之后会进行验证, 验证完之后 ...

  8. sql改写优化:简单规则重组实现

    我们知道sql执行是一个复杂的过程,从sql到逻辑计划,到物理计划,规则重组,优化,执行引擎,都是很复杂的.尤其是优化一节,更是内容繁多.那么,是否我们本篇要来讨论这个问题呢?答案是否定的,我们只特定 ...

  9. nim_duilib(20)之即刻(1)

    note 一个基于nim_duilib仿wechat的IM. 主界面 样式 美工差了. 布局 整体为水平布局,左边的深灰色区域(frame_left),右侧的light white区域(frame_r ...

  10. 【LeetCode】141. Linked List Cycle 解题报告(Java & Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 双指针 保存已经走过的路径 日期 [LeetCode ...