Where is the problem? Dynamic menu bar ------- Day86, menu bar ------- day86

Where is the problem? Dynamic menu bar ------- Day86, menu bar ------- day86

Today, I made a dynamic menu bar. I will first give a brief introduction to the effect I want to achieve:

This is the place below, where the mouse points it, and there is an inertial amplitude, and the moving distance is farther and farther, the larger the inertia, the larger the swing amplitude, this is what I want to achieve.

In this way, I will go back to the Code:

Html section:

<Center> <div id = "menu"> <ul id = "book" onmouseover = "choose (event) "> <li class =" selected "> <a href =" # "> fantasy </a> </li> <a href =" # "> martial arts </a> </li> <a href = "#"> Xianxia </a> </li> <a href = "#"> traversal </a> </li> <a href = "#"> same person </a> </li> <a href = "#"> online games </a> </li> <a href = "#"> city </a> </li> <a href = "#"> history </a> </li> <li id = "bar"> </li> // The implementation of this area is somewhat different from what I think, but it is still good to find it </ul> </div> </center>

CSS section:

* {Margin: 0; padding: 0;} body {width: 100%; height: 100%; overflow: auto;} ul {width: 800px; position: relative; margin-top: 100px; background: gray; 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;} // The bottom is negative.

Js section:

Var ulpart = null; // part var eachli = null; // part var slide = null; // part var speed = 0; // moving speed var fudu = 7; // inertia margin var move = null when the last stop; // moving var begin = 0; // start the li part var stage = 0; // move the number of li slides over var now = 0; // The current li part

Window. onload = function () {ulpart = document. getElementById ("book"); // obtain the ul object eachli = ulpart. getElementsByTagName ("li"); // obtain the li object slide = document. getElementById ("bar"); // get the slide module object 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 is a wonderful place. use var target = (eachli [I]. offsetWidth + 20) * I; // the left side of the current li is the left side of the first li, and 20 is the distance between li and now = I; // current listage = parseInt (now-begin); // the direction to be moved. The positive value is the right, and the negative value is the left if (move) {clearInterval (move );} if (stage> 0) {move = setInterval ("go (" + target + ")", 30 ); // shift right} else {move = setInterval ("back (" + target + ")", 30); // shift left} begin = now; // set the current position as the initial position} eachli [I]. className = ""; this. className = "selected ";}}

Function go (target) {var left = slide. offsetLeft; speed + = fudu; left + = speed; // if (left> = target) {// when the distance exceeds speed * =-1; // What is the problem? 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";}}

The inertia jitter effect has been met before the effect of dropping jitter, but no matter what the problem is, it is a bit sleepy. First, go to bed, if you are passing by, please kindly advise me.

I hope that there will be such a place, bright but not sad.

Java Dynamic menu (the name in the menu bar is extracted from the database)

This is easy
JMenuItem mt1 = new JMenuItem ();
Mt1.setText (""); // value extracted from the database

I don't have a development environment here, so I helped you write the complete code.

Webpage problems: dynamically change the iframe link based on the link in the menu bar

Send me your mobile phone number or QQ number through the station message, I will tell you in detail ....
Reference: ogin_u