使用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>
时间： 2024-10-12 20:45:36