php 鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)

这篇文章主要介绍了JS实现的鼠标跟随代码，带有卡通手型点击效果。涉及JavaScript鼠标事件的响应与页面元素的动态调用技巧，需要的朋友可以参考下，具体如下：

一个跟随鼠标的小手效果，鼠标移在哪里，小手就跟着移向哪里，会出现手的效果，放在链接上的时候，手会变化，两只手很可爱哦，JS鼠标跟随代码分享与大家。

运行效果截图如下：

在线演示地址如下：

具体代码如下：/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

可爱的鼠标跟随

html{ background:#000;}

body,html,input{ cursor:none;}

body,html{ height:100%;}

#cursor{ position:absolute; left:100px; top:100px; display:block;}

window.onload = function(){

var oCursor = document.getElementById("cursor");

document.οnmοusemοve=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 = "";

return false;

}

document.onmouseup = function(){

oCursor.innerHTML = "";

}

};

}

以上就是本章的全部内容，希望对大家JavaScript程序设计有所帮助，更多相关教程请访问JavaScript视频教程！

本文转载于：脚本之家，如有侵犯，请联系a@php.cn删除

php 鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)相关推荐

jquery 手型鼠标穿过时_JS实现的鼠标跟随代码(卡通手型点击效果)
本文实例讲述了JS实现带有小手点击效果的鼠标跟随代码.分享给大家供大家参考,具体如下: 一个跟随鼠标的小手效果,鼠标移在哪里,小手就跟着移向哪里,会出现手的效果,放在链接上的时候,手会变化,两只手很可 ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
js鼠标移动到某个元素上改变鼠标样式，如悬浮小手、禁用鼠标、等待...
js鼠标移动到某个元素上改变鼠标样式:则在这个元素的样式里加上 cursor:(你想改的样式). eg: <table border="0" style="cu ...
监听js变量的变化_JS监听事件型爬虫
点击上方"Python数据科学",选择"星标公众号" 关键时刻,第一时间送达! 作者:zuobangbang 来源:zuobangbang 最近开始研究网页参数 ...
html鼠标变成小手_什么牌子的鼠标好用？2020双十一鼠标选购建议和产品推荐
目录什么品牌的鼠标好? 选择鼠标时要考虑的因素选购建议鼠标产品推荐(20元到1000元) 鼠标垫推荐什么品牌的鼠标好? 鼠标的技术门槛不算高,所以品牌众多,不过经过市场的不断洗礼和选择,剩下知 ...
javascript算法+手写js面试题
链表 function ListNode(val, next) {this.val = (val===undefined ? 0 : val)this.next = (next===undefined ...
html鼠标触发显示悬浮窗,JS事件之鼠标悬浮窗（鼠标悬浮窗抖动问题的解决）
鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就 ...
用鼠标拖动图片的JS代码
代码简介: 用鼠标拖动一个图片移动,就像拖动一个层一样,这是一个JS拖动类代码,你可以无限制的增加图片,代码复用率比较高. 代码内容: View Code <html><HEAD&g ...
图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动图片跟随鼠标移动并放大js特效很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...

php 鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)

php 鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)相关推荐

最新文章

热门文章

php 鼠标 移动 手型,JS实现的鼠标跟随代码(卡通手型点击效果)

php 鼠标 移动 手型,JS实现的鼠标跟随代码(卡通手型点击效果)相关推荐

最新文章

热门文章

php 鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)

php 鼠标移动手型,JS实现的鼠标跟随代码(卡通手型点击效果)相关推荐