如何用QQ代碼制作QQ空間鼠標跟隨？產品展示的網站頁面 _經驗分享

簡單的鼠標移動到圖片上面即可展示圖片的大圖效果，隨著鼠標移動，展示的大圖也隨之移動。一般常用于產品展示的網站頁面！
效果圖：

文章插圖

如圖所示，當鼠標移動到對應的圖片列表上面，相對于的大圖會隨著鼠標的移動位置隨著移動。該效果運用到的原理有常用的jq處理事件、鼠標移動坐標獲取知識、創建新節點知識。
下面來看下實例的代碼：

文章插圖

html布局，設定了幾個li用于排布展示的小圖片，css樣式就不多說了，可以設置自己喜歡的風格。
javascript代碼：

文章插圖

【如何用QQ代碼制作QQ空間鼠標跟隨？產品展示的網站頁面】當鼠標移到小圖片元素li的時候，通過$（this）找到當前對應的圖片。獲取其href的值，然后創建一個新的節點tag ，用于展示相對于的大圖。當鼠標在圖片上移動的時候，通過pageX、pageY獲取鼠標的移動坐標，將移動坐標的值賦給新創建節點元素的左和上移動距離。