| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
fdpg
10年前发布

JavaScript实现的漂浮广告效果代码

当鼠标在图片上方时,图片停止漂浮,点击关闭按钮可隐藏图片,代码简单,直接插入网页更换成自己的漂浮图片就可以使用。

<body>  <div id="float" style=" position:absolute; z-index:3">  <img id="img1" src="http://www.sharejs.com/images/logo.png" style=" border:1px #ccc solid" /><img id="img2" onClick="float.style.display='none'" src="关闭图片" style=" position:absolute; margin-left:-13px;" />  </div>  <script type="text/javascript">  var xPos=0;  var yPos=0;  var directionX=true;  var directionY=true;  var step=1;  var speed=1;  var float=document.getElementById("float");  function move(){   var height=document.documentElement.clientHeight;   var width=document.documentElement.clientWidth;   var imgHeight=float.offsetHeight;   var imgWidth=float.offsetWidth;   float.style.left=xPos+document.documentElement.scrollLeft+"px";   float.style.top=yPos+document.documentElement.scrollTop+"px";   if(directionX){xPos=xPos+step;}else{xPos=xPos-step;}   if(xPos<=0){xPos=0;directionX=true;}   if(xPos>=width-imgWidth){xPos=width-imgWidth;directionX=false;}      if(directionY){yPos=yPos+step;}else{yPos=yPos-step;}   if(yPos<=0){yPos=0;directionY=true;}   if(yPos>=height-imgHeight){yPos=height-imgHeight;directionY=false;}   t=setTimeout(move,speed);   }   float.onmouseover=function(){clearTimeout(t);}   float.onmouseout=function(){t=setTimeout("move()",speed);}  window.onload=move();  </script>  </body>