jquery 鼠标移动到缩略图上侧边有放大图片效果
CSS样式如下：
[code]<style type=”text/css”>
body{ position:relative;}
li{ float:left; margin-right:10px;}
#toopimg{ position:absolute; z-index:1;}
</style>[/code]
JS部分代码：
[code]$(function(){
$(‘ul li a img’).mouseover(function(){
var toopimg ='<div id=”toopimg”><img src=”‘+this.src+'”><div>’+this.alt+'</div></div>’;
$(toopimg).prependTo($(this).parents(‘li’));
}).mouseout(function(){
toopimg.remove();
}).mousemove(function(e){
$(‘#toopimg’).css({‘left’:20+e.pageX+’px’,
‘top’:20+e.pageY+’px’
});
});
$(document).mousemove(function(e){
$(“span”).text(“X: ” + e.pageX + “, Y: ” + e.pageY);
});
});[/code]
html代码部分：
[code]<body>
<span>111</span>
<ul>
<li><a href=”upload/1.jpg”><img alt=”你好1″ src=”upload/1.jpg” /></a></li>
<li><a href=”upload/2.jpg”><img alt=”你21″ src=”upload/2.jpg” /></a></li>
<li><a href=”upload/3.jpg”><img alt=”你1″ src=”upload/3.jpg” /></a></li>
</ul>
</body>[/code]