简单的鼠标移动到图片上面即可展示图片的大图效果，随着鼠标移动，展示的大图也随之移动。一般常用于产品展示的网站页面！
效果图：
如图所示，当鼠标移动到对应的图片列表上面，相对于的大图会随着鼠标的移动位置随着移动。该效果运用到的原理有常用的jq处理事件、鼠标移动坐标获取知识、创建新节点知识。
下面来看下实例的代码：
html布局，设定了几个li用于排布展示的小图片，css样式就不多说了，可以设置自己喜欢的风格。
javascript代码：
当鼠标移到小图片元素li的时候，通过$（this）找到当前对应的图片。获取其href的值，然后创建一个新的节点tag，用于展示相对于的大图。当鼠标在图片上移动的时候，通过pageX、pageY获取鼠标的移动坐标，将移动坐标的值赋给新创建节点元素的左和上移动距离。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 787013311@qq.com 举报，一经查实，本站将立刻删除。