漂浮窗

最新推荐文章于 2021-05-30 18:45:41 发布

原创最新推荐文章于 2021-05-30 18:45:41 发布 · 751 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种使用JavaScript实现页面上浮动窗口的方法，并展示了如何让图片在浏览器窗口内自动移动，同时还提供了不同条件下的显示控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var oDate=new Date();
var beginTime=new Date("2017/6/1 00:00:00");
var endTime=new Date("2017/10/1 00:00:00");
if(beginTime<oDate&&oDate<endTime)
{
   var act="<div id='divimg' style='position:absolute; z-index:10000;'>";
       act+="<a href='./../..' target='_blank'>";
       act+="<img src='./../..' alt='' title='学习了 学习了' />";
       act+="</a></div>";
       $("body").append(act);

   var img=document.getElementById("divimg");
   var x=10,y=10;
   var xSpeed=2,ySpeed=2;
   // var w=parseInt(document.documentElement.clientWidth)-parseInt(img.offsetWidth);
   // var h=parseInt(document.documentElement.clientHeight)-parseInt(img.offsetHeight); 
   var w=parseInt(document.documentElement.clientWidth)-286,
       h=parseInt(document.documentElement.clientHeight)-65;
   function floatimg(){
     if(x>w||x<0){ xSpeed= -xSpeed; }
     if(y>h||y<0){ ySpeed= -ySpeed; }
     x+=xSpeed;
     y+=ySpeed;
     img.style.top=y+"px";
     img.style.left=x+"px";
   }
   var it1=setInterval("floatimg()",40);
   img.onmouseover=function(){ clearInterval(it1);}
   img.onmouseout=function(){ it1=setInterval("floatimg()",40);}

}

在某个时间段内的漂浮窗！

<div id="divimg" style="position:absolute; z-index:10000;">
   <a href="./../.." target="_blank">
      <img src="./../.." alt="" title="学习了 学习了">
   </a>
</div>
<script type="text/javascript">
 //获取图片所在的div对象
 var img=document.getElementById("divimg");
 //设置div 左上角坐标 ，起始点的坐标
 var x=10,y=10;
 //设置图片的行进速度
 var xSpeed=2,ySpeed=2;
 //设置图片的最大浮动的高度和宽度
 // var w=parseInt(document.documentElement.clientWidth)-parseInt(img.offsetWidth);
 var w=parseInt(document.documentElement.clientWidth)-286;
     var name=navigator.appName;
     if(name=="Microsoft Internet Explorer")
        var  h=parseInt(document.documentElement.clientHeight)-60;
     else
        var  h=parseInt(document.body.clientHeight)-75;
// var h=parseInt(document.documentElement.clientHeight)-parseInt(img.offsetHeight);   
 function floatimg(){
  //比较图盘是否到达边界 
  //如果到达边界以后，我们控制图片改变方向
  if(x>w||x<0){ xSpeed= -xSpeed; }
  if(y>h||y<0){ ySpeed= -ySpeed; }
  //如果没有达到边界，设置图片的左上角的坐标
  //设置坐标值 起始坐标+速度
  x+=xSpeed;
  y+=ySpeed;
 img.style.top=y+"px";
 img.style.left=x+"px";
 }
  var it1=setInterval("floatimg()",40);
  img.onmouseover=function(){ clearInterval(it1);}
  img.onmouseout=function(){ it1=setInterval("floatimg()",40);}
</script>

前端的漂浮窗

----------------------------------------------------------------------------------------------


<div id="divimg" style="position:absolute; z-index:10000; display:none;">
   <img src="./../../**.jpg" alt="" usemap="#planetmap" style="border:none;" />
   <map name="plantmap" id="plantmap">
      <area target="_blank" style="outline:none;" shape="rect" coords="52,69,159,96" href="#" alt="" title="活动" />
      <area style="cursor:pointer;" shape="rect" coords="335,0,355,20" alt="" title="关闭" onclick="RemoveImg('divimg');" /> 
   </map>   
</div>
----------------
if（userId=12345）
{
   jQuery("#divimg").css("display","block");
   var img=document.getElementById("divimg");
   var w=parseInt(document.documentElement.clientWidth)-358;
   var h=parseInt(document.documentElement.clientHeight)-108;
}
   var x=10,y=10;  
   var xSpeed=2,ySpeed=2; 
   function floatimg(){  
     if(x>w||x<0){ xSpeed= -xSpeed; }  
     if(y>h||y<0){ ySpeed= -ySpeed; }  
     x+=xSpeed;  
     y+=ySpeed;  
     img.style.top=y+"px";  
     img.style.left=x+"px";  
   }  
   var it1=setInterval("floatimg()",40);  
   img.onmouseover=function(){ clearInterval(it1);}  
   img.onmouseout=function(){ it1=setInterval("floatimg()",40);}  
----------------
function RemoveImg(removeImg)
{
  if(removeImg="divimg")
  {
     jQuery("#divimg").remove();
  }

}  
-----------------