jquery实现飘窗
2019-05-29 本文已影响29人
bugWriter_y
截图1559116314.png
简介：此项目是一个简单的基于jquery的飘窗组件。当前版本v1.0
my-move.js
/**
* @author yanglimou
* @date 2019-03-07 15:19:12
* @Description 飘窗组件，依赖jquery。
*/
$(function () {
$(".my-move").each(function () {
var _this = this;
$(this).css({
left:0,
top:0,
position:"fixed",
})
_this.closeCallBack=$(_this).attr("closeCallBack")
var x_direction = 1;
var y_direction = 1;
var speed = $(_this).attr("speed")?parseFloat($(_this).attr("speed")):1;
function move() {
var height = $(_this).height();
var width = $(_this).width();
var window_height = $(window).height()-height;
var window_width =$(window).width()-width;
var left = parseFloat($(_this).css("left"))
var top = parseFloat($(_this).css("top"))
var next_left = left + x_direction * speed;
if (next_left <= 0 || next_left >= window_width) {
x_direction = -1 * x_direction
if (next_left <= 0)
next_left = 0
if (next_left >= window_width)
next_left = window_width;
}
var next_top = top + y_direction * speed;
if (next_top <= 0 || next_top >= window_height) {
y_direction = -1 * y_direction
if (next_top <= 0)
next_top = 0
if (next_top >= window_height)
next_top = window_height;
}
$(_this).css("left", next_left)
$(_this).css("top", next_top)
}
var interval = setInterval(move, 10)
$(_this).mouseenter(function () {
clearInterval(interval)
})
$(_this).mouseleave(function () {
interval = setInterval(move, 10)
})
$(_this).find(".my-move-close").click(function () {
if(_this.closeCallBack){
if(window[_this.closeCallBack]()){
clearInterval(interval)
$(_this).remove()
}
}else{
clearInterval(interval)
$(_this).remove()
}
})
})
})
简单使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="my-move.js"></script>
</head>
<body>
<div class="my-move" style="width: 100px;height: 100px;background-color: #ddd;">
<div class="my-move-close">X</div>
</div>
</body>
</html>
- 需要引入jQuery（1.X版本就可以）
- 飘窗外层需要有一个class是my-move
- 飘窗内部需要有一个元素的class是my-move-close
属性/回调事件介绍
| 属性名 | 属性介绍 | 备注 |
|---|---|---|
| closeCallBack | 点击关闭后的回调函数 | 可以通过返回false来取消关闭事件 |
| speed | 移动速度 | 默认是1，0（代表不移动），最大不限（一般取2就很快了） |
带有回调函数和速度的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="my-move.js"></script>
</head>
<body>
<div class="my-move" style="width: 100px;height: 100px;background-color: #ddd;" closeCallBack="selfCloseCallBack" speed="0.5">
<div class="my-move-close">X</div>
</div>
</body>
</html>
<script>
function selfCloseCallBack() {
if(confirm("是否关闭飘窗")){
console.log("关闭飘窗");
return true;
}else{
console.log("取消关闭飘窗")
}
}
</script>
上面的例子确实很丑，可以自定义飘窗的样式和关闭按钮的样式，位置等。也可以在里面添加元素。
下面简单修饰下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery.min.js"></script>
<script src="my-move.js"></script>
<style>
.wrap {
width: 300px;
height: 150px;
background-color: #ddd;
}
.wrap > div {
height: 100%;
width: 100%;
position: relative;
}
.wrap > div > .close {
position: absolute;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
top: 5px;
right: 5px;
border: 1px solid #ccc;
border-radius: 50%;
cursor: pointer;
}
.wrap > div > .close:hover {
background: #ccc;
}
.wrap > div > .content{
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div class="my-move wrap" closeCallBack="closeCallBack" speed="0.5">
<div>
<div class="my-move-close close">×</div>
<div class="content">
<h3>这里是飘窗的内容</h3>
</div>
</div>
</div>
</body>
</html>
<script>
function closeCallBack() {
if (confirm("是否关闭飘窗")) {
console.log("关闭飘窗");
return true;
} else {
console.log("取消关闭飘窗")
}
}
</script>
