js实现图片漂浮效果的方法
本文实例讲述了js实现图片漂浮效果的方法。分享给大家供大家参考。具体分析如下：
描述：打开网页就看到不停在飘动的图片，点击连接到其他页面；起到着重强调的效果！
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>test</title>
<styletype="text/css">
#All{width:100%;height:3000px;}
</style>
</head>
<body>
<divid="All">
<divid="img"style="position:absolute;z-index:99;">
<ahref="#"target="_blank"><imgsrc="Images/OPVTI.jpg"border="0" style="cursor:pointer;"style="cursor:pointer;"/></a>
<scriptlanguage="JavaScript">
<!--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(yPos<0){
yon=1;
yPos=0;
}
if(yPos>=(height-Hoffset)){
yon=0;
yPos=(height-Hoffset);
}
if(xon){
xPos=xPos+step;
}else{
xPos=xPos-step;
}
if(xPos<0){
xon=1;
xPos=0;
}
if(xPos>=(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-->
</script>
</div>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。