<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>js实现滑动的弹性导航</title>

<style type="text/css">

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

ul { list-style:none; }

.box { background-color:#1a1a1a; margin-top:20px; }

.nav { width:1000px; height:45px; margin: auto; position:relative; }

.nav li { float:left; width:100px; line-height:45px; position:relative; z-index:;  text-align:center; }

.nav a { height:45px; display:block; color:#eee; font-size:14px; text-decoration:none; }

#mask { width:100px; height:45px; background-color:#028eec; position:absolute; top:; left:; }

</style>

</head>

<body>

<div class="box">

    <div id="nav" class="nav">

        <ul>

            <li><a href="#">首页</a></li>

            <li><a href="#">前端规范</a></li>

            <li><a href="#">社区</a></li>

            <li><a href="#">微笔记</a></li>

            <li><a href="#">教程</a></li>

            <li><a href="#">网页制作</a></li>

            <li><a href="#">设计动态</a></li>

            <li><a href="#">技术文档</a></li>

            <li><a href="#">瀑布流</a></li>

            <li><a href="#">移动页面</a></li>

        </ul>

        <div id="mask"></div>

    </div>

</div>

<script type="text/javascript">

window.onload = function(){

    var aLink = document.getElementById("nav").getElementsByTagName("li");

    var oMask = document.getElementById("mask");

    for(var i=; i<aLink.length; i++){

        aLink[i].onmouseover = function(){

            startMove(oMask, this.offsetLeft);

        }

    }

}

var iSpeed = ;

var left = ;

function startMove(obj, iTarget){

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        iSpeed += (iTarget-obj.offsetLeft)/;

        iSpeed *= 0.7;

        left += iSpeed;

        if(Math.abs(iSpeed)< && Math.abs(iTarget-left)<){

            clearInterval(obj.timer);

            obj.style.left = iTarget+"px";

        }else{

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

        }

    }, );

}

</script>

</body>

</html>

js实现滑动的弹性导航的更多相关文章

  1. 微信小程序tab切换，可滑动切换，导航栏跟随滚动实现

    简介 看到今日头条小程序页面可以滑动切换,而且tab导航条也会跟着滚动,点击tab导航,页面滑动,切导航栏也会跟着滚动,就想着要怎么实现这个功能 像商城类商品类目如果做成左右滑动切换类目用户体验应该会 ...

  2. JS+css滑动菜单简单实现

    JS+css滑动菜单 制作一个简单的滑动菜单,当鼠标指向菜单标题时,滑出二级菜单.移开时二级菜单隐藏.目标很简单,实践时有一些细节需要注意,比如鼠标移向二级菜单的 过程中,二级菜单消失了.还有定位出错 ...

  3. 利用js和JQuery定义一个导航条菜单

    利用js和JQuery定义一个导航条 效果: 一.html代码: <div class="Maintenance"> <div class="Title ...

  4. js实现滑动拼图验证码

    js实现滑动拼图验证码,我这个样式是仿那些大网站做了, 学习用的,只用到前端. 小的个人网站感觉还可以用,大一点的别人用机器一下就破解了. 下面看图示: 样子大概是这样的. 源码在这 百度网盘:    ...

  5. js数字滑动时钟

    js数字滑动时钟: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  6. JS滑动下划线导航菜单实现原理

    效果如下:http://campus.51job.com/test/zengxl/js html: <div class="mainnav"> <div clas ...

  7. 横向滑动页面，导航条滑动居中的 js 实现思路

    最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导 ...

  8. js 弹性导航

    <style> *{margin:0;padding:0;} #box{height:50px;float:left;position:relative;background:#f90;} ...

  9. 微信小程序导航栏，下面内容滑动，上册导航栏跟着滑动，内容随着导航栏滑动

    16.类似微信导航栏滑动.png 今日头条导航栏,下面滑动上面跟着滑动 index.wxml <swiper class="content" style="heig ...

随机推荐

  1. pycharm引入numpy报错：ImportError: Importing the multiarray numpy extension module failed. Most likely you are trying to import a failed build of numpy.

    软件为pycharm,安装了anaconda. 我一开始的报错为,PyCharm中无法调用numpy,报错ModuleNotFoundError: No module named 'numpy',这个 ...

  2. C++学习笔记41：进程调度

    进程调度策略:先进先出,时间片轮转,普通调度,批调度,高优先级抢先 子进程与父进程的调度没有固定的顺序:不能假设子进程一定会在父进程之后执行,也不能假设子进程一定会在父进程之前执行: 僵尸进程 子进程 ...

  3. Oozie分布式工作流——流控制

    最近又开始捅咕上oozie了,所以回头还是翻译一下oozie的文档.文档里面最重要就属这一章了--工作流定义. 一提到工作流,首先想到的应该是工作流都支持哪些工作依赖关系,比如串式的执行,或者一对多, ...

  4. JVM内存管理--分代搜集算法

    对象分类 分代搜集算法是针对对象的不同特性,而使用适合的算法,这里面并没有实际上的新算法产生.与其说分代搜集算法是第四个算法,不如说它是对前三个算法的实际应用. 首先我们来探讨一下对象的不同特性,接下 ...

  5. netbeans连接数据库SQLserver2008

    数据库设置 第一步:配置SQL,打开SQL server 2008文件下的配置工具里的SQL server配置管理器 设置MSSQLSERVER协议中,开启TCP/IP,端口设置为1433 在SQL ...

  6. C宏替换优先级

    宏替换仅仅是简单的替换,它不会影响运算符优先级的,比如: #define DOUBLE(x) x+x int i = DOUBLE(5)*5; printf("%d", i); 相 ...

  7. 使用JCOOKIES创建http cookie

    jCookies,一个功能强大的操作http cookie的jquery插件,他能够让你存储任何数据类型如:字符串,数组,对象等.它通过JavaScript存储Cookies,然后通过服务器端代码如: ...

  8. Tomcat服务器配置https双向认证（使用keytool生成证书）

    一,HTTPS原理   1,HTTP.HTTPS.SSL.TLS介绍与相互关系 (1)HTTP:平时浏览网页时候使用的一种协议.HTTP协议传输的数据都是未加密的(明文),因此使用HTTP协议传输隐私 ...

  9. 推荐10本C#编程的最佳书籍

    C#和.NET非常受全球开发人员的追捧和热爱.书籍是人类进步的阶梯.想要学习C# ?这里有10本学习C#编程的最好书籍在等着你哦. 1.<C# 5.0 in a Nutshell>:权威的 ...

  10. 树莓派3中安装JDK

    一.简介 树莓派3(Raspbian系统,下载地址:https://www.raspberrypi.org/downloads/raspbian/),安装JDK8,直接运行:apt-get insta ...