jQuery图片放大
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<style>
#d{
width:300px;
height:300px;
background-color:pink;
color:white;
display:none;
position:absolute;
font-size:45px;
text-align:center;
line-height:50px;
font-weight:bold;
border:10px solid pink;
border-radius:250px;
}
#y{
width:200px;
height:200px;
top:300px;
left:275px;
position:absolute;
}
#e{
width:200px;
height:200px;
top:100px;
left:475px;
position:absolute;
}
#s{
width:200px;
height:200px;
top:300px;
left:675px;
position:absolute;
}
#q{
width:200px;
height:200px;
top:100px;
left:875px;
position:absolute;
}
</style>
</head>
<body>
<img id="y" src="img/img2.gif">
<img id="e" src="img/img4.gif">
<img id="s" src="img/img7.gif">
<img id="q" src="img/img12.gif">
</body>
<script>
$(function(){
$("img").hover(function(){
$("body").append("<img id='d' src='"+this.src+"'>");
},function(){
$("#d").remove();
});
$("img").mousemove(function(e){
$("#d").css({top:(e.pageY+1)+"px"})
.css({left:(e.pageX+1)+"px"})
.show();
});
});
</script>
</html>
