Js鼠標跟隨代碼小手點擊實例方法

更新時間：2013年05月21日 10:09:11 作者：

一個跟隨鼠標的小手效果，鼠標移在哪里，小手就跟著移向哪里，會出現(xiàn)手的效果，放在鏈接上的時候，手會變化，兩只手很可愛哦，JS鼠標跟隨代碼分享與大家。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>可愛的鼠標跟隨</title><style>html{ background:#000;}body,html,input{ cursor:none;}body,html{ height:100%;}#cursor{ position:absolute; left:100px; top:100px; display:block;}</style><script> window.onload = function(){  var oCursor = document.getElementById("cursor");  document.onmousemove=function (ev){   var oEvent=ev||event,    oWidth = document.documentElement.clientWidth,    oHeight = document.documentElement.clientHeight,    scrollTop=document.documentElement.scrollTop + oEvent.clientY,    scrollLeft=document.documentElement.scrollLeft + oEvent.clientX;   if(scrollTop > oHeight-oCursor.offsetHeight){    oCursor.style.top = oHeight-oCursor.offsetHeight+'px';   }else if(scrollTop < 0){    oCursor.style.top = 0;   }else{    oCursor.style.top = scrollTop+'px';   }   if(scrollLeft > oWidth-oCursor.offsetWidth){    oCursor.style.left = oWidth-oCursor.offsetWidth+'px';   }else{    oCursor.style.left = scrollLeft+'px';   }   document.onmousedown = function(){    oCursor.innerHTML = "<img src='http://www.dhdzp.com/jscss/demoimg/201305/cursor_hover.png' />";     return false;   }   document.onmouseup = function(){    oCursor.innerHTML = "<img src='http://www.dhdzp.com/jscss/demoimg/201305/cursor.png' />";    }  }; }</script></head><body><div   class="zhzszr2"   id="cursor"><img src="http://www.dhdzp.com/jscss/demoimg/201305/cursor.png" /></div><input type="button" style="font-size:36px; margin:100px;" value="點擊" onclick="window.open('http://www.dhdzp.com')" /></body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

相關(guān)文章

10種JavaScript最常見的錯誤(小結(jié))
這篇文章主要介紹了10種JavaScript最常見的錯誤(小結(jié))，查看了數(shù)千個項目后，發(fā)現(xiàn)了 10 個最常見的 JavaScript 錯誤。我們會告訴你什么原因?qū)е铝诉@些錯誤，以及如何防止這些錯誤發(fā)生
2019-06-06
Echarts圖表位置調(diào)整的圖文教程
實際過程中你會發(fā)現(xiàn)圖表在div中的位置不太理想,這時怎么去調(diào)整呢?下面這篇文章主要給大家介紹了關(guān)于Echarts圖表位置調(diào)整的相關(guān)資料,需要的朋友可以參考下
2022-10-10
BootstrapVue選項卡標題增加關(guān)閉按鈕的方法
這篇文章主要為大家詳細介紹了BootstrapVue選項卡標題增加關(guān)閉按鈕的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-04-04
兩個函數(shù)相互調(diào)用如何防止死循環(huán)
這篇文章主要介紹了兩個函數(shù)相互調(diào)用如何防止死循環(huán)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-03-03
html5+javascript實現(xiàn)簡單上傳的注意細節(jié)
這篇文章主要為大家詳細介紹了html5+javascript實現(xiàn)上傳操作的注意細節(jié)，form表單樣式不美觀等細節(jié)問題，感興趣的小伙伴們可以參考一下
2016-04-04
layui之table checkbox初始化時選中對應選項的方法
今天小編就為大家分享一篇layui之table checkbox初始化時選中對應選項的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-09-09
javascript CSS畫圖之基礎篇
要在瀏覽器上動態(tài)地畫圖（矢量圖），個人覺得矢量圖中最關(guān)鍵的兩點.
2009-07-07
JS+CSS實現(xiàn)的豎向簡潔折疊菜單效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)的豎向簡潔折疊菜單效果代碼,涉及JavaScript鏈式操作與元素遍歷等相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-10-10
JS document文檔的簡單操作完整示例
這篇文章主要介紹了JS document文檔的簡單操作,結(jié)合完整實例形式詳細分析了JavaScript document文檔元素添加、刪除、獲取、創(chuàng)建等相關(guān)操作技巧與使用注意事項,需要的朋友可以參考下
2020-01-01
手把手教你uniapp和uview2.0實現(xiàn)表單校驗實戰(zhàn)
表單提交對大家來說應該都不陌生,這是個很常見的功能,這篇文章主要給大家介紹了關(guān)于手把手教你uniapp和uview2.0實現(xiàn)表單校驗的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-05-05