JS+CSS实现带有碰撞缓冲效果的竖向导航条代码


Posted in Javascript onSeptember 15, 2015

本文实例讲述了JS+CSS实现带有碰撞缓冲效果的竖向导航条代码。分享给大家供大家参考。具体如下:

这是一款碰撞缓冲效果的导航条,JavaScript妙味课堂奉献给大家的作品,很不错的竖向菜单,希望大家喜欢。所用技术是JS和CSS。

运行效果截图如下:

JS+CSS实现带有碰撞缓冲效果的竖向导航条代码

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>碰撞缓冲效果的导航条</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="#">联系方式</a></li>
 <li id="bar">
</ul>
</body>
</html>

希望本文所述对大家的JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript scrollTop正解使用方法
Nov 14 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
在JavaScript中用getMinutes()方法返回指定的分时刻
Jun 10 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
javascript实现多张图片左右无缝滚动效果
Mar 22 Javascript
基于jQuery实现图片推拉门动画效果的两种方法
Aug 26 jQuery
本地搭建微信小程序服务器的实现方法
Oct 27 Javascript
还不懂递归?读完这篇文章保证你会懂
Jul 29 Javascript
利用Promise自定义一个GET请求的函数示例代码
Mar 20 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue组件系列之TagsInput详解
May 14 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
Sep 15 #Javascript
基于jQuery滑动杆实现购买日期选择效果
Sep 15 #Javascript
JavaScript 封装一个tab效果源码分享
Sep 15 #Javascript
jQuery简单实现两级下拉菜单效果代码
Sep 15 #Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
Sep 15 #Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 #Javascript
JS实现仿FLASH效果的竖排导航代码
Sep 15 #Javascript
You might like
在Win2003(64位)中配置IIS6+PHP5.2.17+MySQL5.5的运行环境
2016/04/04 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
PHP设计模式入门之状态模式原理与实现方法分析
2020/04/26 PHP
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
JavaScript执行顺序详细介绍
2013/12/04 Javascript
使用Nodejs开发微信公众号后台服务实例
2014/09/03 NodeJs
javascript实现一个数值加法函数
2015/06/26 Javascript
js实现的下拉框二级联动效果
2016/04/30 Javascript
Jquery获取第一个子元素简单实例
2016/06/02 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
2017/01/11 Javascript
利用JS实现文字的聚合动画效果
2017/01/22 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
2017/06/01 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
nodejs前端自动化构建环境的搭建
2017/07/26 NodeJs
vue底部加载更多的实例代码
2018/06/29 Javascript
关于微信小程序获取小程序码并接受buffer流保存为图片的方法
2019/06/07 Javascript
Vue 实例事件简单示例
2019/09/19 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
跟老齐学Python之关于类的初步认识
2014/10/11 Python
探究python中open函数的使用
2016/03/01 Python
python斐波那契数列的计算方法
2018/09/27 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
python aiohttp的使用详解
2019/06/20 Python
django 中使用DateTime常用的时间查询方式
2019/12/03 Python
Python Serial串口基本操作(收发数据)
2020/11/06 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
太阳镜仓库,售价20美元或更少:Sunglass Warehouse
2016/09/28 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
车工岗位职责
2013/11/26 职场文书
某集团股份有限公司委托书样本
2014/09/24 职场文书
质检员岗位职责范本
2015/04/07 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
nginx配置限速限流基于内置模块
2022/05/02 Servers