如何用QQ代码制作QQ空间鼠标跟随？产品展示的网站页面 _经验分享

简单的鼠标移动到图片上面即可展示图片的大图效果，随着鼠标移动，展示的大图也随之移动。一般常用于产品展示的网站页面！
效果图：

文章插图

如图所示，当鼠标移动到对应的图片列表上面，相对于的大图会随着鼠标的移动位置随着移动。该效果运用到的原理有常用的jq处理事件、鼠标移动坐标获取知识、创建新节点知识。
下面来看下实例的代码：

文章插图

html布局，设定了几个li用于排布展示的小图片，css样式就不多说了，可以设置自己喜欢的风格。
javascript代码：

文章插图

【如何用QQ代码制作QQ空间鼠标跟随？产品展示的网站页面】当鼠标移到小图片元素li的时候，通过$（this）找到当前对应的图片。获取其href的值，然后创建一个新的节点tag ，用于展示相对于的大图。当鼠标在图片上移动的时候，通过pageX、pageY获取鼠标的移动坐标，将移动坐标的值赋给新创建节点元素的左和上移动距离。