JS實現(xiàn)的鼠標(biāo)跟隨代碼(卡通手型點擊效果)
更新時間：2015年10月26日 11:10:09 作者：企鵝
這篇文章主要介紹了JS實現(xiàn)的鼠標(biāo)跟隨代碼,帶有卡通手型點擊效果.涉及JavaScript鼠標(biāo)事件的響應(yīng)與頁面元素的動態(tài)調(diào)用技巧,需要的朋友可以參考下
本文實例講述了JS實現(xiàn)帶有小手點擊效果的鼠標(biāo)跟隨代碼。分享給大家供大家參考，具體如下：
一個跟隨鼠標(biāo)的小手效果，鼠標(biāo)移在哪里，小手就跟著移向哪里，會出現(xiàn)手的效果，放在鏈接上的時候，手會變化，兩只手很可愛哦，JS鼠標(biāo)跟隨代碼分享與大家。
運行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/js-handle-style-focus-codes/
具體代碼如下：
<!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>可愛的鼠標(biāo)跟隨</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='images/cursor_hover.png' />";
return false;
}
document.onmouseup = function(){
oCursor.innerHTML = "<img src='images/cursor.png' />";
}
};
}
</script>
</head>
<body>
<div id="cursor"><img src="images/cursor.png" /></div>
<input type="button" style="font-size:36px; margin:100px;" value="點擊" onclick="window.open('http://www.baidu.com')" />
</body>
</html>
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
相關(guān)文章
今天小編就為大家分享一篇layui 彈出層值回傳解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了如何利用HTML+CSS+JS模仿Windows實現(xiàn)桌面主題特效，文中的示例代碼講講詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2022-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)簡單音樂播放器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了使用electron制作滿屏心特效的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
想必大家對參數(shù)傳遞并不陌生吧，本文為大家介紹下JS的參數(shù)傳遞,需要的朋友可以參考下2014-02-02
下面小編就為大家?guī)硪黄趈s對象,操作屬性、方法詳解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
關(guān)于導(dǎo)入excel時js轉(zhuǎn)換時間的正確方式
這篇文章主要給大家介紹了關(guān)于導(dǎo)入excel時js轉(zhuǎn)換時間的正確方式,以及js讀取excel中日期格式轉(zhuǎn)換問題的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
JS實現(xiàn)圖片元素轉(zhuǎn)BASE64編碼的簡單示例
在Web開發(fā)中,我們經(jīng)常需要將圖片轉(zhuǎn)換為Base64格式,以便在不依賴外部資源的情況下直接在HTML中使用,在這篇文章中,我將向您展示如何使用JavaScript將圖片元素轉(zhuǎn)BASE64編碼,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JavaScript命名空間模式,結(jié)合實例形式分析了javascript命名空間模式的相關(guān)概念、原理、實現(xiàn)方法及操作注意事項,需要的朋友可以參考下2019-06-06
深入理解JS中attribute和property的區(qū)別
property 和 attribute非常容易混淆，但實際上，二者是不同的東西，屬于不同的范疇，本文就詳細(xì)的介紹一下JS中attribute和property的區(qū)別 ，感興趣的可以了解一下2022-02-02