zoukankan      html  css  js  c++  java
  • 问题在哪?动态菜单条-------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 { 100%; height:100%; overflow:auto; }
    ul{800px;position:relative;margin-top:100px;background:grey;height:30px;}
    li{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;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";
    	}
    }
    惯性的抖动效果,在前面做掉落抖动的效果的时候以前碰到过,可是这次效果时管时无论,问题到底在哪呢,实在有些困了,先睡,有大神路过的话请指教啊。


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





  • 相关阅读:
    MFC调用C动态库函数-----待补充
    硬盘知识总结:
    Android 四:区分刷机与root
    总结:Linux系统启动流程
    Android 三:手机adb 命令解锁
    UVa11136 Hoax or what
    UVa11988 Broken Keyboard (a.k.a. Beiju Text)
    UVa11280 Flying to Fredericton
    UVa10269 Adventure of Super Mario
    UVa12589 Learning Vector
  • 原文地址:https://www.cnblogs.com/lcchuguo/p/4501597.html
Copyright © 2011-2022 走看看