飘窗 js、 html

最新推荐文章于 2023-12-12 20:09:44 发布

小基炖蘑菇·

最新推荐文章于 2023-12-12 20:09:44 发布

阅读量188

点赞数

分类专栏：开发经验 JS 文章标签： js html

本文链接：https://blog.csdn.net/xiaodongbai/article/details/118491474

版权

开发经验同时被 2 个专栏收录

47 篇文章 1 订阅

订阅专栏

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飘窗</title>
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  .move{
    position: fixed;
    width: 240px;
    height: 145px;
    z-index: 100;
    border: 1px solid red;
    margin: 10px;
  }
</style>

<body>
  <div class="move_1 move">
    移动
  </div>
  <div class="move_2 move">
    移动
  </div>
  <div class="move_3 move">
    移动
  </div>
  <div class="move_4 move">
    <a href="https://www.baidu.com/">百度</a>
  </div>
  <div class="move_5 move">
    移动
  </div>
</body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="./move_port.js"></script>
<script>
   /*调用移动浮窗方法并按顺序传入正确参数["obj",x,y,l,t,m],obj必填*/
   //示例:
   move_obj(".move_1",'','','','',100,50,30);
   move_obj(".move_2",'','','','',800,300,30);
   move_obj(".move_3",'','','','',200,300,30);
   move_obj(".move_4",'','','','',600,550,30);
   move_obj(".move_5",'','','','',300,550,30);
</script>
</html>

/*移动方法*/
function move_obj(obj,move_w,move_h,x,y,l,t,m){
  if(obj==undefined){
    alert("方法调用错误,请传入正确参数!");
    return;
  }
  move_w=(move_w==undefined||move_w=='')?$(window).width():move_w;//水平移动范围,默认浏览器可视区域宽度
  move_h=(move_h==undefined||move_h=='')?$(window).height():move_h;//垂直移动范围,默认浏览器可视区域高度
  x=(x==undefined||x=='')?3:x;//一次水平移动距离,默认3px
  y=(y==undefined||y=='')?3:y;//一次垂直移动距离,默认3px
  l=(l==undefined||l=='')?0:l;//相对于body的起始水平位置,默认0
  t=(t==undefined||t=='')?0:t;//相对于body的起始垂直位置,默认0
  m=(m==undefined||m=='')?80:m;//计时周期,单位毫秒,默认80ms
  function moving(){
    x=(l>=move_w-$(obj).width()||l<0)?-x:x;
    y=(t>=move_h-$(obj).height()||t<0)?-y:y;
    l+=x;
    t+=y;
    $(obj).css({left:l,top:t});
  }
  var timer_move=setInterval(function () {
    moving();
  },m);
  //悬停停止运动
  $(obj).mouseover(function(){
    $(this).children(".close_port").show();
    clearInterval(timer_move);
  });
  //移开鼠标后继续运动
  $(obj).mouseout(function(){
    $(this).children(".close_port").hide();
    timer_move=setInterval(function () {
      moving();
    },m);
  });
  //关闭浮窗,关闭后只能通过刷新页面才能显示,也可以自定义关闭功能
  var close="<div class=\"close_port\">关闭</div>";
  $(obj).append(close);
  $(".close_port").css({
    position:'absolute',
    display:'none',
    width:'30px',
    height:'20px',
    fontSize:'13px',
    top:0,
    right:0,
    color:'red',
    textAlign:'center',
    lineHeight:'20px',
    cursor: 'pointer'
  });
  $(obj).on('click','.close_port',function () {
    //如果有嵌套子级漂浮窗,同时清除子级定时器,清理缓存
    $(obj).find('.close_port').trigger('mouseover');
    clearInterval(timer_move);
    $(this).parent().remove();
  })
}

小基炖蘑菇·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
飘窗 js、 html

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>飘窗</title></head><style> * { padding: 0; .
复制链接

扫一扫