js实现H5网页飘窗-Toy模板网

这篇具有很好参考价值的文章主要介绍了js实现H5网页飘窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.<div style="z-index: 1000; position: absolute; filter: Alpha(opacity = 90); width: 100px;padding: 10px; border: 1px solid #333" id="img" align="center">
<a href="javascript:void(0);" id="popInfo" style="text-decoration: none;color:#333">关于xxx的通知</a>
</div>

js代码

$('#popInfo').click(function() {
layer.open({
title : '通知',
type : 1,
area : [ '560px', '420px' ],
content : content
});
})
});

//关闭飘窗
function hidead() {
// document.getElementById("img1").style.display = "none";
document.getElementById("img").style.display = "none";
}

//飘窗开始
function addEvent(obj, evtType, func, cap) {
cap = cap || false;
if (obj.addEventListener) {
obj.addEventListener(evtType, func, cap);
return true;
} else if (obj.attachEvent) {
if (cap) {
obj.setCapture();
return true;
} else {
return obj.attachEvent("on" + evtType, func);
}
} else {
return false;
}
}
function getPageScroll() {
var xScroll, yScroll;
if (self.pageXOffset) {
xScroll = self.pageXOffset;
} else if (document.documentElement
&& document.documentElement.scrollLeft) {
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {
xScroll = document.body.scrollLeft;
}
if (self.pageYOffset) {
yScroll = self.pageYOffset;
} else if (document.documentElement
&& document.documentElement.scrollTop) {
yScroll = document.documentElement.scrollTop;
} else if (document.body) {
yScroll = document.body.scrollTop;
}
arrayPageScroll = new Array(xScroll, yScroll);
return arrayPageScroll;
}
function GetPageSize() {
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) {
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else {
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) {
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement
&& document.documentElement.clientHeight) {
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) {
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
if (yScroll < windowHeight) {
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
if (xScroll < windowWidth) {
pageWidth = windowWidth;
} else {
pageWidth = xScroll;
}
arrayPageSize = new Array(pageWidth, pageHeight, windowWidth,
windowHeight)
return arrayPageSize;
}
//AdMove
var AdMoveConfig = new Object();
AdMoveConfig.IsInitialized = false;
AdMoveConfig.ScrollX = 0;
AdMoveConfig.ScrollY = 0;
AdMoveConfig.MoveWidth = 0;
AdMoveConfig.MoveHeight = 0;
AdMoveConfig.Resize = function() {
var winsize = GetPageSize();
AdMoveConfig.MoveWidth = winsize[2];
AdMoveConfig.MoveHeight = winsize[3];
AdMoveConfig.Scroll();
}
AdMoveConfig.Scroll = function() {
var winscroll = getPageScroll();
AdMoveConfig.ScrollX = winscroll[0];
AdMoveConfig.ScrollY = winscroll[1];
}
addEvent(window, "resize", AdMoveConfig.Resize);
addEvent(window, "scroll", AdMoveConfig.Scroll);
function AdMove(id) {
if (!AdMoveConfig.IsInitialized) {
AdMoveConfig.Resize();
AdMoveConfig.IsInitialized = true;
}
var obj = document.getElementById(id);
obj.style.position = "absolute";
var W = AdMoveConfig.MoveWidth - obj.offsetWidth;
var H = AdMoveConfig.MoveHeight - obj.offsetHeight;
var x = W * Math.random(), y = H * Math.random();
var rad = (Math.random() + 1) * Math.PI / 6;
var kx = Math.sin(rad), ky = Math.cos(rad);
var dirx = (Math.random() < 0.5 ? 1 : -1), diry = (Math.random() < 0.5 ? 1 : -1);
var step = 1;
var interval;
this.SetLocation = function(vx, vy) {
x = vx;
y = vy;
}
this.SetDirection = function(vx, vy) {
dirx = vx;
diry = vy;
}
obj.CustomMethod = function() {
obj.style.left = (x + AdMoveConfig.ScrollX) + "px";
obj.style.top = (y + AdMoveConfig.ScrollY) + "px";
rad = (Math.random() + 1) * Math.PI / 6;
W = AdMoveConfig.MoveWidth - obj.offsetWidth;
H = AdMoveConfig.MoveHeight - obj.offsetHeight;
x = x + step * kx * dirx;
if (x < 0) {
dirx = 1;
x = 0;
kx = Math.sin(rad);
ky = Math.cos(rad);
}
if (x > W) {
dirx = -1;
x = W;
kx = Math.sin(rad);
ky = Math.cos(rad);
}
y = y + step * ky * diry;
if (y < 0) {
diry = 1;
y = 0;
kx = Math.sin(rad);
ky = Math.cos(rad);
}
if (y > H) {
diry = -1;
y = H;
kx = Math.sin(rad);
ky = Math.cos(rad);
}
}
this.Run = function() {
var delay = 25;//移动速度
interval = setInterval(obj.CustomMethod, delay);
obj.onmouseover = function() {
clearInterval(interval);
}
obj.onmouseout = function() {
interval = setInterval(obj.CustomMethod, delay);
}
}
}
var ad1 = new AdMove("img");
ad1.Run();
// var ad2 = new AdMove("img1");
// ad2.Run();
// ad2.SetLocation(50, 100)
// ad2.SetDirection(1, 1)
</script>文章来源地址https://www.toymoban.com/news/detail-427069.html