鼠标悬停内容移动切换jQuery特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是鼠标悬停内容移动切换jQuery特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>鼠标悬停内容移动切换jQuery</title>
<link href="css/zzsc.css" type="text/css" rel="stylesheet" />
</head>

<body>
<div id="menu-wrapper">
      <ul class="boxy-menu">
        <li>
          <div class="top">标题</div>
          <div class="bottom">
             标题提供精品网页特效,jQuery特效,CSS特效,JavaScript代码,flash特效等网页设计特效免费下载！
          </div>
        </li>
        <li>
          <div class="top">标题</div>
          <div class="bottom">
             标题提供精品网页特效,jQuery特效,CSS特效,JavaScript代码,flash特效等网页设计特效免费下载！
          </div>
        </li>
        
      </ul>
    </div>
<script src="js/jquery.min.js"></script>
<script src="js/boxymenu.js"></script>
<script type="text/javascript">
  $(document).ready(function () {
	  $('#menu-wrapper').boxymenu();
  });
</script>
</body>
</html>

JS代码(boxymenu.js):

(function ($){
	$.fn.extend({
	boxymenu:function (options){
	var settings = $.extend({
	menuItemWidth:200,menuItemHeight:150,boxHorizontal:4,boxVertical:3,loadAnimationSpeed:400,itemDisplaySpeed:1000}
,options);
	return this.each(function (){
	var frameWidth = settings.menuItemWidth;
	var frameHeight = settings.menuItemHeight;
	var timeFactor;
	var animationSpeed = settings.loadAnimationSpeed;
	var rows = settings.boxVertical;
	var cols = settings.boxHorizontal;
	var speed = settings.itemDisplaySpeed;
	//load animation var coordinates = new Array();
	var isAnimating = false;
	var wrapper = $(this);
	//hide all elements on load setTimeout(function (){
	//make clone of each item $('.boxy-menu>li',wrapper).each(function (){
	animateRandomFade($(this));
}
);
	var h = $('.boxy-menu li:first',wrapper).outerHeight();
	$('.boxy-menu>li',wrapper).append('<div class="btn-pin" title="Pin Menu"></div>');
	$('.boxy-menu>li .btn-pin',wrapper).toggle(function (){
	$(this).addClass('pinned');
	$(this).data('pinned',true);
	$(this).attr('title','Unpin Menu');
}
,function (){
	$(this).removeClass('pinned');
	$(this).data('pinned',false);
	$(this).attr('title','Pin Menu');
}
).hover(function (){
	if (!$(this).data('pinned')) $(this).addClass('pinned');
}
,function (){
	if (!$(this).data('pinned')) $(this).removeClass('pinned');
}
);
	$('.boxy-menu>li',wrapper).mouseenter(function (){
	if (!$(this).find('.btn-pin').hasClass('pinned')){
	$(this).find('.btn-pin').css('display','block');
	$(this).find('.top').stop(false,false).animate({
	marginTop:-h}
,speed,function (){
	isAnimating = false;
}
);
}
}
).mouseleave(function (){
	if (!$(this).find('.btn-pin').hasClass('pinned')){
	$(this).find('.btn-pin').css('display','none');
	$(this).find('.top').stop(false,false).animate({
	marginTop:0}
,speed,function (){
	isAnimating = false;
}
);
}
}
);
	function createBoxes(container){
	container.data('coordinates',new Array());
	container.data('complete',0);
	var w = frameHeight / rows;
	var h = frameWidth / cols;
	if (w % 10 > 0){
	w = parseInt(w);
	w++;
}
if (h % 10 > 0){
	h = parseInt(h);
	h++;
}
var totalBoxes = cols * rows;
	timeFactor = animationSpeed / totalBoxes;
	for (var i = 0;
	i < rows;
	i++){
	for (var j = 0;
	j < cols;
	j++){
	var box = $('<div/>').css({
	'width':w + 'px','height':h + 'px','top':(i * h) + 'px','left':(j * w) + 'px','position':'absolute'}
).addClass('boxy-el').addClass('piece').hide();
	container.append(box);
}
}
$(".boxy-el",container).each(function (index){
	var pos ={
	left:$(this).css('left'),top:$(this).css('top')}
;
	container.data('coordinates').push(pos);
}
);
	var randomElements = $(".boxy-el",container).get().sort(function (){
	return Math.round(Math.random()) - 0.5}
);
	container.data('elements',randomElements);
}
function animateRandomFade(container){
	createBoxes(container);
	var factor = 0;
	$(container.data('elements')).each(function (index){
	if (container.data('complete') < container.data('elements').length){
	var el = $(this);
	setTimeout(function (){
	try{
	el.fadeIn(animationSpeed,function (){
	var complete = container.data('complete');
	complete++;
	container.data('complete',complete) if (complete == container.data('elements').length){
	animationComplete(container);
}
}
);
}
catch (ex){
}
}
,factor);
	factor += timeFactor + 20;
}
}
);
}
function animationComplete(container){
	container.find('.top,.bottom').fadeIn(0);
	container.addClass('menuitem');
	container.find('.boxy-el').remove();
}
}
,100);
}
);
}
}
);
}
)(jQuery);

CSS代码(zzsc.css):

@charset "utf-8";*{margin:0;padding:0;list-style:none;}
.boxy-menu{height:150px;margin:30px auto;width:420px;}
.boxy-menu.hidden li{border:none;display:none !important;}
.boxy-menu li{margin:0;padding:0;width:200px;height:150px;display:inline;float:left;font-family:Arial;overflow:hidden;cursor:pointer;position:relative;margin-left:10px;}
.boxy-menu li.menuitem{background:#639A29;}
.top{color:#fff;font-weight:bold;font-size:24px;line-height:150px;text-align:center;display:none;}
.bottom{display:none;color:#fff;padding:20px;}
.piece{background:#639A29;}

附件:下载该文件资源,减少时间成本(增值服务)