注释:可以用于盒子弹出,收回效果,比如:某东的产品详情页,侧边有购物车、优惠卷等,鼠标经过弹出效果
可以看这个网址使用案例: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. 【Spring Framework】Spring入门教程(六)Spring AOP使用

    Spring的AOP 动态代理模式的缺陷是: 实现类必须要实现接口 -JDK动态代理 无法通过规则制定拦截无需功能增强的方法. Spring-AOP主要弥补了第二个不足,通过规则设置来拦截方法,并对方 ...

  2. 使用 IntelliJ IDEA 远程调试 Tomcat

    一.本地 Remote Server 配置 添加一个Remote Server 如下图所示 1. 复制JVM配置参数,第二步有用 2. 填入远程tomcat主机的IP地址和想开启的调试端口(自定义) ...

  3. 结合redis缓存的方式,查询和展示分类信息

    package cn.itcast.travel.service.impl;import cn.itcast.travel.dao.CategoryDao;import cn.itcast.trave ...

  4. 【C/C++】拔河比赛/分组/招商银行

    题目:小Z组织训练营同学进行一次拔河比赛,要从n(2≤n≤60,000)个同学中选出两组同学参加(两组人数可能不同).对每组同学而言,如果人数超过1人,那么要求该组内的任意两个同学的体重之差的绝对值不 ...

  5. DevOps的分与合

    一.抽象的 DevOps DevOps 是使软件开发和 IT 团队之间的流程自动化的一组实践,以便他们可以更快,更可靠地构建,测试和发布软件.DevOps 的概念建立在建立团队之间协作文化的基础上,这 ...

  6. JavaFx WebView使用研究

    原文: JavaFx WebView使用研究 | Stars-One的杂货小窝 本篇是基于TornadoFx框架的基础研究的,示例代码都是Kotlin版本,各位可以看着参考下 WebView中比较重要 ...

  7. WPF之交互触发器(CallMethodAction)学习

    需求背景: 当我们需要制作画板时,我们的VM需要记录我们的坐标并保存到Path的Data中,用我们普通的Command是无法办到的,这时我们就衍生出来了一个交互触发器CallMethodAction ...

  8. MLNX网卡驱动安装

    安装/升级MLNX驱动 1. 安装准备 驱动下载地址:https://www.mellanox.com/products/ethernet-drivers/linux/mlnx_en 选择和系统版本匹 ...

  9. 初识requests

    Make a Request 一开始要导入 Requests 模块: >>> import requests 然后,尝试获取某个网页.本例子中,我们来获取 Github 的公共时间线 ...

  10. python 学生信息管理系统

    python与数据库的例子 初始化数据库 链接数据库创建库和表并插入数据 init.py import pymysql sql_base='create database school;' sql_t ...