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实现yield的方法
Nov 06 Javascript
jQuery如何防止这种冒泡事件发生
Feb 27 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
Bootstrap模态框(modal)垂直居中的实例代码
Aug 18 Javascript
js仿小米官网图片轮播特效
Sep 29 Javascript
JavaScript省市级联下拉菜单实例
Feb 14 Javascript
vue.js开发环境搭建教程
May 04 Javascript
基于VuePress 轻量级静态网站生成器的实现方法
Apr 17 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
vue axios数据请求及vue中使用axios的方法
Sep 10 Javascript
vue2.0 如何在hash模式下实现微信分享
Jan 22 Javascript
vue轻量级框架无法获取到vue对象解决方法
May 12 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
cache_lite试用
2007/02/14 PHP
php实现smarty模板无限极分类的方法
2015/12/07 PHP
PHP性能测试工具xhprof安装与使用方法详解
2018/04/29 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
深入理解javascript动态插入技术
2013/11/12 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
Jquery焦点图实例代码
2014/11/25 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
2015/11/01 Javascript
javascript求日期差的方法
2016/03/02 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
2016/04/01 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
2016/06/03 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
vue计算属性和监听器实例解析
2018/05/10 Javascript
vue按需加载实例详解
2019/09/06 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
Python利用IPython提高开发效率
2016/08/10 Python
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python之time模块的时间戳,时间字符串格式化与转换方法(13位时间戳)
2019/08/12 Python
Python 自动登录淘宝并保存登录信息的方法
2019/09/04 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python爬虫获取豆瓣电影并写入excel
2020/07/31 Python
CSS3 实现飘动的云朵动画
2020/12/01 HTML / CSS
html5声频audio和视频video等新特性详细说明
2012/12/26 HTML / CSS
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
班主任经验交流材料
2014/12/16 职场文书
英文邀请函
2015/02/02 职场文书
优秀英文求职信范文
2015/03/19 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
环境卫生整治简报
2015/07/20 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
Golang生成Excel文档的方法步骤
2021/06/09 Golang