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

This article mainly explains "how to use JavaScript to achieve flexible navigation effect", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn "how to use JavaScript to achieve flexible navigation effect"!

Mainly using offsetX

1. Put up a shelf first:

* {margin: 0; padding: 0;} .nav {width: 900px; height: 63px; background: url (images/doubleOne.png) no-repeat right center; border: 1px solid # ccc; margin: 100px auto; position: relative } ul {position: relative; z-index: 999;} ul > li {list-style: none; float: left; width: 88px; height: 63px; line-height: 63px; text-align: center } span {display: inline-block; width: 88px; height: 63px; background: url ("images/tMall.png") no-repeat; position: absolute; left: 0; top: 0 } double 11 Carnival clothing venue, Digital Home Appliances, Home Appliances, Building Materials, Mother and Infant clothes, Mobile phone venues, Beauty venues, Import venues, Flying Pig Travel.

two。 Write the logic part

/ / 1. Get the element const oItems = document.querySelectorAll ("li"); let oSpan = document.querySelector ("span"); / / 2. Monitor the click event for (let I = 0; I) for each menu

< oItems.length; i++) { let item = oItems[i]; item.onclick = function() { //offsetLeft 得到被点击的元素距离第一个定位祖先元素的偏移位 // console.log(this.offsetLeft); // oSpan.style.left = this.offsetLeft + 'px'; //调用函数 easeAnimation(oSpan, { "left": this.offsetLeft }); }; } animation.js (function() { /** * 匀速动画 * @param {*} ele 执行动画元素 * @param {*} obj 该元素的哪些属性需要执行动画 * @param {*} fn 动画执行完成后可能还需要执行的操作 * * 调用方式参考 * linearAnimation(oDiv, { "marginTop": 500, "marginLeft": 300 }); */ function linearAnimation(ele, obj, fn) { clearInterval(ele.timerId); ele.timerId = setInterval(function() { // flag变量用于标记是否所有的属性都执行完了动画 let flag = true; for (let key in obj) { let target = obj[key]; // 1.拿到元素当前的位置 // let begin = parseInt(ele.style.width) || 0; let style = getComputedStyle(ele); // let begin = parseInt(style.width) || 0; let begin = parseFloat(style[key]) || 0; // 2.定义变量记录步长 let step = (begin - target) >

0?-13: 13; / / 3. Calculate the new position begin + = step; / / console.log (Math.abs (target-begin), Math.abs (step)); if (Math.abs (target-begin) > Math.abs (step)) {/ / incomplete animation flag = false } else {/ / finish the animation begin = target;} / / 4. Reset the position of the element / / ele.style.width = begin + "px"; ele.style [key] = begin + "px";} / / determine whether the animation has finished if (flag) {/ / turn off timer clearInterval (ele.timerId) after animation execution / / determine whether to pass the fn function, and then execute / / if (fn) {/ / fn (); / /} fn & & fn ();}}, 100) } / / slow animation function easeAnimation (ele, obj, fn) {clearInterval (ele.timerId); ele.timerId = setInterval (function () {/ / flag variable is used to mark whether all attributes have finished animation let flag = true; for (let key in obj) {let target = obj [key] / / 1. Get the current position of the element let style = getComputedStyle (ele); let begin = parseInt (style [key]) | | 0; / / 2. Define variable recording step size / / formula: (end position-start position) * retardation coefficient (0 ~ 1) let step = (target-begin) * 0.3; / / 3. Calculate the new location begin + = step; if (Math.abs (Math.floor (step)) > 1) {flag = false;} else {begin = target;} / / 4. Reset the position of the element ele.style [key] = begin + "px";} / / determine whether the animation has finished if (flag) {/ / turn off the timer clearInterval (ele.timerId) after the animation / / determine whether to pass the fn function, otherwise do not execute fn & & fn ();}}, 100);} / / bind the function to the window object, so that the global can use window.linearAnimation = linearAnimation; window.easeAnimation = easeAnimation;}) ()

At this point, I believe you have a deeper understanding of "how to use JavaScript to achieve flexible navigation effect". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.