jQuery元素跟随鼠标手势滑动【原】

<!DOCTYPE html>
<html>
<head>
    <title>mouseDirectorySlide</title>
    <meta charset="utf-8">
</head>
<style>
    *{margin: 0;padding: 0;}
    body{background: #f3f3f3;}
    ul{position: absolute;top: 50%;left: 50%;width: 750px;margin: -250px -375px;overflow: hidden;list-style: none;}
    ul li{float: left;cursor: default;}
    ul li .fore{float: left;width: 250px;height: 250px;font: 18px/250px "Consolas";color: #fff;text-align: center;letter-spacing: 1px;text-transform: capitalize;}
    ul li .box{float: left;width: 150px;padding: 85px 50px;background: #fff;font: 14px/40px "Microsoft YaHei";color: #222;text-align: center;letter-spacing: 1px;}
    ul li.item-1 .fore{background: #c03;}
    ul li.item-2 .fore{background: #393;}
    ul li.item-3 .fore{background: #036;}
    ul li.item-4 .fore{background: #639;}
    ul li.item-5 .fore{background: #0ff;}
    ul li.item-6 .fore{background: #f90;}
</style>
<body>
    <ul>
        <li class="item-1">
            <div class="fore">red</div>
            <div class="box">吉祥　喜气　热烈<br>奔放　激情　斗志</div>
        </li>
        <li class="item-2">
            <div class="fore">green</div>
            <div class="box">和平　希望　宁静<br>自然　成长　生机</div>
        </li>
        <li class="item-3">
            <div class="fore">blue</div>
            <div class="box">美丽　冷静　理智<br>安详　广阔　永恒</div>
        </li>
        <li class="item-4">
            <div class="fore">purple</div>
            <div class="box">优雅　高贵　魅力<br>自傲　神秘　权威</div>
        </li>
         
        <li class="item-5">
            <div class="fore">cyan</div>
            <div class="box">坚强　希望　古朴<br>庄重</div>
        </li>
        <li class="item-6">
            <div class="fore">orange</div>
            <div class="box">明亮　华丽　兴奋<br>温暖　欢乐　辉煌</div>
        </li>
    </ul>
</body>
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    $.fn.mouseDirectorySlide = function(option) {
        var options = $.extend(true, {
            cover: true,
            speed: 300,
            easing: ‘swing‘
        }, typeof option === ‘object‘ && option);
   
        return $(this).each(function() {
            var $visibleElem = $(this).children(‘:first‘),
                $hiddenElem = $(this).children(‘:last‘);
   
            if ($(this).css(‘position‘) === ‘static‘) {
                $(this).css(‘position‘, ‘relative‘);
            }
   
            if ($(this).css(‘overflow‘) === ‘visible‘) {
                $(this).css(‘overflow‘, ‘hidden‘);
            }
   
            if ($visibleElem.css(‘position‘) === ‘static‘) {
                $visibleElem.css(‘position‘, ‘relative‘);
            }
   
            $visibleElem.css({
                top: 0,
                left: 0
            });
   
            $hiddenElem.css({
                position: ‘absolute‘,
                zIndex: 1,
                top: ‘100%‘,
                left: ‘100%‘
            });
   
            $(this).mouseenter(function(e) {
                if ($(this).is(‘:animated‘)) return;
   
                e = event || window.event;
   
                var pointerX = e.pageX,
                    pointerY = e.pageY,
                    width    = $(this).width(),
                    height   = $(this).height(),
                    top      = $(this).offset().top,
                    left     = $(this).offset().left;
   
                var pointerToTop    = Math.abs(pointerY - top),
                    pointerToBottom = Math.abs(pointerY - top - height),
                    pointerToLeft   = Math.abs(pointerX - left),
                    pointerToRight  = Math.abs(pointerX - left - width);
   
                var pointerToBorderMin = Math.min(pointerToTop, pointerToRight, pointerToBottom, pointerToLeft),
                    $slideElem = options.cover ? $hiddenElem : $(this).children(),
                    hiddenElemInit = {},
                    slideElemTarget = {},
                    setOriginProp = function() {
                        $slideElem.attr(‘origin-top‘, function() {
                            return $(this).css(‘top‘);
                        });
   
                        $slideElem.attr(‘origin-left‘, function() {
                            return $(this).css(‘left‘);
                        });
                    };
  
                switch (pointerToBorderMin) {
                    case pointerToTop:
                        hiddenElemInit = { top: ‘-100%‘, left: 0 };
                        slideElemTarget = { top: ‘+=100%‘ };
                        break;
   
                    case pointerToRight:
                        hiddenElemInit = { top: 0, left: ‘100%‘};
                        slideElemTarget = { left: ‘-=100%‘ };
                        break;
   
                    case pointerToBottom:
                        hiddenElemInit = { top: ‘100%‘, left: 0 };
                        slideElemTarget = { top: ‘-=100%‘ };
                        break;
   
                    case pointerToLeft:
                        hiddenElemInit = { top: ‘0‘, left: ‘-100%‘};
                        slideElemTarget = { left: ‘+=100%‘ };
                        break;
                }
                  
                $hiddenElem.css(hiddenElemInit);
  
                setOriginProp();
                  
                $slideElem.stop(true, false).animate(slideElemTarget, options.speed, options.easing);
   
                $(this).mouseleave(function() {
                    $slideElem.each(function() {
                        $(this).stop(true, false).animate({
                            top: $(this).attr(‘origin-top‘),
                            left: $(this).attr(‘origin-left‘)
                        }, options.speed, options.easing);
                    });
                });
            });
        });
    };
   
    $(‘ul li‘).mouseDirectorySlide();
</script>
</html>