sina.com.cn
新浪首页|免费邮件|用户注册|网站地图

科技时代

新浪首页 > 科技时代 > 软件 > 编程语言 > 正文
软件分类教程

● 系统工具
● 网络工具
● 常用工具
● 多媒体类
● 图像处理
● 文字编辑
● 休闲娱乐
● 办公软件
● 编程语言
● 操作系统
● 其它软件
● 软件评测
● 主页制作
● 观点评论





用JavaScript实现网页特效二例

http://tech.sina.com.cn 2000/11/03  软件世界 徐冰

  如今社会已进入了网络时代,如果谁有电脑却没有上网,或者已上网了却没有自己的主页,那真是一件很痛苦的事情。在网上要建立一个主页是很容易的,但要使自己的主页拥有一定的访问量却比较困难,当然各种形式的网站推广工作是必要的,而最关键的却在于你的主页,一定要把你的主页做得很好,并且与众不同,这样才会有更多的回头客光顾你的网页。如果你只会一点简单的主页制作知识,不会使用诸如Dreamweaver、Flash、Javasript等专业网页制作软件的话,你很难把你的主页做好,但我们多数网虫都没有更多的时间去深入学习这些软件,那么有没有更简便的方法的呢?当然有了,笔者就有这样一个习惯,每次上网时如果发觉某个网站做得很好,就必定会仔细分析其源代码,找出其精彩地方的手段所在。笔者经长时间分析发现,使用Javasript可做出很多很精彩的网页特效。如果你不会写Javasript代码也不要紧,很多地方都能提供Javasript源代码,你只需将它放在指定的位置就行了。下面笔者就提供两个效果很好的Javasript特效的源代码,希望各位网友的主页也精彩起来。

  一、 字符随鼠标漂动

  这个特效可以让你的鼠标在网页上移动时,在鼠标的后面会有你指定的文字跟着漂动,这个特效足可以让你的主页新鲜一阵了。下面就是它的源代码。

  首先在你html文件的<head>与</head>之间加上:

  <STYLE> .spanstyle { position:absolute; visibility:visible; top:-50px; font-size:10pt; font-family:Verdana; font-weight:bold; color:red; } </STYLE>

  <script> var x,y var step=20 var flag=0 var message="柳苑工作室http://pagestar.yeah.net" message=message.split("") var xpos=new Array() for (i=0;i<=message.length-1;i++) { xpos[i]=-50 } var ypos=new Array() for (i=0;i<=message.length-1;i++) { ypos[i]=-50 } function handlerMM(e){ x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY flag=1 } function makesnake() { if (flag==1 && document.all) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("span"+(i)+".style") thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } else if (flag==1 && document.layers) { for (i=message.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+step ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<message.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=xpos[i] thisspan.top=ypos[i] } } var timer=setTimeout("makesnake()",30) } </script>

  然后把你html文件的<body>部分改为:

  <BODY onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll">

  最后再把下面代码加入你html文件<body>和</body>之间:

  <script> for (i=0;i<=message.length-1;i++) { document.write("<span id='span"+i+"' class='spanstyle'>") document.write(message[i]) document.write("</span>") } if (document.layers){ document.captureEvents(Event.MOUSEMOVE); } document.onmousemove = handlerMM; </script>

  这样一个效果不错的Javasript特效就做成了,只是你要把上面有下划线地方的文字换成你的内容,否则你网页上就会漂出我的主页名称和地址哟。怎么样,很酷吧。

  二、 显示访问者的停留时间

  这个特效可以让你的主页出现一个数字时钟,上面能显示访问者在你的主页上所停留的时间(见图一)。下面是这个Javasript特效的源代码。

  首先在你html文件的<head>与</head>之间加上:

  <script LANGUAGE="JAVASCRIPT"> <!-- var ap_name = navigator.appName; var ap_vinfo = navigator.appVersion; var ap_ver = parseFloat(ap_vinfo.substring(0,ap_vinfo.indexOf('('))); var time_start = new Date(); var clock_start = time_start.getTime(); var dl_ok=false; function init () { if(ap_name=="Netscape" && ap_ver>=3.0) dl_ok=true; return true; } function get_time_spent () { var time_now = new Date(); return((time_now.getTime() - clock_start)/1000); } function show_secs () // show the time user spent on the side { var i_total_secs = Math.round(get_time_spent()); var i_secs_spent = i_total_secs % 60; var i_mins_spent = Math.round((i_total_secs-30)/60); var s_secs_spent = "" + ((i_secs_spent>9) ? i_secs_spent : "0" + i_secs_spent); var s_mins_spent = "" + ((i_mins_spent>9) ? i_mins_spent : "0" + i_mins_spent); document.time.time_spent.value = s_mins_spent + ":" + s_secs_spent; window.setTimeout('show_secs()',1000); } --> </script>

  然后把你html文件的<body>改为:

  <body onLoad="init(); window.setTimeout('show_secs()',1);">

  最后在你html文件的<body>与</body>之间加上:

  <form name="time" onSubmit="0"> <p>你的停留時间为:<br> <input type="text" name="time_spent" size="7" onFocus="this.blur()" BGCOLOR="#FFFFCC"> </form>

  这样你的主页上就有了一个可以记载访问者停留时间的时钟了。

  上面这两个Javasript特效是笔者所见过的很好的网页特效了,只要你合理运用,一定会为你的网页增添色不少。如果你觉得写Javasript代码很麻烦的话,可以到我的主页http://pagestar.yeah.net/ 去下载Javasript源代码,当然我的主页上还有更多的Javasript特效供你下载呢。

     

  【相关论坛】 【发表评论】  


网站简介 | 用户注册 | 广告服务 | 招聘信息 | 中文阅读 | Richwin | 联系方式 | 帮助信息 | 网站律师

Copyright © 1996 - 2000 SINA.com, Stone Rich Sight. All Rights Reserved

版权所有 四通利方 新浪网