jquery实现简单鼠标经过图片预览效果

html结构:
<div class="prebtn"><img src=""/></div> css代码:
#preview{
    position:absolute;
border:2px solid #333;
background:#333;
padding:0px;
display:none;
color:#fff;
}
#preview img{ height:auto; width:auto; max-width: 500px; margin: 0; display: block; }
javascript代码:
this.imagePreview = function(){
    xOffset = 10;
yOffset = 30;
$(".prebtn").hover(function(e){
var imgsrc=$(this).find("img").attr("src");
$("body").append("<p id='preview'><img src='"+imgsrc+"' alt='Image preview' /></p>");
$("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px")
.fadeIn("fast");
},function(){
$("#preview").remove();
}); $(".prebtn").mousemove(function(e){
        $("#preview")
.css("top",(e.pageY - xOffset) + "px")
.css("left",(e.pageX + yOffset) + "px");
});
}; 
$(function(){
//鼠标经过预览图片
imagePreview();
});
上一篇:C# 根据身份证号码获取简易信息


下一篇:jq,js简单实现类似Angular.js数据绑定效果