鱼给大家来提供下图片漂浮代码,用于html网页的!线在很多网站都有这样的漂浮图片,多用于广告,这也是为了引人注目罢了,下面给大家提供下面网页图片漂浮的源代码吧!把下面的代码复制到运行框里面看看效果就可以了!下面一共有两种漂浮的可供大家参考
第一种,这个漂浮图片代码不是很常用的!
<script language="JavaScript">
pics=new Array('http://www.bishe.net/themes/tugor/STYLE/IMAGE/MID/mid-little11.jpg','http://www.bishe.net/themes/tugor/STYLE/IMAGE/MID/mid-little12.jpg','http://www.bishe.net/themes/tugor/STYLE/IMAGE/MID/mid-little14.jpg','http://www.bishe.net/themes/tugor/STYLE/IMAGE/MID/mid-little13.jpg')
load=new Array();
function PreLoad(){
for(i=0; i < pics.length; i++)
{
load[i]=new Image();
load[i].src=pics[i];
}
}
PreLoad();
BY=-22;
BX=-17;
NS4=(document.layers);
NS6=(document.getElementById&&!document.all);
IE4=(document.all);
L=null;
if (NS4){
document.write("<LAYER NAME='netscape' LEFT=0 TOP=0><img name='n' src="+load[0].src+"></LAYER>");
}
if (NS6){
document.write("<img id='n6' src='"+load[0].src+"' style='position:absolute;top:0px;left:0px'>");
}
if (IE4){
document.write("<div style='position:absolute;top:0px;left:0px'><div style='position:relative'>");
document.write("<img id='explorer' src='"+load[0].src+"' style='position:absolute;top:0px;left:0px'>");
document.write("</div></div>")
}
R=0,PB=0,RD=0,Y=0,X=0,D=0,VB=0,HB=0;
Y=10;X=10;D=Math.floor(Math.random()*60+10);
function Curve(){
plusMinus=new Array(1,-1,2,-2,3,-3,0,1,-1)
R=Math.floor(Math.random()*plusMinus.length);
RD=plusMinus[R];
setTimeout('Curve()',1800);
}
function MoveRandom(){
setTimeout('MoveRandom()',10);
var H=(NS6||NS4)?window.innerHeight:document.body.clientHeight;
var W=(NS6||NS4)?window.innerWidth:document.body.clientWidth;
var YS=(NS6||NS4)?window.pageYOffset:document.body.scrollTop;
var XS=(NS6||NS4)?window.pageXOffset:document.body.scrollLeft;
PB=D+=RD;
y = 3*Math.sin(PB*Math.PI/180);
x = 3*Math.cos(PB*Math.PI/180);
if (D < 0) D+=360;
Y+=y;
X+=x;
VB=180-D;
HB=0-D;
if ((Y < 1) && (X < 1)) {Y=1;X=1;D=45;}
if ((Y < 1) && (X > W+BX)) {Y=1;X=W+BX;D=135;}
if ((Y > H+BY) && (X < 1)) {Y=H+BY;X=1;D=315;}
if ((Y > H+BY) && (X > W+BX)) {Y=H+BY;X=W+BX;D=225;}
if (Y < 1) {Y=1;D=HB;}
if (Y > H+BY) {Y=H+BY;D=HB;}
if (X < 1) {X=1;D=VB;}
if (X > W+BX) {X=W+BX;D=VB;}
if (NS4)L=document.netscape;
if (NS6)L=document.getElementById("n6").style;
if (IE4)L=explorer.style;
L.top=Y+YS;
L.left=X+XS;
}
count=0;
move=1;
function picSwap(){
if (count >= pics.length)count=0;
if (NS4)
document.layers['netscape'].document.images['n'].src=pics[count];
if (NS6)
document.getElementById("n6").src=pics[count];
if (IE4)
explorer.src=pics[count];
count+=move;
setTimeout('picSwap()',2500);
}
function sTaRt(){Curve();MoveRandom();picSwap()}
window.onload=sTaRt;
//-->
</script>
第二种 这个是常见的代码
<div id="ad" style="position:absolute">
<a href="http://www.bishe.net/" target="_blank">
<img src="http://www.bishe.net/themes/tugor/STYLE/IMAGE/MID/mid-little13.jpg" border="0">
</a></div>
<script>
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("ad")
function floatAD() {
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x < L) { xin = true; x = L}
if (x > R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y < T) { yin = true; y = T }
if (y > B) { yin = false; y = B }
}
var itl= setInterval("floatAD()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)}
</script>
上面的代码插入网页的<body></body>之间
http://www.bishe.net换成是漂浮图片点击后出现的页面,也就是加链接的图片啦
http://www.bishe.net/themes/tugor/STYLE/IMAGE/MID/mid-little13.jpg换成你的漂浮广告图片的URL地址
var x = 50,y = 60 浮动层的初始位置,分别对应层的初始X坐标和Y坐标
var xin = true, yin = true 判断层的X坐标和Y坐标是否在在控制范围之内,xin表示帧是层向右移动,否则向左;yin表示帧是层向下移动,否则向上
var step = 1 移动的速度,值越大移动速度越快
var delay = 10 层移动的时间间隔,单位为毫秒,值越大移动速度越慢