所期望的效果似乎被称为/类似于冒泡或鱼眼的例子：
我已经看过一些示例/插件，但所有问题/限制都是最显着的：
我已经调整了一些现有的例子，但我得到了一个明显的印象，即它不像它应该的那样简化，并且它的行为几乎没有错误。
理想情况下，以下方法有效;
1）它将允许扩大规模
2）它允许您指定任何受影响的元素
3）它将自动处理高度/宽度/其他属性
4）如果财产不存在/空，它将进行管理
5）它不会影响周围/前面的元素（在离开克隆/持有元素时绝对定位）
这是我到目前为止的代码：
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// NOTE: the element to become enlarged must have a z-index value! (even if you set it as 1)
$(function(){
function fatOnHover($elements, zoomSize, animationSpeed){
$elements.each(function(i){
var $wrap, height, width, left, bigWidth, bigHeight, $that = $(this);
// Get the item height/width, and create the enlarged dimensions
height = $that.height();
width = $that.width();
bigWidth = (width / 100) * zoomSize;
bigHeight = (height / 100) * zoomSize;
// Calculate the positioning (negative pull) based on the size difference of normal to enlarged
left = (bigWidth - width) / 2;
top = (bigHeight - height) / 2;
// Addition for Text enlargening (gets font-size and sets enlarged font-size) (should accept any measurement (px/em etc.))
//currFontSize = $that.css("font-size");
//fontSize = parseFloat(currFontSize, 10);
//fontEnding = currFontSize.slice(-2);
//bigfontsize = (fontSize / 100) * zoomSize;
// Get and Set the z-index = MUST make sure the item to be enlarged has a z-index (even if set to 1)
// Ideally - should detect if there is a value, if not, set one
currzindex = parseInt($that.css('z-index'));
//currzindex = 100;
zindexoffset = 900;
bigZindex = currzindex + zindexoffset;
// Insert div before/around the item to be enlarged (and to the same height/width)
$wrap = "<div style='width: " + width + "px; height: " + height + "px; position: relative;'></div>",
// Actually - no idea what all of this is for :D
$that.data({"width": width, "height": height, "bigWidth": bigWidth, "bigHeight": bigHeight, "left": left, "top": top, /*"fontSize": fontSize, "bigfontsize": bigfontsize, "fontEnding": fontEnding,*/ "currzindex": currzindex, "bigZindex": bigZindex})
.wrap($wrap)
})
// Define function/behavious for focus/hover
.bind('mouseenter mouseover focus',
function(){
var $that = $(this);
$that.stop().css('z-index', $that.data("bigZindex")).animate({"width": $that.data("bigWidth"), "height": $that.data("bigHeight"), "left": -$that.data("left"), "top": -$that.data("top")/*, "fontSize": $that.data("bigfontsize")+$that.data("fontEnding")*/}, animationSpeed);
})
// Define function/behavious for loss of focus/hover (normal)
.bind('mouseleave mouseout blur',
function(){
var $that = $(this);
$that.stop().css('z-index', $that.data("currzindex")).animate({"width": $that.data("width"), "height": $that.data("height"), "left": '0', "top": '0'/*, "fontSize": $that.data("fontSize")+$that.data("fontEnding")*/}, animationSpeed);
})
// Assigns position absolute to item to be enlarged
.css("position", "absolute")
}
fatOnHover($('#nav li a'), 135, 900);
})
});
//]]>
</script>
我已经注释掉了一些代码（比如字体大小的东西）。 这是由于我遇到的一个“错误”。
我认为我已经完成了使用键盘/鼠标的正确操作 我想我已经设法处理了一些额外的属性（比如z-index和font-size） - 但只能达到一点
问题。
1）脚本要求受影响的项目定义了z-index。
是否有可能检查它，如果没有定义z-index，脚本设置一个？
2）字体调整大小似乎会导致问题 - 悬停时调整大小的文本很大，而不是我认为的“缩放”（我将fs设置为em，调整文本大小，并且它在悬停时很大，并且不会悬停后恢复正常大小）
3）代码似乎臃肿？我假设有更好的办法来做这些事情。
4）动画和动画输出的速度 - 是否可能？
答案 0 :(得分：0)
我看到的第一个问题是你在DOM ready事件中有一个DOM ready事件。
这是我的代码版本，其中包含优化评论。我已经引入了更多局部变量来清理全局范围。我删除了匈牙利表示法，但如果你愿意，你可以把它放回去：
//<![CDATA[
$(function() {
var fatOnHover = function(elements, zoomSize, animationSpeed) {
elements.each(function() {
var wrap, options, tempZ, currFontSize, zindexoffset = 900, element = $(this);
tempZ = element.css('z-index');
currFontSize = element.css('font-size')
options = {
height : element.height(),
width : element.width(),
fontSize : parseFloat(currFontSize, 10),
fontEnding : currFontSize.slice(-2),
currzindex : (tempZ === undefined || tempZ === 'auto') ? 100 : parseInt(tempZ)
};
$.extend(options, {
bigWidth : (options.width / 100) * zoomSize,
bigHeight : (options.height / 100) * zoomSize,
bigZindex : options.currzindex + zindexoffset,
bigfontsize : (options.fontSize / 100) * zoomSize
});
$.extend(options, {
left : (options.bigWidth - options.width) / 2,
top : (options.bigHeight - options.height) / 2
});
wrap = ['<div style="height:',options.height,'px;width:',options.width,'px;position:relative;"></div>'].join('');
element.data(options).wrap(wrap);
})
// Define function/behavious for focus/hover
.bind('mouseenter mouseover focus', function() {
var element = $(this);
element
.css('z-index', element.data('bigZindex'))
.stop()
.animate({
'width':element.data('bigWidth'),
'height':element.data('bigHeight'),
'left':-element.data('left'),
'top':-element.data('top'),
'fontSize':[
element.data('bigfontsize'),
element.data('fontEnding')
].join('')
}, animationSpeed);
})
// Define function/behavious for loss of focus/hover (normal)
.bind('mouseleave mouseout blur',
function() {
var element = $(this);
element
.css('z-index', element.data('currzindex'))
.stop()
.animate({
'width':element.data('width'),
'height':element.data('height'),
'left':'0',
'top':'0',
'fontSize':[
element.data('fontSize'),
element.data('fontEnding')
].join('')
}, animationSpeed);
})
// Assigns position absolute to item to be enlarged
.css('position', 'absolute')
};
fatOnHover($('#nav li a'), 200, 100);
});
//]]>
上面的代码动画文本没问题。经过FF，Chrome和IE7测试。