This article mainly introduces the vertical navigation bar code of JS + CSS with collision buffering effect, which can achieve the navigation effect of the slider auto vibration effect, it involves jQuery mathematical operations and dynamic operation techniques for page element styles. For more information, see the examples in this article to illustrate how JavaScript + CSS achieves vertical navigation bar code with collision buffering effect. Share it with you for your reference. The details are as follows:
This is a navigation bar with a collision buffer effect. The JavaScript magic class is dedicated to your work. It is a very good vertical menu and I hope you will like it. The technologies used are JS and CSS.
The running effect is as follows:
The Online Demo address is as follows:
Http://demo.jb51.net/js/2015/js-css-pzxg-r-nav-style-codes/
The Code is as follows:
Navigation bar for collision buffering effectScript var obj = null; var partition = 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 <strong. length; I + = 1) {if (then [I] = this) {var iTarget = (else [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;} interval [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. offs EtTop = 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"); bytes = obj. getElementsByTagName ("li"); oBar = document. getElementById ("bar"); for (var I = 0; I <strong. length; I + = 1) {if (then [I]. id! = "Bar") {response [I]. onmouseover = goTime ;}}; script
- Homepage
- Foot home
- Wonderful Course
- Contact info
I hope this article will help you design JavaScript programs.