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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style>

    body,ul{margin:0;padding:0;}

    ul{width:400px;height:30px;position:relative;margin:20px auto;}

    li{width:98px;height:28px;border:1px solid black;float:left;line-height:28px;text-align:center;list-style:none;}

    .bg{width:100px;height:5px;background:red;position:absolute;left:0;bottom:0;overflow:hidden;border:none;}

</style>

<script>

    window.onload =function(){

        var oUl = document.getElementsByTagName('ul')[0];

        var arrLi = oUl.getElementsByTagName('li');

        var oBg = arrLi[arrLi.length-1];

        for(var i=0;i<arrLi.length-1;i++){

            arrLi[i].onmouseover = function(){

                elasticStartMove(oBg,this.offsetLeft);

            };

        }

    };

    var left = 0; /*必须放在外面，解决小数误差问题*/

    function elasticStartMove(obj,target){

        var speed = 0;

        clearInterval(obj.timer);

        obj.timer = setInterval(function(){

            speed += (target-obj.offsetLeft)/5;

            speed *= 0.75;

            left += speed;

            if(Math.abs(speed) < 1 && Math.abs(left-target) < 1){ /*停止的条件*/

                clearInterval(obj.timer);

                obj.style.left = target+'px';

            }

            obj.style.left=left+'px';

            document.title="speed:"+speed+" -  :"+Math.abs(left-target);

        },30);

    }

    /*

        弹性公式：

            速度 +=（目标值-oDiv.offsetLeft）/5

            速度*=0.7；

        不适用范围：对于有一些height不能取负数的不能使用

    */

</script>

</head>

<body>

<ul>

    <li>首页</li>

    <li>产品</li>

    <li>关于我们</li>

    <li>联系方式</li>

    <li class='bg'></li>

</ul>

</body>

</html>

js 实现弹性运动的简单应用----导航栏中弹性的更多相关文章

  1. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. magento导航栏中如何加入home主页

    magento在导航栏中加入home主页是很简单的,几个步骤即可在magento导航栏中加入home主页! 下面简单介绍下如何在magento导航栏中加入home主页: 首先我们打开对应应用的模板文件 ...

  3. 利用overflow实现导航栏中常 出现的倒三角下拉小图标

    常用网页界面中,导航栏中的倒三角下拉小图标实现,可用overflow: 效果如右图: .Triangle{position:relative;width:280px;height:15px;} ;ov ...

  4. 【代码笔记】iOS-在导航栏中显示等待对话框

    一,效果图. 二,代码. ViewController.m #import "ViewController.h" @interface ViewController () @end ...

  5. window10删除导航栏中的onedrive

    前面介绍了如何删除导航栏中的“快速访问”,对于一个根本用不着的“oneDrive”肯定也得搞掉. 0.处理前: 1.卸载onedrive是不能清除导航栏里面的onedrive的,进入注册表regedi ...

  6. bootstrap如何去除自带的样式----导航栏中的菜单实现平滑的过渡到对应的菜单区域-------动态跟换模态框中的内容

    问题1:如何去除bootstap中css中自带的overflow:hidden这个样式 今天遇见在bootstap中轮播图上的  附带图  片不能够显示出来,图片始终有一部分的高度  被隐藏了 后来通 ...

  7. 在开源UOJ的导航栏中添加新页面链接

    前言 刚用开源UOJ搭建OJ成功时就想在导航栏那里添加一个站内页面链接,无奈当时乱搞水平低,网上也没有教程,不晓得怎么弄 今天突然来了闲情乱搞一通,结果还真乱搞成了...特意写下为后来人少走点弯路 前 ...

  8. iOS史上最简单修改导航栏分隔线颜色方法!!!

    override func viewDidLoad() { super.viewDidLoad() if let imageView = self.findNavLineView(view: navi ...

  9. SAP CRM 将组件整合至导航栏中

    到现在,我们已经可以让组件独立地显示.我们只是运行它.让它显示在Web UI中.让我们把组件整合进导航栏,使我们可以在正常登录Web UI时访问它. 步骤一: 为你的UI组件主窗体创建一个内向插件. ...

随机推荐

  1. linux上python3的安装

    我这里使用的时centos7-mini,centos系统本身默认安装有python2.x,版本x根据不同版本系统有所不同,可通过 python --V 或 python --version 查看系统自 ...

  2. Python之configparser配置文件的读取

    配置文件名 config.ini 文件内容: [linux] ip:10.0.13.26 port:22 username:root password:W2ynE6b58wheeFho [mysql] ...

  3. CF-1110C-Meaningless Operations

    题意: 输入q,然后输入q个a,对于每个a,找到一个b,使gcd(a ^ b, a & b)最大,输出这个最大的gcd: 思路: 用k表示a二进制最高位的二进制编号,1,2,4,8对应1,2, ...

  4. CF-1102E-Monotonic Renumeration

    比较可惜昨天比赛的时候时间不够了,在比赛结束之后五分钟找出了bug提交通过了.然并软: 首先这题说b数组的后一项要么等于前一项,要么等于前一项加一,而且如果a[i] == a[j] ,那么b[i] = ...

  5. python djangjo 文件上传

    视图: request.GET 获取数据 request.POST   提交数据 request.FILES  获取文件用 checkbox 等多选的内容   request.POST.getlist ...

  6. ERROR: Error in Log_event::read_log_event(): 'Found invalid event in binary log', data_len: 31, event_type: 35报错处理

    centos7系统MySQL5.7在用mysqlbinlog命令查询binlog日志时刚开始查询即自动终止查询,查了一下该日志有300M,于是仔细看发现有报错,见下图: 在网上查找经验贴http:// ...

  7. IDEA系列（九）Intellij IDEA界面介绍 - 哲也的博客

    原文出处:https://github.com/judasn/IntelliJ-IDEA-Tutorial 首次打开 重点说明: IntelliJ IDEA 是没有类似 Eclipse 的工作空间的概 ...

  8. android逆向---charles抓包

    手机与电脑处于同一网络环境,且正确设置代理后,charles显示CONNECT失败,提示信息SSL handshake with client failed: An unknown issue occ ...

  9. 6487. 【GDOI2020模拟02.29】列强争霸war

    题目描述 区间绝对众数 即出现次数>len/2下取整的数 对于区间[L,R]扫一遍,维护一个数x和出现次数s 当前数=x则s+1,否则s-1,若s已为0则把x设为当前数 若区间内存在绝对众数,那 ...

  10. SpringBoot入门系列（二）如何返回统一的数据格式

    前面介绍了Spring Boot的优点,然后介绍了如何快速创建Spring Boot 项目.不清楚的朋友可以看看之前的文章:https://www.cnblogs.com/zhangweizhong/ ...