需求：在CSS封装的img图片范围内，让鼠标后方有图像跟着显示。
显示效果：
head里的Javascript代码：
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event){
if(event.type == "mouseover"){
$("#showBig").show();
}else if (event.type == "mouseout"){
$("#showBig").hide();
}else if (event.type == "mousemove"){
console.log(event);
$("#showBig").offset({
left:event.pageX +10, //不加10会和上面的mouseout发生冲突，显示闪烁
top:event.pageY + 10
});
}
})
});
</script>
body代码：
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
使用了jQuery里的$(“#id”)索引元素标签ID，同时采用bind方法对多个事件进行事件绑定。event属性里含有多个字段能够进行操作，使用event.type进行事件状态判断，再通过offset方法对属性pageX和pageY对图片显示的位置进行操作。
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
