随鼠标晃动函数

为了提升用户体验,写了个小函数,实现随鼠标晃动而晃动

代码如下:

$.extend({
    /**
     * 跟随鼠标晃动
     * @param {String} data-slide-mode : 模式 1:横竖一起动 2:只横向移动 3:只垂直移动
     * @param {String} data-slide-speed : 移动速度 
     * @param {String} data-slide-step : 移动距离 建议10-50
     */
    moveSlide:function(){
        var objs = $('[data-slide-mode]');
        $.each(objs,function(i,e){
            var $this = $(e),
                _left = $this.position().left,
                _top = $this.position().top,
                $window = $(window),
                winWidth = $window.width() / 2,
                winHeight = $window.height() / 2;
            $(document).mousemove(function(e) {
                var diffX = winWidth - e.pageX,
                    diffY = winHeight - e.pageY,
                    mode = $this.data("slide-mode") || 0,
                    step = $this.data("slide-step") || 50,
                    speed = $this.data("slide-speed") || 50;
                switch(mode) {
                    case 2 : 
                        $this.stop().animate({
                            'left': _left + diffX / step + 'px'
                        }, speed,'swing');                                                                
                        break;
                    case 3 : 
                        $this.stop().animate({
                            'top':_top + diffY / step + 'px'
                        }, speed,'swing');                                
                        break;
                    default :
                        $this.stop().animate({
                            'left': _left + diffX / step + 'px',
                            'top':_top + diffY / step + 'px'
                        }, speed,'swing');
                }
            });
        });
    }
});

html:

<div class="slideBox" data-slide-mode="1" data-slide-step="50" data-slide-speed="50">

调用方法:

$.moveSlide();

 

posted @ 2017-05-10 16:48  BarryChen89  阅读(175)  评论(0编辑  收藏  举报