随鼠标晃动函数
为了提升用户体验,写了个小函数,实现随鼠标晃动而晃动
代码如下:
$.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();