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 相关文章推荐
25个非常棒的jQuery滑块插件和教程小结
Sep 02 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 Javascript
DOM基础教程之使用DOM
Jan 19 Javascript
express文件上传中间件Multer详解
Oct 24 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
详解微信小程序Radio选中样式切换
Jul 06 Javascript
jqueryUI tab标签页代码分享
Oct 09 jQuery
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
JavaScript实现求最大公共子串的方法
Feb 03 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
Vue2项目中对百度地图的封装使用详解
Jun 16 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
php Ubb代码编辑器函数代码
2012/07/05 PHP
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
javascript 跨浏览器开发经验总结(五) js 事件
2010/05/19 Javascript
javascript删除option选项的多种方法总结
2013/11/22 Javascript
JS实现获取键盘按下的按键并显示在页面上的方法
2015/11/04 Javascript
图解prototype、proto和constructor的三角关系
2016/07/31 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
vue2中filter()的实现代码
2017/07/09 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
2018/04/28 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
详解Python自建logging模块
2018/01/29 Python
Python爬虫使用Selenium+PhantomJS抓取Ajax和动态HTML内容
2018/02/23 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
Python子类继承父类构造函数详解
2019/02/19 Python
如何使用Python进行OCR识别图片中的文字
2019/04/01 Python
python 瀑布线指标编写实例
2020/06/03 Python
澳大利亚游乐场设备品牌:Lifespan Kids
2019/05/24 全球购物
英语专业个人求职自荐信
2013/09/21 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
教师学习培训邀请函
2014/02/04 职场文书
《高尔基和他的儿子》教学反思
2014/04/09 职场文书
学生自我评语大全
2014/04/18 职场文书
服务承诺口号
2014/05/22 职场文书
机械设计专业大学生职业生涯规划书范文
2014/09/13 职场文书
国家助学金受助感言
2015/08/01 职场文书
小学二年级语文教学反思
2016/03/03 职场文书
MySql分区类型及创建分区的方法
2022/04/13 MySQL