JavaScript动态网页制作宝库 (15课) 9课至15课

没有公告

	加入收藏
	设为首页
	联系站长

您现在的位置： ASP学习资源 >> 技术教程 >> JavaScript >> 文章正文

[组图]JavaScript动态网页制作宝库 (15课) 9课至15课

热荐 ★★★

【字体：小大】

JavaScript动态网页制作宝库 (15课) 9课至15课

用Javascript制作鼠标移动跟随

　　我们常在一些网站中看到，鼠标在网页上移到时，有一行文字、一张小图片或一个小动画总是跟着鼠标，除非把鼠标移出页面，否则，它就总是紧跟鼠标不放。你知道这种效果是怎么做出来的吗？你可能感到比较复杂。其实它是用Javascript编一段小程序来实现的，且程序也不长，也比较好理解。下面让我们来揭下它的面纱看看。
　　程序思路：图层可以用绝对坐标来确定其在页面中的位置，那么我们把图片、动画或文字放到图层上，再想办法动态获取鼠标的当前位置，再把图层移到鼠标的当前位置，那图层上的内容（图片、动画或文字）不也就移到当前鼠标的位置了吗？这样就达到了图片、动画或文字随鼠移动的目的了。

一、一个简单的图片、动画或文字随鼠标移动的例子
　　制作方法：
　　1、在 Dreamweaver3中，插入一个图层，在图层上写上要跟随鼠标移到的文字或图片。
　　2、在图层的属性面板上把“Layer ID”（图层的ID号）改为“div1”，以便程序操作；“T”值改为“-50”，使其初始位置在页面外；“Z-index”（层序号）值改为“50”，使其在最上层，不被其它层遮盖。完成后的图层代码如下，不是使用 Dreamweaver的网友可把代码复制到<body>标记的后面：
<div id="div1" style="position:absolute; left:250px; top:118px; width:60px; height:37px; z-index:"50"><img src="image/0050.gif" width="32" height="32">图、文跟鼠标试验</div> ，这里的图片和文字可换成你所需要的。
　　3、在<head>与</head>之间加上这样一段程序：
<SCRIPT language="javascript">

</SCRIPT>
　　只要这几行代码就能使图片或文字跟着鼠标跑，有点出乎意料吧！事实就是这么简单。当然，这是最简单的一种，你可能看到的有些网页上的效果在移动的过程比这要复杂一些，但都是在这个基础上增加一些移动的变化过程而已。
　　4、当然要使真正的效果出现，还得在<body>标记中加上触发事件调用程序，使程序动作起来。在<body>标记中加上代码：onload="move()" onmousemove="canmove()"，前一个函数的作用是在网页加载时就调用“move()”程序，使其开始刷新图层的位置坐标；后一个事件的作用是，一旦在页面上移动鼠标，就重新计算它的位置坐标。

二、稍复杂一点的效果
　　在上例的基础上稍作一些改动，可获得更好的效果，如使“欢迎光临！”这几个字不仅是分开移动，在移到新位置后，还不停地左右移动，似乎在列队欢迎。要实现移动过程的变化，就要把每个文字分开，一个图层放一个字（或一张图片），然后分开移动到新的位置。所以为了方便，用数组来存放图层的位置坐标。另外，由于图层较多，插入图层比较麻烦，也会使代码大增加，因此采用了动态编写图层代码的办法。制作方法如下：
　　1、在<head>与</head>之间插入下面这段程序：
<SCRIPT language="javascript">
<!--
var x,y
var step=20
var can=0
var information="欢迎光临！"; //在这里写入跟随鼠标移动的文字
information=information.split(""); //把字符串拆分成单个的文字
Il=information.length; //获取字符的个数，存放在Il变量中
k=0;
var xpos=new Array() //声明一个数组，存放各图层的X位置坐标
for (i=0;i<=Il-1;i++){ //给数组赋初值
xpos[i]=-50}
var ypos=new Array() //声明一个数组，存放各图层的Y位置坐标
for (i=0;i<=Il-1;i++){ //给数组赋初值
ypos[i]=-50}
function canmove() {
x=document.body.scrollLeft+event.clientX;
y=document.body.scrollTop+event.clientY;
can=1; k=0;step=20}
function move() {
if (can) {
k++;
if (k<20) {step++;}else
if (k<40) {step--;}else {k=0;} //计算图层左右移动的偏移量
for (i=Il-1;i>=1;i--){ //计算各图层在新位置的X、Y坐标
xpos[i]=xpos[i-1]+step;
ypos[i]=ypos[i-1]}
xpos[0]=x+step;
ypos[0]=y
for (i=0;i<Il-1;i++){ //改变各图层位置的X、Y坐标，使其移

[1] [2] [3] [4] [5] [6] [7] [8] 下一页

上一篇文章： JavaScript动态网页制作宝库 (15课) 1课至8课

下一篇文章：总结showModalDialog和showModelessDialog用法

【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

最新热点		最新推荐		相关文章
				组件对象开发Web应用的实例分 AJAX、AJAX实例及AJAX源代码 asp使用activex组件实例一 Web技术进阶——PHP构建网站用PHP实现Web页面同数据库相让php4动态生成flash动画用PHP实现POP3邮件的收取用PHP实现POP3邮件的解码成功之路－PHP教程 (20课) 成功之路－PHP教程 (20课) 1