滑动的导航，背景图片或者边框滑动效果

2024年1月3日 201次阅读

滑动都是一个道理。
主要就是根据当前滑块的位置计算出要移动的距离。
可能也算一个小小的算法把
我觉得这是核心。

function setSlider(i) {
                $(slider).width(array_w[i]);
                $(slider).stop(true, true).animate({
                    'left': getSliderDistance(i)
                }, 'fast');
            }

            function getSliderDistance(i) {
                var arr = array_w.slice(0, i),
                    len = arr.length,
                    sum = 0;
                for (var j = 0; j < len; j++) {
                    sum += arr[j];
                }
                return sum;
            }

就是运动的索引和距离。

其他就是简单的事件处理。

 var container = $('#nav'),
                elements = $('li', container),
                className = 'current',
                slider = $('.nav-line', container),
                now_index = $(elements).filter('.current').index(),
                array_w = $(elements).map(function() {
                    return $(this).outerWidth(true);
                }),
                initial_width = $('.current').width(),
                initial_position = $('.current').position();
            $('.nav-line').css({
                left: initial_position.left,
                width: initial_width
            });

            $(container).on('click', 'li', function() {
                // 获取当前点击的元素索引
                now_index = $(this).index();
                // 添加class
                $(this).addClass(className).siblings().removeClass(className);
                // 滑块移动至当前位置
                setSlider(now_index);
                alert(999)
            });
            $(container).on('mouseenter', 'li', function() {
                // 获取当前索引
                var i = $(this).index();
                // 滑块移动至当前位置
                setSlider(i);
            });
            $(container).on('mouseleave', function() {
                // 鼠标离开导航区域后, 滑块还原至最后点击的元素处
                setSlider(now_index);
            });

样式结构我就不写了。
demo

点赞