css:
.close {
width: 30px;
height: 20px;
background: white;
position: absolute;
right: 0;
top: 0;
z-index: 999;
font-size: 12px;
text-align: center;
line-height: 20px;
cursor: pointer;
font-family: '微软雅黑';
}
js:【修改了一些bug】
window.onload = function () {
/*
参数
1. 创建飘窗,填写飘窗的id;
2. 选择该飘窗是否显示,true显示,false不显示,默认为false,不显示;
3. 该飘窗的配置信息, xPos,yPos 飘窗的起始位置,默认为左上角,
imgWidth,imgHeight 飘窗的大小,默认为w: 310,h: 200,
href 要跳转的链接,默认不跳转,
imgSrc 图片的链接,默认为空。
*/
var fl1 = new FloatWindow('win', true, {
xPos: 100,
yPos: 100,
href: 'http://websong.wang',
imgSrc: 'https://bpic.588ku.com/art_origin_min_pic/18/07/08/02ced7cd66e3a1341391af9ceb90ec62.jpg'
});
}
var FloatWindow = function (ele, flag, config) {
flag = flag ? true : false;
this.opt = this.extend({
xPos: 0,
yPos: 0,
imgWidth: 100,
imgHeight: 100,
href: 'javascript:void(0)',
imgSrc: '',
step: 1,
height: 0,
Hoffset: 0,
Woffset: 0,
xon: 0,
yon: 0
}, config);
var html = '<span id="' + ele + '" class="floatWin" style="position:absolute; z-index: 1000;" >' +
'<a href="' + this.opt.href + '" target="_blank">' +
'<img src="' + this.opt.imgSrc + '" border="0">' +
'</a>' +
'<div class="close">关闭</div>' +
'</span>';
var div = document.createElement('div');
div.innerHTML = html;
if (flag) {
document.body.appendChild(div);
} else {
return;
}
if (document.querySelector('#'+ele).length <= 0) {
return;
}
this.ele = document.querySelector('#'+ele);
this.interval;
this.delay = 10;
this.ele.querySelector('img').style['width'] = this.opt.imgWidth + 'px';
this.ele.querySelector('img').style['height']= this.opt.imgHeight + 'px';
var _self = this;
this.ele.onmouseout = function () {
_self.start();
}
this.ele.onmouseover = function () {
_self.stop();
}
this.ele.onclick = function (e) {
if (e.target.className === 'close')
_self.stop();
document.body.removeChild(div);
}
changePos = function (ele, moveCfg) {
width = document.documentElement.clientWidth || document.body.clientWidth;
height = document.documentElement.clientHeight || document.body.clientHeight;
Hoffset = ele.offsetHeight;
Woffset = ele.offsetWidth;
if (moveCfg.yon) {
moveCfg.yPos = moveCfg.yPos + moveCfg.step;
} else {
moveCfg.yPos = moveCfg.yPos - moveCfg.step;
}
if (moveCfg.yPos < 0) {
moveCfg.yon = 1;
moveCfg.yPos = 0;
}
if (moveCfg.yPos >= (height - Hoffset)) {
moveCfg.yon = 0;
moveCfg.yPos = (height - Hoffset);
}
if (moveCfg.xon) {
moveCfg.xPos = moveCfg.xPos + moveCfg.step;
} else {
moveCfg.xPos = moveCfg.xPos - moveCfg.step;
}
if (moveCfg.xPos < 0) {
moveCfg.xon = 1;
moveCfg.xPos = 0;
}
if (moveCfg.xPos >= (width - Woffset)) {
moveCfg.xon = 0;
moveCfg.xPos = (width - Woffset);
}
ele.style.left = moveCfg.xPos + document.body.scrollLeft + "px";
ele.style.top = moveCfg.yPos + document.documentElement.scrollTop + "px";
}
this.start();
}
FloatWindow.prototype.start = function () {
var that = this;
this.ele.visibility = 'visible';
this.interval = setInterval(function () {
changePos(that.ele, that.opt);
}, this.delay);
}
FloatWindow.prototype.stop = function () {
clearInterval(this.interval)
}
FloatWindow.prototype.extend = function (o, e) {
for (var key in e) {
if (e[key]) {
o[key] = e[key];
}
}
return o;
}