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

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值