Желаемый эффект - это то, что, по-видимому, называется / похоже на примеры Bubble-up или FishEye:
Я видел несколько примеров / плагинов, но у всех были проблемы / ограничения, наиболее заметными из которых являются:
- Недоступно с клавиатуры Требуется
- Предустановленные высота / ширина Влияет
- Предшествующие / следующие элементы / элементы
- Проблемы совместимости браузера
Я настроил некоторые из существующих примеров, но у меня сложилось четкое впечатление, что это не так упрощенокак и должно быть, и что в его поведении есть небольшие ошибки.
В идеале будет работать следующее:
1) Это позволит увеличить масштаб
2) Это позволит вамукажите любой элемент, на который нужно повлиять
3) Он будет обрабатывать Высота / Ширина / другие свойства автоматически
4) Он будет управлять, если свойство отсутствует / пусто
5) Это не повлияет на окружающие / предшествующие элементы(позиционированный абсолютоставляя элемент clone / holder)
Вот код, который у меня есть до сих пор:
<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) - но только до точки
Issues.
1) Для сценария требуется, чтобы для элемента был задан z-index.Возможно ли, чтобы это было проверено, и если z-index не определен, сценарий должен его установить?
2) Изменение размера шрифта, кажется, вызывает проблемы - измененный текст при наведении курсора огромен, а не то, что я быпринимается за «масштабирование» (я устанавливаю fs как em, изменяю размер текста, и при наведении он становится массивным, а после наведения не возвращается к нормальному размеру)
3) Код кажется раздутым?Я предполагаю, что есть лучшие способы сделать что-то из этого.
4) Скорость для анимации и анимации - возможно ли это?