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程序设计有所帮助。