| 本文实例为大家分享了jQuery实现图片跟随效果的具体代码，供大家参考，具体内容如下 实现效果
要实现的功能： * 鼠标进来，显示大图片；
* 鼠标出去，隐藏大图片；
* 鼠标在大图片里边动，大图片跟着动。 代码<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><style type="text/css"> body { text-align: center; } #small { margin-top: 150px; } #showBig { position: absolute; display: none; }</style><script type="text/javascript" src="script/jquery-1.7.2.js"></script><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, top: event.pageY + 10 /* * 本来，鼠标是在大的图片的左上角，但是会产生问题：当鼠标从小图片的左上角，向右下角移动的时候 * 鼠标会先出大图片的区域，被判断为mouseout，大的图片应该被隐藏； * 后来又发现下边实际上是小图片的区域，被判定为nouseover，大的图片又显示出来。 * ---->会使得页面变换过快 * ==>解决方法：让鼠标放在大的图片外，距离大的图片的左上角有一定的小距离。 * 在鼠标 从小的图片的左上角 向右下角移动的过程中，就会避免上边的情况发生 * 因为，只要鼠标还在小图片的范围内，就不会出现大图片遮挡住下一刻 鼠标将要到达位置的小图片事情发生 */ }); } }); });</script></head><body> <img id="small" src="img/small.jpg" /> <div id="showBig"> <img src="img/big.jpg"> </div></body></html>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持wanshiok.com。
javascript实现自定义滚动条效果
JavaScript 解决ajax中parsererror错误案例详解 |
