JS+CSS带弹性碰撞指示的竖向导航菜单

<!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>
    <title>JS+CSS带弹性碰撞指示的竖向导航菜单丨</title>
    <style type="text/css">
    * { padding: 0; margin: 0; }
    li { list-style: none; }
    body { background: #fff; }
    ul { width: 202px; margin: 40px auto 0; position: relative; }
    li { width: 200px; height: 30px; line-height: 30px; padding-left: 10px; border: 1px solid #ccc; border-left: 3px solid #666; font-size: 14px; color: #333; margin-bottom: 5px; position: relative; z-index: 2; }
    a { color: #333; text-decoration: none; }
    .active { font-weight: bold; background: #fff0f0; }
    #bar { width: 10px; padding-left: 0; background: #cc6699; border: 1px solid #cc6699; position: absolute; top: 0; left: -14px; z-index: 3; }
    </style>
    <script>
    var obj = null;
    var aLis = null;
    var oBar = null;
    var iTime = null;
    var iSpeed = 0;
    var iAcc = 3;
    var onOff = 0;
    var iPrev = 0;
    var iNext = 0;
    function goTime()
    {
    for(var i = 0; i < aLis.length; i+=1)
    {
    if(aLis[i] === this)
    {
    var iTarget = (aLis[0].offsetHeight + 5) * i;
    iNext = i;
    onOff = iNext - iPrev;
    if(iTime)
    {
    clearInterval(iTime);
    }
    if(onOff>=0)
    {
    iTime = setInterval("elasticity("+ iTarget +")",35);
    }
    else
    {
    iTime = setInterval("postpone("+ iTarget +")",35);
    }
    iPrev = iNext;
    }
    aLis[i].className="";
    this.className="active";
    }
    }
    function elasticity(target)
    {
    var top = oBar.offsetTop;
    iSpeed+=iAcc;
    top += iSpeed;
    if(top >= target)
    {
    iSpeed*=-0.7;
    if(Math.abs(iSpeed)<=iAcc)
    {
    clearInterval(iTime);
    iTime=null;
    }
    top=target;
    }
    oBar.style.top = top + "px";
    }
    function postpone(target)
    {
    if(oBar.offsetTop===target)
    {
    clearInterval(iTime);
    iTime=null;
    }
    else
    {
    iSpeed = (target - oBar.offsetTop)/4;
    oBar.style.top = oBar.offsetTop + iSpeed + "px";
    }
    }
    window.onload = function(){
    obj = document.getElementById("nav");
    aLis = obj.getElementsByTagName("li");
    oBar = document.getElementById("bar");
    for(var i = 0; i < aLis.length; i+=1)
    {
    if(aLis[i].id!="bar")
    {
    aLis[i].onmouseover = goTime;
    }
    }
    };
    </script>
    </head>
    <body>
    <ul id="nav">
    <li class="active"><a href="/">网站首页</a></li>
    <li><a href="#">网页特效</a></li>
    <li><a href="#">资源下载</a></li>
    <li><a href="http://riyannadou.com.cn/">日研纳豆</a></li>
    <li id="bar"></li>
    </ul>
    </body>
    </html>
    <br><br><hr>
时间: 2024-10-11 16:11:50

JS+CSS带弹性碰撞指示的竖向导航菜单的相关文章

纯CSS实现的二级下拉导航菜单实例代码

纯CSS实现的二级下拉导航菜单实例代码:二级下拉菜单在众多的网站都有应用,不但能够有效的组织分类导航,并且能够节省大量的网站空间,也能够实现网站的动态化效果,大多数二级导航菜单都是结合javascript实现,本章节介绍一下使用纯css实现的下拉菜单.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" co

Slideout.js – 触摸滑出式 Web App 导航菜单

Slideout.js 是为您的移动 Web 应用开发的触摸滑出式的导航菜单.它没有依赖,自由搭配简单的标记,支持原生的滚动,您可以轻松地定制它.它支持不同的 CSS3 转换和过渡.最重要的是,它只是4KB . 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很实用的10个效果[源码下载] 12款经典的白富美型 jQuer

如何用CSS和jQuery实现一个侧滑导航菜单

为了建立导航菜单,让我们先看看html结构: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Animation Menu Demo</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax

使用CSS创建有图标的网站导航菜单

在我创建的每一个互联网应用中,我都试图避免创建完全由图片组成的菜单.在我看来,网页菜单系统中应该使用文字.这样做也会让菜单变得更干净利落.清晰和易读,不用考虑应用程序如何读取它,以及页面放大的时候也不会失真等.或许这只是我的想法?但是我们不能创建即好看又好用的菜单吗? 下面是创建下面的有图标支持的导航菜单的代码和样式. 基本标签 <!--navigation.html--> <ul class="nav"> <li class="home&quo

jQuery如何实现竖向二级导航菜单

jQuery如何实现竖向二级导航菜单:二级导航菜单在网页设计中数不胜数,有横向导航菜单,也有竖向导航菜单.在个人的印象中,好像介绍实现横向导航的教程比较多,所以在这里咱们就单独介绍一下如何使用jQuery实现竖向导航菜单,这里只介绍如何实现此种功能,对于效果的美观度,可以自行修改设计.下面简单介绍一下如何实现此效果:静态代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &

CSS3带过渡动画特效的垂直导航菜单怎么写?

清明节已过,开始努力工作学习!!DOCTYPE html> CSS3带动画特效的垂直导航菜单 标签定义文档与外部资源的关系 rel:规定当前文档与被链接文档之间的关系 href: 规定被链接文档的位置.超文本链接引用 a标签作用:超链接可以包裹任何东西 div span:容器功能:1,结构化分文别类2.绑定化操作--> 注册蓝轨迹培训中心 WEB前端.后端.移动端.微信开发 寻找更多好课 WEB前后端基础课.进阶课.高级课 今日最新优秀课程 每日更新更多.更优秀的开发课 我学习过的课程 我爱学

爱淘宝手机版分类导航菜单弹出效果设计

来和大家一起讨论讨论爱淘宝手机版的分类导航菜单弹出效果是如何设计实现的.先来看几个截图,一个是爱淘宝官方网站的截图,另一部分是我仿照爱淘宝做的截图 先声明一下我们只是借鉴爱淘宝手机版界面来进行技术的学习,如有博友看到请各位一定要理解.此博客毫无盗用淘宝核心技术. 第一张图是爱淘宝官网的截图,后面两张是我们自己仿照做的截图. 首先分析一下要实现的功能细节 点击手机页面商品列表的图片,导航菜单会从手机的右侧出来 导航菜单下面会有一个遮盖层,这样子的作用防止用户点击最底层的商品 最底层的商品可以在遮盖

Javascript导航菜单13则

来源:http://www.noupe.com/ajax/13-awesome-java-script-css-menu.html翻译:http://parandroid.com下面为你准备了13个利用Javascript实现的网页导航菜单 1) Sexy Sliding Menu- 基于mootools的Javascript网页导航菜单,漂亮的滑动门技术,看到下面的图了没有,用它来设计你的Sidebar,非常之炫,Sexy,是的. Demo: Mootols VersionDemo: Scri

富有弹性碰撞缓冲的竖向JS导航菜单

<!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-