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 相关文章推荐
收集的一些Array及String原型对象的扩展实现代码
Dec 05 Javascript
关于javascript function对象那些迷惑分析
Oct 24 Javascript
jQuery快速上手:写jQuery与直接写JS的区别详细解析
Aug 26 Javascript
浅谈javascript 归并方法
Jan 21 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
JQuery Mobile 弹出式登录框的实现方法
May 28 Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
Oct 24 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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
详解:――如何将图片储存在数据库里
2006/12/05 PHP
php创建session的方法实例详解
2015/01/27 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP实现的简单操作SQLite数据库类与用法示例
2017/06/19 PHP
php学习笔记之mb_strstr的基本使用
2018/02/03 PHP
JavaScript 学习初步 入门教程
2010/03/25 Javascript
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js和as的稳定传值问题解决
2013/07/14 Javascript
jquery选择器-根据多个属性选择示例代码
2013/10/21 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
javascript bom是什么及bom和dom的区别
2015/11/26 Javascript
JavaScript事件处理的方式(三种)
2016/04/26 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
基于脚手架创建Vue项目实现步骤详解
2020/08/03 Javascript
在Django中管理Users和Permissions以及Groups的方法
2015/07/23 Python
Python 列表理解及使用方法
2017/10/27 Python
python实现log日志的示例代码
2018/04/28 Python
python制作填词游戏步骤详解
2019/05/05 Python
用python打印菱形的实操方法和代码
2019/06/25 Python
pytorch构建多模型实例
2020/01/15 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
解决Django响应JsonResponse返回json格式数据报错问题
2020/08/09 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
使用HTML5 Canvas API绘制弧线的教程
2016/03/22 HTML / CSS
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
实体的生命周期
2013/08/31 面试题
亲子读书活动方案
2014/02/22 职场文书
2014年安全生产工作总结
2014/11/13 职场文书
看雷锋电影观后感
2015/06/10 职场文书
自信主题班会
2015/08/14 职场文书
2015年社区消防安全工作总结
2015/10/14 职场文书
保险公司岗前培训工作总结
2015/10/24 职场文书
《打电话》教学反思
2016/02/22 职场文书