我正在为我工作的迪斯科舞厅建立一个全新的网站。
请看客人页面:http://www.jubileegroup.it/jubilee/guests.php
当指针在图片上移动时,我已经能够获得我想要的确切效果,但我认为我的代码真的......很糟糕......我确信必须有更干净的东西。
我在 jQuery ready() 中使用它:
$(".oneguest").bind("mouseenter", function () {
//get the actual coords of the div
var coord = $(this).position();
//show guest's name
$(".guestname", $(this)).show('slow');
//I create another div with id = tempguest to make the other divs not to move!
$(this).after("<div class='oneguest' id='tempguest'></div>");
//check if this is the fifth element of the row (.norm = no right margin)
if ($(this).hasClass('norm')) {
$("#tempguest").addClass('norm');
}
//I convert the div in an absolute positioned div and place it perfectly centered with his older position
$(this).css("width", "246px");
$(this).css("height", "300px");
$(this).css("border", "5px solid #ddd");
$(this).css("top", (coord.top - 66) + "px");
$(this).css("left", (coord.left - 39) + "px");
$(this).css("position", "absolute");
$(this).css("z-index", "100");
});
//on mouseleave I destroy the "placeholder" div (id=tempguest) and reconvert the div to non-absolute.
$(".oneguest").bind("mouseleave", function () {
$("#tempguest").remove();
$(".guestname", $(this)).hide('fast');
$(this).css("width", "176px");
$(this).css("height", "176px");
$(this).css("border", "1px solid #ddd");
$(this).css("top", "");
$(this).css("left", "");
$(this).css("position", "inherit");
$(this).css("z-index", "1");
});
就像我说的效果一样,但我认为我的解决方案一点也不漂亮! 你怎么看?
最佳答案
主要清理工作是 .css()
可以带一个对象和.hover()
作为 mouseenter
和 mouseleave
的快捷方式,如下所示:
$(".oneguest").hover(function () {
var coord = $(this).position();
$(this).find(".guestname").show('slow');
$(this).after("<div class='oneguest' id='tempguest'></div>");
if ($(this).hasClass('norm'))
$("#tempguest").addClass('norm');
$(this).css({ width: "246px",
height: "300px",
border: "5px solid #ddd",
top: (coord.top - 66) + "px",
left: (coord.left - 39) + "px",
position: "absolute",
z-index: "100" });
}, function () {
$("#tempguest").remove();
$(this).find(".guestname").hide('fast');
$(this).css({ width: "176px",
height: "176px",
border: "1px solid #ddd",
top: "",
left: "",
position: "inherit",
z-index: "1" });
});
这里在优化方面没什么可做的,但确实让它更漂亮了。
关于jquery - 在 mouseeenter 上制作一个 div 弹出窗口(内部的工作示例)要求代码优化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2904117/