Home > Article > Web Front-end > Mouse following code implemented by JS (cartoon hand click effect)
Mouse following code implemented by JS (cartoon hand click effect)
- PHPzforward
- 2016-05-16 15:35:062158browse
This article mainly introduces the mouse following code implemented in JS, with cartoon hand click effects. Involving the response to JavaScript mouse events and the dynamic calling skills of page elements, friends who need it can refer to it, as follows:
A small hand effect that follows the mouse. Wherever the mouse moves, the little hand will follow. The hand effect appears. When placed on the link, the hands will change. The two hands are very cute. I will share the JS mouse following code with everyone.
A screenshot of the running effect is as follows:
The online demo address is as follows:
http://demo.jb51.net/ js/2015/js-handle-style-focus-codes/
The specific code is as follows:
<!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='images/cursor_hover.png' />";
return false;
}
document.onmouseup = function(){
oCursor.innerHTML = "<img src='images/cursor.png' />";
}
};
}
</script>
</head>
<body>
<p id="cursor"><img src="images/cursor.png" /></p>
<input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('http://www.baidu.com')" />
</body>
</html>The above is the entire content of this chapter. I hope it will be helpful to everyone in JavaScript programming. For more help, please visit JavaScript Video Tutorial for more related tutorials!