今天做了一个动态菜单条,先上图片,简单说一下我想实现的效果:

就是以下这个地方,随着鼠标指到哪,它就划到哪,并有一个惯性的幅度,并且滑动距离越远,停住的时候惯性越大,摆动幅度越大,这就是我大概想实现的效果。

这样我再上一下代码:

html部分:

<center>
<div id="menu">
<ul id="book" onmouseover="choose(event)">
<li class="selected"><a href="#">玄幻</a></li>
<li><a href="#">武侠</a></li>
<li><a href="#">仙侠</a></li>
<li><a href="#">穿越</a></li>
<li><a href="#">同人</a></li>
<li><a href="#">网游</a></li>
<li><a href="#">都市</a></li>
<li><a href="#">历史</a></li>
<li id="bar"></li>//这个地方的实现是跟我自己想的有些出入的,可是发现还是这个好
</ul>
</div>
</center>

CSS部分:

* { margin:0; padding:0; }
body { width:100%; height:100%; overflow:auto; }
ul{width:800px;position:relative;margin-top:100px;background:grey;height:30px;}
li{width:70px;height:30px;line-height:30px;border-radius:10px;float:left;margin-left:20px;background:#fff0f0;position:relative;z-index:2;list-style:none;}
a{text-decoration:none;}
.selected{font-weight:bold;background:#ccc;}
#bar{padding-bottom:0px;width:70px;height:5px;z-index:4;position:absolute;background:red;bottom:-10px;}//这个地方bottom为负的

js部分:

var ulpart=null;//ul部分
var eachli=null;//li部分
var slide=null;//滑动部分
var speed=0;//移动速度
var fudu=7;//最后停下来时的惯性幅度
var move=null;//移动
var begin = 0;//開始的li部分
var stage = 0;//移动滑过li的个数
var now = 0;//当前的li部分
window.onload=function(){
ulpart=document.getElementById("book"); //获取ul对象
eachli=ulpart.getElementsByTagName("li");//获取li对象
slide=document.getElementById("bar");//获取滑动模块对象
for(var i=0;i<eachli.length;i++){
if(eachli[i]!=slide){
eachli[i].onmouseover=change;
}
}
}
function change(){
for(var i=0;i<eachli.length;i+=1){
if(eachli[i]===this){//这个地方的this实在是妙啊,好用
var target=(eachli[i].offsetWidth+20)*i;//当前li的左边距第一个li的左边的距离,20为li之间距离
now=i;//当前li
stage = parseInt(now - begin);//要移动的方向,正的是向右,负的是向左
if(move){
clearInterval(move);
}
if(stage>0){
move=setInterval("go("+target+")",30);//右移
}else{
move=setInterval("back("+target+")",30);//左移
}
begin=now;//将当前位置该为初始位置
}
eachli[i].className="";
this.className="selected";
}
}
function go(target){
var left=slide.offsetLeft;
speed+=fudu;
left+=speed;//移动速度加快的同一时候,距离变远
if(left>=target){//一旦超出距离
speed*=-1;//惯性抖动效果,这个效果也时管时无论,问题在哪呢?
if(Math.abs(speed)<=fudu){
clearInterval(move);
move=null;
}
left=target;
}
slide.style.left=left+"px";
}
function back(target){
if(slide.offsetLeft===target){
clearInterval(move);
move=null;
}else{
speed=(target-slide.offsetLeft)/5;
slide.style.left=slide.offsetLeft+speed+"px";
}
}

惯性的抖动效果,在前面做掉落抖动的效果的时候以前碰到过,可是这次效果时管时无论,问题到底在哪呢,实在有些困了,先睡,有大神路过的话请指教啊。

多希望能够有那么一个地方,明媚却不忧伤

问题在哪?动态菜单条-------Day86的更多相关文章

  1. Delphi编程中动态菜单要点归纳

      一.创建菜单并添加项目 在设计程序时,有时需要动态创建菜单, 通常使用以下的语句: PopupMenu1 := TPopupMenu.Create(Self);  Item := TMenuIte ...

  2. Django项目:CRM(客户关系管理系统)--82--72PerfectCRM实现CRM动态菜单和角色

    #models.py # ————————01PerfectCRM基本配置ADMIN———————— from django.db import models # Create your models ...

  3. ASP。使用依赖注入的asp.net Core 2.0用户角色库动态菜单管理

    下载source code - 2.2 MB 介绍 在开始这篇文章之前,请阅读我的前一篇文章: 开始使用ASP.NET Core 2.0身份和角色管理 在上一篇文章中,我们详细讨论了如何使用ASP.N ...

  4. winform快速开发平台 -> 通用权限管理之动态菜单

    这几个月一直忙APP的项目,没来得及更新项目,想想该抽出时间整理一下开发思路,跟大家分享,同时也希望得到宝贵的建议. 先说一下我们的权限管理的的设计思路,首先一个企业信息化管理系统一定会用到权限管理, ...

  5. WIN 下的超动态菜单(三)代码

    WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/ 超动态 ...

  6. WIN 下的超动态菜单(一)

    WIN 下的超动态菜单(一)介绍 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/     ...

  7. WIN 下的超动态菜单(二)用法

    WIN 下的超动态菜单(一)简介 WIN 下的超动态菜单(二)用法 WIN 下的超动态菜单(三)代码 作者:黄山松,发表于博客园:http://www.cnblogs.com/tomview/     ...

  8. 实战android菜单项之XML加载菜单与动态菜单项[转]

    原文地址:http://blog.csdn.net/kaiwii/article/details/7767225 自定义android应用程序的菜单项首先要知道切入点.经过学习,知道主要是两个Acti ...

  9. JS打字效果的动态菜单代码分享

    这篇文章主要介绍了JS打字效果的动态菜单,推荐给大家,有需要的小伙伴可以参考下. 这是一款基于javascript实现的打字效果的动态菜单特效代码,分享给大家学习学习. 小提示:浏览器中如果不能正常运 ...

随机推荐

  1. python3 ImageTk 安装方法

    使用命令: $ sudo yum search PIL | grep python3 可显示得知: python3-dogpile-cache.noarch : A caching front-end ...

  2. DBCC CHECKDB用法 手工修复数据库

          快速修复 DBCC CHECKDB ('数据库名', REPAIR_FAST)      重建索引并修复 DBCC CHECKDB ('数据库名', REPAIR_REBUILD) 如果必 ...

  3. C++设计模式实现--组合(Composite)模式

    一. 举例 这个样例是书上的,如果有一个公司的组结结构例如以下: 它的结构非常像一棵树,当中人力资源部和財务部是没有子结点的,详细公司才有子结点. 并且最关健的是,它的每一层结构非常相似. 代码实现例 ...

  4. 两台linux机器时间同步

    Linux自带了ntp服务 -- /etc/init.d/ntpd,这个服务不仅可以设置让本机和某台/某些机器做时间同步,他本身还可以扮演一个time server的角色,让其他机器和他同步时间. 配 ...

  5. QNetworkAccessManager跳转URL处理(使用QNetworkRequest::RedirectionTargetAttribute获得跳转URL)

    connect(manager, SIGNAL(finished(QNetworkReply*)), this, SLOT(onFinished(QNetworkReply*))); void Mai ...

  6. python 爬一下

    1.安装Requestswindow:pip install requestslinux:sudo pip install requests国内安装缓慢,建议到:http://www.lfd.uci. ...

  7. There is an error in invoking javac. A full JDK (not just JRE) is required

    最近调整了磁盘分区,硬盘里什么都没有了,可惜了我很多项目还有数据库资源然后把以前ssh项目重新导入进来的时候出现了一个错误org.apache.jasper.JasperException: PWC6 ...

  8. python Unable to find vcvarsall.bat 错误

    今天遇到了这个方面的问题,目前找到两种办法.一种是换编译器如mingw,另一种是装vc.第一种方法没成功,现在正在等第二种. 第一种: 首先安装MinGW: 把MinGW的路径添加到环境变量path中 ...

  9. PROPAGATION_REQUIRED

    PROPAGATION_REQUIRED (2009-05-13 13:26:52) 转载▼   事务传播行为种类 Spring在TransactionDefinition接口中规定了7种类型的事务传 ...

  10. poj3308Paratroopers(最小割)

    题目请戳这里 题目大意:给一个n*m的矩阵,给一些点(ri,ci)表示该点在第ri行第ci列.现在要覆盖所有的点,已知覆盖第i行代价为Ri,覆盖第j列代价为Cj.总代价是累乘的,求最小总代价能覆盖所有 ...