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 面向对象 继承
May 13 Javascript
ASP.NET jQuery 实例18 通过使用jQuery validation插件校验DropDownList
Feb 03 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
Jquery实现三层遍历删除功能代码
Apr 23 Javascript
JavaScript实现数组降维详解
Jan 05 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
关于angularJs清除浏览器缓存的方法
Nov 28 Javascript
全面介绍vue 全家桶和项目实例
Dec 27 Javascript
jQuery封装animate.css的实例
Jan 04 jQuery
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
使用Ajax实现进度条的绘制
Apr 07 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
与空气斗智斗勇的经典《Overlord》,传说中的“无稽之谈”
2020/04/09 日漫
php替换超长文本中的特殊字符的函数代码
2012/05/22 PHP
php cli换行示例
2014/04/22 PHP
php采用file_get_contents代替使用curl实例
2014/11/07 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
javascript document.images实例
2008/05/27 Javascript
一个基于jquery的文本框记数器
2012/09/19 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
2013/04/01 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
VueJS如何引入css或者less文件的一些坑
2017/04/25 Javascript
详解vue 配合vue-resource调用接口获取数据
2017/06/22 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
详解vue中使用protobuf踩坑记
2019/05/07 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
2020/03/07 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
将Python中的数据存储到系统本地的简单方法
2015/04/11 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
小米5s微信跳一跳小程序python源码
2018/01/08 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
Django实现前台上传并显示图片功能
2020/05/29 Python
详解Python 最短匹配模式
2020/07/29 Python
电子信息专业学生自荐信
2013/11/09 职场文书
珍珠奶茶店创业计划书
2014/01/11 职场文书
国际贸易专业个人求职信格式
2014/02/02 职场文书
医学专业自荐信
2014/06/14 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
2014年图书室工作总结
2014/12/09 职场文书
nginx 配置缓存
2022/05/11 Servers
Python中tqdm的使用和例子
2022/09/23 Python