jQuery图片预览-jQuery在线演示-jQuery学习



img
{
border: none;
}


ul, li
{
margin: 0;
padding: 0;
}


li
{
list-style: none;
float: left;
display: inline;
margin-right: 10px;
}


#imglist img
{
width: 150px;
height: 120px;
}


#imgshow
{
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 5px;
color: #fff;
display: none;
}


var ShowImage = function () {
xOffset = 10;
yOffset = 30;
$("#imglist").find("img").hover(function (e) {
$("").appendTo("body");
//下面是两种样式赋值方法
//$("#imgshow").css("top", (e.pageY - xOffset) + "px").css("left", (e.pageX + yOffset) + "px").fadeIn("slow");
$("#imgshow").css({"top":(e.pageY - xOffset) + "px","left":(e.pageX + yOffset) + "px"}).fadeIn("slow");
}, function () {
$("#imgshow").remove();
});
};


jQuery(document).ready(function () {
ShowImage();
});