bay-window.js是一个jQuery插件，它可以从任何DOM元素创建浮动弹出窗口，并使它们在网页上移动。

这个插件不仅仅是一个最初为消息设计的普通弹出窗口：它甚至可以在屏幕上移动，从而优于页面的主要内容。可用于广告、促销、公告或显示重要内容。

如何使用它:

1.加载JavaScriptjquery.bay-window.js查询在文档中。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.bay-window.js"></script>

2.动态创建一个浮动弹出窗口。

$.createBayWindowElement({
 
  // width/height of the popup window
  width: '400px',
  height: '300px',
 
  // path to the ads image
  src: './images/bay-image.png',
 
  // url
  href: 'https://www.jqueryscript.net',
  
  // target attribute
  target: '__blank',
 
  // text to display in the close button
  closeText: 'close',
 
}).bayWindow({
 
  // step length
  stepLength: 1,
 
  // start position
  startTop: 0,
  startLeft: 0,
 
  // z-index
  zIndex: 9999,
  
})

3.从文档中现有的DOM元素创建一个浮动弹出窗口。

<div class="custom" id="custom">
  ...
</div>

$('#custom').bayWindow({
  // options (see above) here
})

4.API方法。

// start the animation
$('#custom').bayWindow('run');
 
// stop the animation
$('#custom').bayWindow('stop');
 
// destroy the animation
$('#custom').bayWindow('destroy');

预览截图

创建在屏幕上移动 浮动广告 jQuery bay window.js