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 相关文章推荐
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
单元选择合并变色示例代码
May 26 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
js实现倒计时及时间对象
Nov 15 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
Vue表单验证插件Vue Validator使用方法详解
Apr 07 Javascript
VUE元素的隐藏和显示(v-show指令)
Jun 23 Javascript
Vue-路由导航菜单栏的高亮设置方法
Mar 17 Javascript
Angular刷新当前页面的实现方法
Nov 21 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
基于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
全世界最小的php网页木马一枚 附PHP木马的防范方法
2009/10/09 PHP
php生成静态页面的简单示例
2014/04/17 PHP
分享php邮件管理器源码
2016/01/06 PHP
PHP 7安装调试工具Xdebug扩展的方法教程
2017/06/17 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
JavaScript中使用Substring删除字符串最后一个字符
2013/11/03 Javascript
JavaScript中string对象
2015/06/12 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
2016/06/01 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
web前端页面生成exe可执行文件的方法
2018/02/08 Javascript
vuex actions异步修改状态的实例详解
2019/11/06 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
Vue 构造选项 - 进阶使用说明
2020/08/14 Javascript
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
使用Python编写一个简单的tic-tac-toe游戏的教程
2015/04/16 Python
python奇偶行分开存储实现代码
2018/03/19 Python
[原创]Python入门教程3. 列表基本操作【定义、运算、常用函数】
2018/10/30 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
HQhair美国/加拿大:英国化妆品、美容及美发产品商城
2019/04/15 全球购物
摩飞电器俄罗斯官方网站:Morphy Richards俄罗斯
2020/07/30 全球购物
简历中个人自我评价分享
2014/03/15 职场文书
某某同志考察材料
2014/05/28 职场文书
委托书怎样写
2014/08/30 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
毕业生对母校寄语
2015/02/26 职场文书
增值税发票丢失证明
2015/06/19 职场文书
庆七一活动简报
2015/07/20 职场文书
Html5调用企业微信的实现
2021/04/16 HTML / CSS
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技
Python之matplotlib绘制折线图
2022/04/13 Python
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技