Shulou(Shulou.com)06/01 Report--

This article mainly introduces how to use HTML+JavaScript to achieve somersault cloud navigation bar effect related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this article on how to use HTML+JavaScript to achieve somersault cloud navigation bar effect article will have a harvest, let's take a look.

Functional requirements:

1. When the mouse passes over a li, the somersault cloud follows to the current location.

2. When the mouse leaves the li, the somersault cloud returns to its original position.

3. When the mouse clicks on a li, the somersault cloud stays in this position.

Document .box {position: relative; width: 500px; height: 50px; background-color: grey;} ul li {list-style: none; float: left; text-align: center; height: 40px; line-height: 40px Margin-left: 0px; width: 70px; padding-left: 0px} / * problem 1: there seems to be a case solved before, the text and the text width are the same * / ul {margin: 0px; height: 50px; line-height: 50px; padding-top: 7px Padding-left: 20px;} a {display: inline-block; width: 100%; padding-left: 0px; text-align: left; color: black; text-decoration: none;} img {position: absolute Top:-5px; left: 5px; width: 60px; height: 60px; opacity: 0.5;} Home articles dynamically follow the latest hot spots

Window.addEventListener ('load', function ()) {/ / get each li And img var as = document.querySelectorAll ('li') var img = document.querySelector (' img') / / add click event as [1] .addEventListener ('mousemove', function () {animate (img, 75)}) as [2] .addEventListener (' mousemove', function () {animate (img)}) as [3] .addEventListener ('mousemove') to each li Function () {animate (img, 215)}) as [4] .addEventListener ('mousemove', function () {animate (img, 300) / / using mousemove events is better than mouseover events Prevent vibration}) as [0] .addEventListener ('mousemove', function () {animate (img, 5)}) for (I = 0 I < as.length; iattribute +) {/ / add a custom attribute to each a, but use it as the index number as [I] .setAttribute ('index', I)} var posi = 0 console.log (as [0] .getAttribute (' index')) for (I = 0; I < as.length) Li +) {as [as [I] .getAttribute ("index")] .addEventListener ('mouseout', fn) function fn () {EventListener () {animate (img, posi)}} / / 3, click a li and fix it on it. Leave after a certain li, go to a certain li, leave this li, and return to the just li. Equivalent to a refresh of the initial location as [1] .addEventListener ('click', function () {animate (img, 75) posi = 75 / delete the corresponding departure event}) as [2] .addEventListener (' click', function () {animate (img) posi = 145}) as [3] .addEventListener ('click') Function () {animate (img, 215) posi = 215}) as [4] .addEventListener ('click', function () {animate (img, 300) / / using mousemove events is better than mouseover events Prevent vibration posi = 300}) as [0] .addEventListener ('click', function () {animate (img, 5) posi = 5})})

I can only do this kind of simple effect, and it's bug.

1. Using animation function

2. The starting position of the original picture is 0

3. Mouse over a li and take the offsetLeft of the current small li as the target value

4. If you click on a li, save the location of the current li as the starting position of the picture

The train of thought is the same as what you think, but you should pay attention to the location, which is to automatically obtain the position of the element through the click of the element (but without careful consideration that the picture should be in the center of the text)

Secondly, absolute positioning of ul is added, which can eliminate jitter.

Document. C-nav {width: 600px; height: 40px; background-color: grey; position: relative;} ul {position: absolute; text-align: center; margin-left: 0px Padding-left: 0px} / * after adding positioning to the ul, the jitter can be eliminated * / li {top: 0px; list-style: none; float: left; padding-left: 10px; width: 80px; height: 40px; text-align: center Line-height: 10px;} a {color: black; text-decoration: none;} .cloud {position: absolute; top: 0px; left: 0px; width: 70px; height: 35px Background-image: url (Xiangyun .png); background-repeat: no-repeat; background-position: center; background-size: 100%; opacity: 0.6 } .current a {color: red} Home News faculty activity planner Corporate Culture recruitment Information Company introduction window.addEventListener ('load' Function () {var c_nav = document.querySelector ('.cmurnav') var cloud = document.querySelector (' .cloud') var lis = document.querySelectorAll ('li') var current = 0 / / starting position Don't calculate by hand, be sure to get the position for of an element (var I = 0; I < lis.length) ) {lis.addEventListener ('mouseenter', function () {animate (cloud, this.offsetLeft) / / jitter occurs when the mouse passes: because there is a conflict after the picture comes over At this point, the mouse is on top of the picture}) / / the mouse leaves and returns to the original location lis.addEventListener ('mouseleave', function () {animate (cloud, current)}) / / the mouse click event lis.addEventListener (' click') Function () {/ / alert (12) / / animate (cloud, this.offsetLeft) / / after clicking the mouse The starting position of the picture changes current = this.offsetLeft for (var I = 0) I < lis.length; iTunes +) {lis.className ='} this.className = 'current'})}) this is the end of the article on "how to use HTML+JavaScript to achieve the effect of somersault cloud navigation bar". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to use HTML+JavaScript to achieve the effect of somersault cloud navigation bar". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.