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代码
<script>
$(function() {
var content = '<div style="margin-left: 20px;margin-right: 20px;"><center>关于xxx的通知</center><br/>'
+ ' 按照xxx要求，可按照如下方式进行：<br/>'
+ ' 一、进行相关处理。<br/>'
+ ' 二、人员进行相关处理。<br/><br/>'
+ ' 如有任何疑问，请联系相关客服人员<br/>'
+ '<br/>'
+ '<br/>'
+ '<p style="text-align: right;">xxx科技有限公司</p>'
+ '<p style="text-align: right;">x年10月1日</p></div>';
$('#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>