js实现图片漂浮效果的方法.docVIP

这篇文章主要介绍了js实现图片漂浮效果的方法,实例分析了javascript实现图片漂浮的技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了js实现图片漂浮效果的方法。分享给大家供大家参考。具体分析如下：

描述：打开网页就看到不停在飘动的图片，点击连接到其他页面；起到着重强调的效果！

代码如下:

lt;htmlgt;

lt;headgt;

lt;metahttp-equiv=Content-Typecontent=text/html;charset=utf-8gt;

lt;titlegt;testlt;/titlegt;

lt;styletype=text/cssgt;

#All{width:100%;height:3000px;}

lt;/stylegt;

lt;/headgt;

lt;bodygt;

lt;divid=Allgt;

lt;divid=imgstyle=position:absolute;z-index:99;gt;

lt;ahref=#target=_blankgt;lt;imgsrc=Images/OPVTI.jpgborder=0style=cursor:pointer;style=cursor:pointer;/gt;lt;/agt;

lt;scriptlanguage=JavaScriptgt;

lt;!--Begin

varxPos=document.body.clientWidth-20;

varyPos=document.body.clientHeight/2;

varstep=1;

vardelay=10;

varheight=0;

varHoffset=0;

varWoffset=0;

varyon=0;

varxon=0;

varpause=true;

varinterval;

img.style.top=yPos;

functionchangePos(){

width=document.body.clientWidth;

height=document.body.clientHeight;

Hoffset=img.offsetHeight;

Woffset=img.offsetWidth;

img.style.left=xPos+document.body.scrollLeft;

img.style.top=yPos+document.body.scrollTop;

if(yon){

yPos=yPos+step;

}else{

yPos=yPos-step;

}

if(yPoslt;0){

yon=1;

yPos=0;

}

if(yPosgt;=(height-Hoffset)){

yon=0;

yPos=(height-Hoffset);

}

if(xon){

xPos=xPos+step;

}else{

xPos=xPos-step;

}

if(xPoslt;0){

xon=1;

xPos=0;

}

if(xPosgt;=(width-Woffset)){

xon=0;

xPos=(width-Woffset);

}

}

functionstart(){

img.visibility=visible;

interval=setInterval(changePos(),delay);

}

functionpause_resume(){

if(pause){

clearInterval(interval);

pause=false;

}else{

interval=setInterval(changePos(),delay);

pause=true;

}

}

start();

//End--gt;

lt;/scriptgt;

lt;/divgt;

lt;/divgt;