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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
vue页面离开后执行函数的实例
Mar 13 Javascript
浅谈Vue的响应式原理
May 30 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
vue.js的简单自动求和计算实例
Nov 08 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
js操作两个json数组合并、去重,以及删除某一项元素
Sep 22 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
如何去掉文章里的 html 语法
2006/10/09 PHP
Mysql的GROUP_CONCAT()函数使用方法
2008/03/28 PHP
PHP 字符串长度判断效率更高的方法
2014/03/02 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
javascript编程起步(第四课)
2007/01/10 Javascript
编写兼容IE和FireFox的脚本
2009/05/18 Javascript
利用进制转换压缩数字函数分享
2014/01/02 Javascript
javascript 用函数语句和表达式定义函数的区别详解
2014/01/06 Javascript
jQuery联动日历的实例解析
2016/12/02 Javascript
AngularJS实现使用路由切换视图的方法
2017/01/24 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
快速搭建vue2.0+boostrap项目的方法
2018/04/09 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
Python中super()函数简介及用法分享
2016/07/11 Python
Django URL传递参数的方法总结
2016/08/28 Python
Python循环语句中else的用法总结
2016/09/11 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
关于python多重赋值的小问题
2019/04/17 Python
python多线程扫描端口(线程池)
2019/09/04 Python
对pytorch的函数中的group参数的作用介绍
2020/02/18 Python
俄罗斯香水和化妆品购物网站:Л’Этуаль
2018/05/10 全球购物
澳大利亚当地最大的时装生产商:Cue
2018/08/06 全球购物
小学生环保标语
2014/06/13 职场文书
认错检讨书
2014/10/02 职场文书
党员评议思想汇报
2014/10/08 职场文书
市委召开党的群众路线教育实践活动总结大会报告
2014/10/21 职场文书
2014年德育工作总结
2014/11/20 职场文书
学术会议邀请函
2015/01/30 职场文书
会计工作岗位职责
2015/02/03 职场文书
高中同学会致辞
2015/08/01 职场文书
小学语文教师竞聘演讲稿范文
2019/08/09 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python
nginx rewrite功能使用场景分析
2022/05/30 Servers