问题在哪?动态菜单栏-------Day86

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

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

这样我再上一下代码:

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,布布扣,bubuko.com

时间: 2024-10-19 02:58:57

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

一点点1 | Django

1.models.CharField(max_length=32, unique=True) # unique表示唯一性 2.source_choices = ((0,'转介绍'), (1,'QQ群'), (2,'官网'), (3,'百度推广'), (4,'51CTO'), (5,'知乎'), (6,'市场推广') ) # choice中,数字显示在数据库,文字显示在后台admin source = models.SmallIntegerField(choices=source_choices)

jsp include 和EL函数为菜单栏动态添加样式

在模块中出现公用的菜单栏,如果每一页都单独有一个菜单栏维护起来很麻烦,每次增加一个菜单的话,菜单中的每个页面都需要修改菜单栏,稍有不慎,就会出现样式不一样的情况. 这时候就需要用到jsp的包含机制.包含机制有两种:include指令和<jsp:include/>标准动作. <%@ include file=" /jsp/widget/user/menuNavl.jsp"%> <jsp:include page=" /jsp/widget/user

问题在哪?动态菜单条-------Day86

今天做了一个动态菜单条,先上图片,简单说一下我想实现的效果: 就是以下这个地方,随着鼠标指到哪,它就划到哪,并有一个惯性的幅度,并且滑动距离越远,停住的时候惯性越大,摆动幅度越大,这就是我大概想实现的效果. 这样我再上一下代码: html部分: <center> <div id="menu"> <ul id="book" onmouseover="choose(event)"> <li class=&qu

Android UI设计之&lt;十&gt;自定义ListView,实现QQ空间阻尼下拉刷新和渐变菜单栏效果

转载请注明出处:http://blog.csdn.net/llew2011/article/details/51559694 好久没有写有关UI的博客了,刚刚翻了一下之前的博客,最近一篇有关UI的博客是在2014年写的:Android UI设计之<七>自定义Dialog,实现各种风格效果的对话框,在那篇博客写完后由于公司封闭开发封网以及其它原因致使博客中断至今,中断这么久很是惭愧,后续我会尽量把该写的都补充出来.近来项目有个需求,要做个和QQ空间类似的菜单栏透明度渐变和下拉刷新带有阻尼回弹的效

C# 用vs2008连接SQL数据库做动态水晶报表

博主是个还在上大学的新手,如果有什么说错的地方请务必帮我指出来,谢谢! 想要完成一个能够动态改变其中数据的水晶报表,可以通过创建一个 数据的中转站来存储和输出数据的方式. 借由这个中转站,我们可以通过为它动态输入数据,然后再将数据导出到水晶报表,来达到得到有动态数据的水晶报表的目的. 仅在vs2008中,很多它自带的应用也可以达到中转站的作用,比如数组,数据集等. 博主最近刚在学SQL所以尝试了用VS连接数据库来做水晶报表. 1.首先,博主在SQL中创建了名为xxs的数据库,然后再在数据库xxs

Rcp 中添加eclipse中的菜单栏

自己创建的Eclipse rcp 插件中需要添加像Eclipse中的菜单栏和工具栏,实现该功能可以通过两种方式:1种是通过扩展点,2种是通过在ApplicationActionBarAdvisor 类中编写代码实现. 1.通过扩展点实现:org.eclipse.ui.menus 用于扩展菜单栏,该例子实现eclipse中的window菜单栏中的部分Action ViewsShortlistContributionItem 源码: package com.workflow.menu; import

unity3D中动态加载物体的常用的方法

1.用Resources.Load():参数为路径,需要在Assets文件夹中创建Resources文件夹,通过路径去查找,实例化并加入到内存中去,通过Instantiate动态加载的方法来实现物体场景的加载: 2.使用AssetBundle打包预设或者场景可以将与其相关的所有资源打包,这样很好地解决资源的依赖问题 要先打包资源: using UnityEngine;using System.Collections;using UnityEditor;using System.IO;public

C#简单实现动态数据生成Word文档并保存

今天正好有人问我,怎么生成一个报表式的Word文档. 就是文字的样式和位置相对固定不变,只是里面的内容从数据中读取. 我觉得类似这种的一般用第三方报表来做比较简便.但既然要求了Word,只好硬着头皮来. 网上的方法大多数都是从一个GridView或表中获得数据后向Word中添加一个表格. (图1) 我们使用Word模板来实现,方法如下: 1.首先需要向工程中的“引用”加入Word类库的引用(图2).我是Office 2003.其他版本可能略有不同.在COM里面 (图2) 2.用Word设计一个模

动态库(非MFC动态库)

一.C语言动态库 1.创建C语言动态库,并封装函数: 1)创建新工程:Win32 Dynamic-Link Library 2)添加SourceFiles文件:Cdll.c Cdll.c中的内容: //创建C的动态库 //_declspec(dllexport)声明导出 _declspec(dllexport)int Cdll_add(int add1,int add2){     return add1+add2; } _declspec(dllexport)int Cdll_sub(int