一个为大田百姓服务的信息资讯门户网站——dt001.com
网站首页 | 信息资讯 | 网上商城 | 企业黄页 | 人才市场 | 供求信息 | 房产交易 | 二手市场
消费e店 | 时尚生活 | 在线影院 | flash动漫 | 笑话频道 | 真情交友 | 电子相册 | 博客日志
广告760*100位置BANNER
您所在的位置:大田资讯网 > 浏览正文
简单的鼠标跟随
dt001.com  发布:2007-1-4 14:06:44  来自:转载  浏览:

 

        当鼠标在这个页面上移动时会有一个可爱的小鼹鼠跟着你的鼠标跑来跑去,很有趣,那这种效果是如何实现的呢?

  我们先把源码粘贴框中的JavaScript代码加入到Html的<body>标签内:

<script language="javascript" type="text/javascript">
function mousemoving(e)
{
 if(document.layers)
 {
status="x:"+document.floatDiv.left+" y:"+document.floatDiv.top
document.floatDiv.x=e.pageX
document.floatDiv.y=e.pageY
 }
 if(document.all)
 {
    floatDiv.style.left=event.x+document.body.scrollLeft
    floatDiv.style.top=event.y+document.body.scrollTop
 }

document.onmousemove=mousemoving
if(document.layers)
{
  document.captureEvents(Event.MOUSEMOVE)
}</script>

     然后选择一幅图片,假设图片的路径是“img\haha.gif”,然后加入一个层,并把它的ID改为“floatDiv”(与上面代码中的层的ID保持一致),把图片放置到层中即可。我们也可以直接在Html的<body>之间插入如下的代码,这跟上面操作的效果是一样的。

<div id="floatDiv" style="position:absolute;"><img src="img/haha.gif" width="53" height="74"></div>

好了,现在浏览一下网页,看看效果吧。

(编辑:不详) 留言评论】【在线投稿】【打印网页】【关闭窗口】【↑顶部
  + 相关信息咨讯
 ·如何为网页设置背景音乐?
 ·给Flash初学者的几点建议
 ·简单实用 AutoCAD绘制装修设计图小技巧
 ·一分钟学会制作文字凹陷效果
 ·Photoshop打造唯美雨景动画
版权与免责声明:
1.凡本网注明来源为“大田资讯网”的所有作品,包括文字与图片,未经本网授权不得转载。违反上述声明者,本网将依法追究法律责任。
2. 凡注明"来源:xxx(非本站)"的作品,均转载自其它媒体,本网转载的目的在于传播更多信息,此类稿件并不代表本网观点,本网不承担此类稿件侵权行为的直接责任及连带责任。
3. 如因作品内容、版权等侵犯了您的权益,请及时与我们联系,我们将作出妥善处理。