所需的效果似乎被称为/类似于 Bubble-up 或 FishEye 示例:
我看过一些示例/插件,但都有问题/限制,最值得注意的是:
- 无法通过键盘访问 需要
- 预设高度/宽度影响
- 前面/后面的项目/元素
- 浏览器兼容性问题
我已经调整了一些现有的示例,但我得到的明显印象是它没有像应有的那样精简,并且它的行为有一些小错误。
理想情况下,以下将起作用;
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)动画输入和动画输出的速度 - 可能吗?