资料
表格
制度
合同
管理
职场
经营
创业
范文
总结
计划
作文
文章
美文
词句
教程
模板
图片
字体
图标
办公
人事
财务
生产
管理资源吧首页
>>>
教程
>>>
编程
>>>
JavaScript教程
>>>
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> <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%0D%0A%20window.onload%20%3D%20function()%7B%0D%0A%20%20var%20oCursor%20%3D%20document.getElementById(%22cursor%22)%3B%0D%0A%20%20document.onmousemove%3Dfunction%20(ev)%7B%0D%0A%20%20%20var%20oEvent%3Dev%7C%7Cevent%2C%0D%0A%20%20%20%20oWidth%20%3D%20document.documentElement.clientWidth%2C%0D%0A%20%20%20%20oHeight%20%3D%20document.documentElement.clientHeight%2C%0D%0A%20%20%20%20scrollTop%3Ddocument.documentElement.scrollTop%20%2B%20oEvent.clientY%2C%0D%0A%20%20%20%20scrollLeft%3Ddocument.documentElement.scrollLeft%20%2B%20oEvent.clientX%3B%0D%0A%20%20%20if(scrollTop%20%3E%20oHeight-oCursor.offsetHeight)%7B%0D%0A%20%20%20%20oCursor.style.top%20%3D%20oHeight-oCursor.offsetHeight%2B'px'%3B%0D%0A%20%20%20%7Delse%20if(scrollTop%20%3C%200)%7B%0D%0A%20%20%20%20oCursor.style.top%20%3D%200%3B%0D%0A%20%20%20%7Delse%7B%0D%0A%20%20%20%20oCursor.style.top%20%3D%20scrollTop%2B'px'%3B%0D%0A%20%20%20%7D%0D%0A%20%20%20if(scrollLeft%20%3E%20oWidth-oCursor.offsetWidth)%7B%0D%0A%20%20%20%20oCursor.style.left%20%3D%20oWidth-oCursor.offsetWidth%2B'px'%3B%0D%0A%20%20%20%7Delse%7B%0D%0A%20%20%20%20oCursor.style.left%20%3D%20scrollLeft%2B'px'%3B%0D%0A%20%20%20%7D%0D%0A%20%20%20document.onmousedown%20%3D%20function()%7B%0D%0A%20%20%20%20oCursor.innerHTML%20%3D%20%22%3Cimg%20src%3D'http%3A%2F%2Fwww.glzy8.com%2Fjscss%2Fdemoimg%2F201305%2Fcursor_hover.png'%20%2F%3E%22%3B%20%0D%0A%20%20%20%20return%20false%3B%0D%0A%20%20%20%7D%0D%0A%20%20%20document.onmouseup%20%3D%20function()%7B%0D%0A%20%20%20%20oCursor.innerHTML%20%3D%20%22%3Cimg%20src%3D'http%3A%2F%2Fwww.glzy8.com%2Fjscss%2Fdemoimg%2F201305%2Fcursor.png'%20%2F%3E%22%3B%20%0D%0A%20%20%20%7D%0D%0A%20%20%7D%3B%0D%0A%20%7D%0D%0A%3C%2Fscript%3E"> </head> <body> <div id="cursor"><img src="http://www.glzy8.com/jscss/demoimg/201305/cursor.png" _ewebeditor_ta_src="http%3A%2F%2Fwww.glzy8.com%2Fjscss%2Fdemoimg%2F201305%2Fcursor.png" /></div> <input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('http://www.glzy8.com')" /> </body> </html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行
]
教程首页
更多教程