<script type=”text/javascript”>
//<![CDATA[
$(function(){
var x = 22;
var y = 20;
$(“a.smallimage”).hover(function(e){ //绑定一个鼠标悬停时事件
//新建一个p标签来存放大图片，this.rel就是获取到a标签的大图片的路径，然后追加到body中
$(“body”).append(‘<p id=”bigimage”><img src=”‘+%20this.rel%20+%20′” alt=”” /></p>’);
//改变小图片的透明度为0.5，结合上面的CSS，看起来就象是图片变暗了
$(this).find(‘img’).stop().fadeTo(‘slow’,0.5);
//将鼠标的坐标和声明的x，y做运算并赋值给大图片绝对定位的坐标，然后以fadeIn的效果显示
$(“#bigimage”).css({top:(e.pageY – y ) + ‘px’,left:(e.pageX + x ) + ‘px’}).fadeIn(‘fast’);
},function(){ //鼠标离开后
//将变暗的图片复原
$(this).find(‘img’).stop().fadeTo(‘slow’,1);
//移除新增的p标签
$(“#bigimage”).remove();
});
$(“a.smallimage”).mousemove(function(e){ //绑定一个鼠标移动的事件
//将鼠标的坐标和声明的x，y做运算并赋值给大图片绝对定位的坐标，这样大图片就能跟随图片而移动了
$(“#bigimage”).css({top:(e.pageY -y ) + ‘px’,left:(e.pageX + x ) + ‘px’});
});
});
//]]>
</script>
到这一步，效果已经差不多了，但是正如蓝秋枫同志提到的，效果还并不完美。如果弹出的大图片超过了浏览器的宽度就会出现滚动条，这对于用户体验来说的确很不好。趁周末有时间我又在原来的基础上进行了修改。
先分析下思路，默认情况下，弹出的大图片的位置始终是在当前鼠标指针的右侧，如果当前鼠标指针离浏览器右侧边界的宽度小于弹出的大图片的宽度时，就会出现图片溢出浏览器的现象。那么只要写一个语句判断当前鼠标指针离浏览器右侧的边界的宽度是否小于大图片的宽度，然后再根据这个判断来显示。
有了上面的思路就好办了，为了使代码更简洁，提高复用性，我新增了一个widthJudge函数用于判断宽度：
