标签：
使用jquery编写的简洁易用的鼠标hover交互效果；
可以传递3个参数：
cover[Boolean]: 隐藏元素滑动时是否覆盖默认显示的元素；
speed[Number]: 元素滑动的速度；
easing[String]: 动画缓动效果，需要另外调用jquery.easing.js
<!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>
标签：
原文地址：http://www.cnblogs.com/happyfreelife/p/5792271.html
