js插件实现飘窗

风向北吹i

已于 2022-06-14 22:23:44 修改

阅读量1.4k

点赞数

文章标签： javascript safari 前端

于 2022-06-14 16:09:17 首次发布

本文链接：https://blog.csdn.net/qq_40576178/article/details/125280266

版权

网页上的飘窗实现

方案1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <!--飘窗-->
<script type="text/javascript"  src="js/AdMove.js" ></script>
<div id="pc1" >    
  <div><img src="images/ali_ico_04.png"></div>
</div>

 
 
<script>
var ad1 = new AdMove("pc1", true);
ad1.Run();
 

</script>
 
 
<!--飘窗end-->
</body>
</html>

AdMove.js插件代码：

<!--//公共脚本文件 main.js
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 removeEvent(obj, evtType, func, cap) {
	cap = cap || false;
	if (obj.removeEventListener) {
		obj.removeEventListener(evtType, func, cap);
		return true;
	} else if (obj.detachEvent) {
		if (cap) {
			obj.releaseCapture();
			return true;
		} else {
			return obj.detachEvent("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 = window.innerWidth + window.scrollMaxX;
        yScroll = window.innerHeight + window.scrollMaxY;
    } else {
        if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac    
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari    
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }
    }

    var windowWidth, windowHeight;
    if (self.innerHeight) { // all except Explorer    
        if (document.documentElement.clientWidth) {
            windowWidth = document.documentElement.clientWidth;
        } else {
            windowWidth = self.innerWidth;
        }
        windowHeight = self.innerHeight;
    } else {
        if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode    
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else {
            if (document.body) { // other Explorers    
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }
        }
    }       

    // for small pages with total height less then height of the viewport    
    if (yScroll < windowHeight) {
        pageHeight = windowHeight;
    } else {
        pageHeight = yScroll;
    }    

    // for small pages with total width less then width of the viewport    
    if (xScroll < windowWidth) {
        pageWidth = xScroll;
    } else {
        pageWidth = windowWidth;
    }
    arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight);
    return arrayPageSize;
}



//广告脚本文件 AdMove.js
/*
例子   加<div></div>  是为了判断飘窗内容为空时隐藏飘窗
<div id="Div2">
	<div></div>
	***** content ******
	</div>
</div>
var ad=new AdMove("Div2");
ad.Run();
*/

var AdMoveConfig = new Object();
AdMoveConfig.IsInitialized = false;
AdMoveConfig.AdCount = 0;
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, addCloseButton) {
	if (!AdMoveConfig.IsInitialized) {
		AdMoveConfig.Resize();
		AdMoveConfig.IsInitialized = true;
	}
	AdMoveConfig.AdCount++;
	var obj = document.getElementById(id);
	obj.style.position = "absolute";
	obj.style.zIndex = "999";
	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;
	if (addCloseButton) {
		var closebtn = document.createElement("span");
		closebtn.className='close_btn';
		closebtn.innerHTML="关闭窗口";
		obj.appendChild(closebtn);

		closebtn.onclick = function () {
			obj.style.display = "none";
			clearInterval(interval);
			closebtn.onclick = null;
			obj.onmouseover = null;
			obj.onmouseout = null;
			obj.MoveHandler = null;
			AdMoveConfig.AdCount--;
			if (AdMoveConfig.AdCount <= 0) {
				removeEvent(window, "resize", AdMoveConfig.Resize);
				removeEvent(window, "scroll", AdMoveConfig.Scroll);
				AdMoveConfig.Resize = null;
				AdMoveConfig.Scroll = null;
				AdMoveConfig = null;
			}
		}
		/*判断飘窗内容是否为空，为空就隐藏*/
		function removeHTMLTag(str) {
				//str = str.replace(/<\/?[^>]*>/g,''); //去除HTML tag
				str = str.replace(/[ | ]*\n/g,'\n'); //去除行尾空白
				str = str.replace(/[\r\n]/g,""); //去除多余空行
				str=str.replace(/ /ig,'');//去掉&nbsp;
				return str;
		}
		var oDiv=obj.getElementsByTagName('div')[0];
		if(removeHTMLTag(oDiv.innerHTML) ==""){
			obj.style.display = "none";
		}
		
	}
	obj.MoveHandler = 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.SetLocation = function (vx, vy) { x = vx; y = vy; }
	this.SetDirection = function (vx, vy) { dirx = vx; diry = vy; }
	this.Run = function () {
		var delay = 10;
		interval = setInterval(obj.MoveHandler, delay);
		obj.onmouseover = function () { clearInterval(interval); }
		obj.onmouseout = function () { interval = setInterval(obj.MoveHandler, delay); }
	}
}
//-->

方案2

1、html

<!--飘窗-->
<div id="roll">
      <img src="img/roll.jpg">
</div>

2、css

#roll {
	height: 200px;
	width: 200px;
	position: fixed; /*fixed实现绝对定位*/
	cursor:pointer;
}
#roll img{
	height: 200px;
	width: 200px;
	
}

3.在JS中实现让飘窗实现漂浮的过程：

（1）获取飘窗id；

（2）设置飘窗速度，变化幅度，初始位置；

（3）使用documentElement获取可视化窗口的长宽，用可视化窗口的长宽分别减去飘窗的长宽即可得到飘窗可以移动的范围；

（4）令变化幅度的初始值为1；用statusX ？-1 ：1（statusY ？-1 ：1）来判断飘窗是否到达可视化窗口的左右（上下）边界，用this指针来完成图片每一次移动所改变的位置；

（5）最后用onmouseover和onmouseout来实现鼠标移动到飘窗上停止移动和移开鼠标飘窗继续运动；

4.JS具体实现代码

var ggRoll={                                     //创建对象直接量
  roll:document.getElementById("roll"),          //获取id属性为roll的对象
  speed:20,                                      //飘动速度，即为定时器函数多长时间执行一次
  statusX:1,                                     //规定每执行一次函数，left属性值变化的幅度
  statusY:1,                                     //规定每执行一次函数，top属性值变化的幅度
  x:100,                                         //规定初始状态下left属性的值
  y:300,                                         //规定初始状态下top属性的值
  //差值用来测算left属性值的极限
  winW:document.documentElement.clientWidth-document.getElementById("roll").offsetWidth, 
  //差值用来测算top属性值的极限
  winH:document.documentElement.clientHeight-document.getElementById("roll").offsetHeight, 
  //声明函数
  Go: function () {                                                               
       //设置div的left属性值
       this.roll.style.left = this.x + 'px';                                      
       //设置div的top属性值
       this.roll.style.top = this.y + 'px';                                       
       //如果statusX=1则每次减少1px,否则减少1px
       this.x = this.x + (this.statusX ? -1 : 1)                                  
       //如果left属性值小于0，也就是div要超出左边界了，就将statusX设置为0
       if (this.x < 0) { this.statusX = 0 }                                       
       //如果top属性值大于winW，也就是div要超出右边界了，就将statusX设置为1
       if (this.x > this.winW) { this.statusX = 1 }                               
 
       this.y = this.y + (this.statusY ? -1 : 1)
       if (this.y < 0) { this.statusY = 0 }
       if (this.y > this.winH) { this.statusY = 1 }
 
     }
  };
 
var interval=setInterval("ggRoll.Go()",ggRoll.speed);
ggRoll.roll.onmouseover=function(){clearInterval(interval)};                     //onmouseover属性：鼠标移动到元素上时触发
ggRoll.roll.onmouseout=function(){interval=setInterval("ggRoll.Go()",ggRoll.speed)};//onmouseout属性:鼠标离开元素时触发