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程序设计有所帮助。
相关推荐
-
基于javascript实现全屏漂浮广告
本文实例为大家分享javascript实现全屏漂浮广告,供大家参考,具体内容如下 主要使用方法 网页可见区域宽:document.body.clientWidth; 网页可见区域高:document.body.clientHeight; 网页可见区域宽:document.body.offsetWidth (包括边线的宽); 网页可见区域高:document.body.offsetHeight (包括边线的宽); setInterval setInterval动作的作用是在播放动画的时,每隔一定时
-
JavaScript仿商城实现图片广告轮播实例代码
大家在逛购物商城的时候不知道有没有注意到商城首页上面都会有各种轮播广告,效果非常好,下面小编给大家整理特此分享给大家学习.具体内容如下所示: 1.HTML框架 如下图,分为三个部分,首先有个div承载,然后一个ul存放图片,一个ul存放数字,再两个button即可 <div class="out"> <ul class="img"> <li><img src="img/1.png" alt="&
-
JS实现弹性漂浮效果的广告代码
本文实例讲述了JS实现弹性漂浮效果的广告代码.分享给大家供大家参考.具体如下: 这里介绍一款JS弹性漂浮广告代码,碰到网页浏览器的边缘就会顺着弹力的方向自动漂浮下去,不停的在网页上漂来漂去,漂浮广告代码是很早时候就有的代码了,使用广泛,而且做为广告来说,好像效果还不错,因为它在不停的动,让人在视觉上感觉到有一种吸引力.其中的JS代码你可以扣出来保存在一个单独的JS文件中,使用时调用即可. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mo
-
JavaScript实现的多个图片广告交替显示效果代码
本文实例讲述了JavaScript实现的多个图片广告交替显示效果代码.分享给大家供大家参考.具体如下: 这里演示JavaScript让多个Banner图片广告交替显示的效果,如果你的站很牛,广告位被占满了,你可以考虑让多个图片广告轮番交替显示,链接也跟着变,这样是不是为你节省了宝贵的广告位?思路是好,但不知道广告效果是不是也一样好,这就需要实验了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-npic-cha-adv-style-cod
-
js实现拉幕效果的广告代码
本文实例讲述了js实现拉幕效果的广告代码.分享给大家供大家参考.具体如下: 这是一款拉幕效果的广告代码,广告图片像窗帘的幕布一样慢慢的被拉上去了,缩小至一定大小后定格,目前来说,在一些大型的门户网站中仍然可以见到这种效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lm-style-adv-pic-style-codes/ 具体代码如下: <html> <head> <meta http-equiv="C
-
js+flash实现的5图变换效果广告代码(附演示与demo源码下载)
本文实例讲述了js+flash实现的5图变换效果广告代码.分享给大家供大家参考,具体如下: 这是一款类似淘宝图片广告的js+flash广告代码.非常美观实用! 运行效果截图如下: 点击此处查看在线演示效果. 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
-
对联广告js flash激活
ad.js 复制代码 代码如下: var delta=0.08 var collection; function floaters() { this.items = []; this.addItem = function(id,x,y,content) { document.write('<DIV id='+id+' style="Z-INDEX: 10;
-
基于jQuery的仿flash的广告轮播
整个页面如下: 复制代码 代码如下: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Test.aspx.cs" Inherits="Test" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T
-
js实现网站最上边可关闭的浮动广告条代码
本文实例讲述了js实现网站最上边可关闭的浮动广告条.分享给大家供大家参考.具体如下: 这是一款广告条代码,平时浮动在网站最上边,可关闭,设计唯美简洁,带关闭按钮,自适应网页宽度,色调明了,相信有不少朋友会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-clase-able-adv-codes/ 具体代码如下: <html> <head> <title>网站页首可关闭广告条</ti
-
用javascript实现的仿Flash广告图片轮换效果
<!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-
-
flash+jQuery实现可关闭及重复播放的压顶广告
特效介绍 仿门户网站首页泰山压顶式可关闭及重复播放的从上面"压"下来的广告flash+jQuery代码,广告播放的时候,会将整个页面都压下去(这要求您把html部分代码放到您网站最顶部,<body>的下面),气势恢宏. 演示图 使用方法 1.在head引入css. 2.建议,在您网站最顶部放入下面的代码,这样,广告播放,会把您页面的所有内容压下去,气势恢宏: <div class="gg_full wrapfix"> <div clas
-
JS实现可关闭的对联广告效果代码
本文实例讲述了JS实现可关闭的对联广告效果代码.分享给大家供大家参考.具体如下: 这是非常经典的一款对联广告代码,带有关闭按钮,用户可以自行关掉广告,另外,广告的垂直位置会随着滚动条的变化自动定位,也就是拖动浏览器滚动条的时候广告始终显示,不会被隐藏掉,现在很多网站都在用的对联广告代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-2adv-style-codes/ 具体代码如下: <html> <head