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读取RSS数据
Jan 20 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
2019 年编写现代 JavaScript 代码的5个小技巧(小结)
Jan 15 Javascript
layui 富文本赋值,取值,取纯文本值的实例
Sep 18 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
基于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
用Zend Encode编写开发PHP程序
2006/10/09 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
2018/06/20 PHP
PHP从尾到头打印链表实例讲解
2018/09/27 PHP
php二维数组按某个键值排序的实例讲解
2019/02/15 PHP
js停止输出代码
2008/07/20 Javascript
7款风格新颖的jQuery/CSS3菜单导航分享
2013/04/23 Javascript
js防止表单重复提交的两种方法
2013/09/30 Javascript
javascript数组快速打乱重排的方法
2014/01/02 Javascript
PHP守护进程实例
2015/03/06 Javascript
vue2.0的contextmenu右键弹出菜单的实例代码
2017/07/24 Javascript
jQuery获取table表中的td标签(实例讲解)
2017/07/28 jQuery
微信小程序picker组件简单用法示例【附demo源码下载】
2017/12/05 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
node使用Mongoose类库实现简单的增删改查
2018/11/08 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
2019/06/19 jQuery
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python开发之基于thread线程搜索本地文件的方法
2015/11/11 Python
Python基于TCP实现会聊天的小机器人功能示例
2018/04/09 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
Python爬虫使用脚本登录Github并查看信息
2018/07/16 Python
对python捕获ctrl+c手工中断程序的两种方法详解
2018/12/26 Python
python+rsync精确同步指定格式文件
2019/08/29 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
linux mint中搜狗输入法导致pycharm卡死的问题
2020/10/28 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
英国家庭和商业健身器材购物网站:Fitness Options
2018/07/05 全球购物
中学生自我评价范文
2014/02/08 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
民生工程实施方案
2014/03/22 职场文书
2014年师德师风学习材料
2014/05/16 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
golang switch语句的灵活写法介绍
2021/05/06 Golang
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python