这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
js 漂浮广告实现代码,本质上就是一个来回滚动的小图片,也是一种广告形式,需要的朋友可以收藏下
本文实例讲述了 js 实现漂浮广告的方法。分享给大家供大家参考。具体如下:
具体代码如下:
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- </title>
- <script type="text/javascript" src="moveobj.js">
- </script>
- <script type="text/javascript">
- var flyimage1, flyimage2, flyimage3
- function pagestart() {
- flyimage1 = new Chip("flyimage1", 47, 68);
- flyimage2 = new Chip("flyimage2", 47, 68);
- flyimage3 = new Chip("flyimage3", 47, 68);
- movechip("flyimage1");
- movechip("flyimage2");
- movechip("flyimage3");
- }
- if (window.addEventListener) window.addEventListener("load", pagestart, false)
- else if (window.attachEvent) window.attachEvent("onload", pagestart)
- else if (document.getElementById) window.onload = pagestart
- </script>
- </head>
- <body>
- <DIV ID="flyimage1" STYLE="position:absolute; left: -500px; width:47; height:68;">
- <A>
- <IMG SRC="img/1.gif" BORDER=0>
- </a>
- </DIV>
- <DIV ID="flyimage2" STYLE="position:absolute; left: -500px; width:47; height:68;">
- <A>
- <IMG SRC="img/2.gif" BORDER=0>
- </a>
- </DIV>
- <DIV ID="flyimage3" STYLE="position:absolute; left: -500px; width:47; height:68;">
- <A>
- <IMG SRC="img/3.gif" BORDER=0>
- </a>
- </DIV>
- </body>
- </html>
moveobj.js:
- var vmin=2;
- var vmax=5;
- var vr=2;
- var timer1;
- function iecompattest(){
- return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
- }
- function Chip(chipname,width,height){
- this.named=chipname;
- this.vx=vmin+vmax*Math.random();
- this.vy=vmin+vmax*Math.random();
- this.w=width+20;
- this.h=height;
- this.xx=0;
- this.yy=0;
- this.timer1=null;
- }
- function movechip(chipname){
- if (document.getElementById){
- eval("chip="+chipname);
- if (window.innerWidth || window.opera){
- pageX=window.pageXOffset;
- pageW=window.innerWidth-40;
- pageY=window.pageYOffset;
- pageH=window.innerHeight-20;
- }
- else if (document.body){
- pageX=iecompattest().scrollLeft;
- pageW=iecompattest().offsetWidth-40;
- pageY=iecompattest().scrollTop;
- pageH=iecompattest().offsetHeight-20;
- }
- chip.xx=chip.xx+chip.vx;
- chip.yy=chip.yy+chip.vy;
- chip.vx+=vr*(Math.random()-0.5);
- chip.vy+=vr*(Math.random()-0.5);
- if(chip.vx>(vmax+vmin)) chip.vx=(vmax+vmin)*2-chip.vx;
- if(chip.vx<(-vmax-vmin)) chip.vx=(-vmax-vmin)*2-chip.vx;
- if(chip.vy>(vmax+vmin)) chip.vy=(vmax+vmin)*2-chip.vy;
- if(chip.vy<(-vmax-vmin)) chip.vy=(-vmax-vmin)*2-chip.vy;
- if(chip.xx<=pageX){
- chip.xx=pageX;
- chip.vx=vmin+vmax*Math.random();
- }
- if(chip.xx>=pageX+pageW-chip.w){
- chip.xx=pageX+pageW-chip.w;
- chip.vx=-vmin-vmax*Math.random();
- }
- if(chip.yy<=pageY)
- {chip.yy=pageY;
- chip.vy=vmin+vmax*Math.random();
- }
- if(chip.yy>=pageY+pageH-chip.h)
- {chip.yy=pageY+pageH-chip.h;
- chip.vy=-vmin-vmax*Math.random();
- }
- document.getElementById(chip.named).style.left=chip.xx+"px";
- document.getElementById(chip.named).style.top=chip.yy+"px";
- chip.timer1=setTimeout("movechip('"+chip.named+"')",100);
- }
- }
运行效果图:
此特效包含的文件:
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0628/269915.html