頁面飄窗代碼

時間  2019-12-01
標籤 頁面 代碼 简体版
原文   原文鏈接 
#float {
	position:absolute;
	left:0px;
	top:0px;
	z-index:501;
}
.pfClose {
	position:relative;
	width:14px;
	padding:2px;
	background:#fb5252;
	left:2px;
	top:20px;
	text-align:center;
	font-weight:bold;
	font-size:12px;
	cursor:pointer;
	color:#fff;
	border-radius:100%;
	box-shadow:0px 0px 5px #8c0202;
}
.pfClose:hover {
	background:#d70303;
}
document.write("<div id=\"float\">");
document.write("<div onclick=\"closediv();\" class=\"pfClose\" >X</div>");
document.write("<a href=\"http://xjds.gov.cn/n7380/n162767/n162918/12574820.html\" target=\"_blank\">");
document.write("<img src=\"/n7380/component/12546866/mszdo1.jpg\" style=\"width:200px;\" border=\"0\"/>");
document.write("</a>");
document.write("</div>");
var x = 0,
y = 0;
var xin = true,
yin = true;
var step = 1;
var delay = 15;
var obj = document.getElementById("float");
function closediv() {
	obj.style.visibility = "hidden";
}
function float() {
	var L = T = 0;
	var R = document.documentElement.clientWidth - obj.offsetWidth;
	var B = document.documentElement.clientHeight - obj.offsetHeight;
	obj.style.left = x + document.documentElement.scrollLeft + "px";
	obj.style.top = y + document.documentElement.scrollTop + "px";
	x = x + step * (xin ? 1 : -1);
	if (x < L) {
		xin = true;
		x = L;
	}
	if (x > R) {
		xin = false;
		x = R;
	}
	y = y + step * (yin ? 1 : -1);
	if (y < T) {
		yin = true;
		y = T;
	}
	if (y > B) {
		yin = false;
		y = B;
	}
}
var itl = setInterval("float()", delay);
obj.onmouseover = function() {
	clearInterval(itl);
}
obj.onmouseout = function() {
	itl = setInterval("float()", delay);
}

 

 

再加一個飄窗以下：javascript

#float1 {
	position:absolute;
	left:0;
	top:0;
	z-index:502;
}
.pfClose {
	position:relative;
	width:14px;
	padding:2px;
	background:#fb5252;
	left:2px;
	top:20px;
	text-align:center;
	font-weight:bold;
	font-size:12px;
	cursor:pointer;
	color:#fff;
	border-radius:100%;
	box-shadow:0px 0px 5px #8c0202;
}
.pfClose:hover {
	background:#d70303;
}
document.write("<div id=\"float1\">");
document.write("<div onclick=\"closediv1();\" class=\"pfClose\" >X</div>");
document.write("<a href=\"http://xjds.gov.cn/n7380/n162827/n163473/n165290/12320865.html\">");
document.write("<img src=\"http://xjds.gov.cn/n7380/component/12321024/chjie.jpg\" style=\"width:260px;\" border=\"0\"/>");
document.write("</a>");
document.write("</div>");
var x1 = 400,
y1 = 400;
var xin1 = true,
yin1 = true;
var step1 = 1;
var delay1 = 18;
var obj1 = document.getElementById("float1");
function closediv1() {
	obj1.style.visibility = "hidden";
}
function float1() {
	var L = T = 0;
	var R = document.documentElement.clientWidth - obj1.offsetWidth;
	var B = document.documentElement.clientHeight - obj1.offsetHeight;
	obj1.style.left = x1 - document.documentElement.scrollLeft + "px";
	obj1.style.top = y1 + document.documentElement.scrollTop + "px";
	x1 = x1 + step1 * (xin1 ? 1 : -1);
	if (x1 < L) {
		xin1 = true;
		x1 = L;
	}
	if (x1 > R) {
		xin1 = false;
		x1 = R;
	}
	y1 = y1 + step1 * (yin1 ? 1 : -1);
	if (y1 < T) {
		yin1 = true;
		y1 = T;
	}
	if (y1 > B) {
		yin1 = false;
		y1 = B;
	}
}
var it2 = setInterval("float1()", delay1);
obj1.onmouseover = function() {
	clearInterval(it2);
}
obj1.onmouseout = function() {
	it2 = setInterval("float1()", delay1);
}

 

 

升級版本插件形式css

;(function($, window, document, undefined) {
	//插件的名稱 floatEleStart
	$.fn.floatEleStart = function(options) {
		//浮動元素
		var floatDiv = this;
		//設置默認值
		var left = 0; //左上角的x座標
		var top = 0; //左上角的y座標
		var zIndex = 500; //默認顯示的層級
		var step = 1; //每步跨越的大小
		var delay = 16; //延遲速度
		//設置實際值
		if(options && options.left){ left = options.left; }
		if(options && options.top){ top = options.top; }
		if(options && options.zIndex){ zIndex = options.zIndex; }
		if(options && options.step){ step = options.step; }
		if(options && options.delay){ delay = options.delay; }
		//設置最大值的標記
		var left_flag = true;
		var top_flag = true;
		//漂浮中的樣式修改函數
		var floatFun = function(){
			//每次的瀏覽器的改變都計算最大邊界
			var right = $(window).width() - floatDiv.width();
			var bottom = $(window).height() - floatDiv.height();
			//設置元素座標值
			left += step * (left_flag ? 1 : -1);
			top += step * (top_flag ? 1 : -1);
			//改變標記
			if(left < 0){
				left = 0;
				left_flag = true;
			}
			if(left > right){
				left = right;
				left_flag = false;
			}
			if(top < 0){
				top = 0;
				top_flag = true;
			}
			if(top > bottom){
				top = bottom;
				top_flag = false;	
			}
			//設置元素的樣式
			floatDiv.css({
				'position' : 'absolute',
				'z-index' : zIndex,
				'left' : left + $(window).scrollLeft() + 'px',
				'top' : top + $(window).scrollTop() + 'px'
			});
		}
		//自動運行
		var autoRun = setInterval(floatFun,delay);
		//鼠標動做
		floatDiv.mouseover(function(){ clearInterval(autoRun); });
		floatDiv.mouseout(function(){ autoRun = setInterval(floatFun,delay); });
	};

})(jQuery, window, document);

調用插件html

<style type="text/css">
	#floatDiv {
		width: 80px;
		height: 80px;
		background: rgba(255,0,0,0.8);
		left : 300px;
		top : 200px;
		position:absolute;
		border-radius:100%;
		box-shadow:0 0 8px 5px yellow;
		-webkit-box-shadow:0 0 8px 5px yellow;
		-moz-box-shadow:0 0 8px 5px yellow;
	}
	
	#floatDiv1 { 
		width: 80px;
		height: 80px;
		background: rgba(255,255,0,0.8);
		left : 500px;
		top : 40px;
	} 
</style>
$(function() {
	//在頁面插入內容
	$("body").append('<div id="floatDiv"></div><div id="floatDiv1"></div>');
	$("#floatDiv").floatEleStart({
		'zIndex' : 50,	
		'left' : 300,	//樣式中也設置
		'top' : 200,	//樣式中也設置
		'step' : 1,		//每步跨越的大小
		'delay' : 16	//延遲
	});
	$("#floatDiv1").floatEleStart({
		'zIndex' : 51,	
		'left' : 500,	//樣式中也設置
		'top' : 40,	//樣式中也設置
		'step' : 5,		//每步跨越的大小
		'delay' : 16	//延遲
	});
});

插件形式 再升級(支持鏈式操做) java

插件代碼web

;(function($, window, document, undefined) {
	//插件的名稱 floatEleStart
	$.fn.floatEleStart = function(config) {
		//設置參數
		config = $.extend({}, $.fn.floatEleStart.defaults, config);
		//浮動元素
		var floatDiv = this;
		//設置最大值的標記
		var left_flag = true;
		var top_flag = true;
		//漂浮中的樣式修改函數
		var floatFun = function(){
			//每次的瀏覽器的改變都計算最大邊界
			var right = $(window).width() - floatDiv.width();
			var bottom = $(window).height() - floatDiv.height();
			//設置元素座標值
			config.left += config.step * (left_flag ? 1 : -1);
			config.top += config.step * (top_flag ? 1 : -1);
			//改變標記
			if(config.left < 0){
				config.left = 0;
				left_flag = true;
			}
			if(config.left > right){
				config.left = right;
				left_flag = false;
			}
			if(config.top < 0){
				config.top = 0;
				top_flag = true;
			}
			if(config.top > bottom){
				config.top = bottom;
				top_flag = false;	
			}
			//設置元素的樣式
			floatDiv.css({
				'position' : 'absolute',
				'z-index' : config.zIndex,
				'left' : config.left + $(window).scrollLeft() + 'px',
				'top' : config.top + $(window).scrollTop() + 'px'
			});
		}
		//自動運行
		var autoRun = setInterval(floatFun,config.delay);
		//鼠標動做
		floatDiv.mouseover(function(){ clearInterval(autoRun); });
		floatDiv.mouseout(function(){ autoRun = setInterval(floatFun,config.delay); });
		//返回this,支持鏈式操做
		return this;
	};
	
	//設置默認值
	$.fn.floatEleStart.defaults = {
		left : 0, //左上角的x座標
		top : 0,//左上角的y座標
		zIndex : 500, //默認顯示的層級
		step : 1, //每步跨越的大小
		delay : 16 //延遲速度
	};

})(jQuery, window, document);

css代碼瀏覽器

<style type="text/css">
   #floatDiv {
       width: 80px;
       height: 80px;
       background: rgba(255,0,0,0.8);
       border-radius:100%;
       box-shadow:0 0 8px 5px yellow;
       -webkit-box-shadow:0 0 8px 5px yellow;
       -moz-box-shadow:0 0 8px 5px yellow;
   }
   
   #floatDiv1 { 
       width: 80px;
       height: 80px;
       background: rgba(255,255,0,0.8);
   } 
</style>

js代碼app

<script>
	$(function(){
		//判斷插件是否存在
		if($.fn.floatEleStart){
			//在頁面插入內容
		    $("body").append('<div id="floatDiv"></div><div id="floatDiv1"></div>');
		    $("#floatDiv").floatEleStart({
		    	top : 200,
		    }).css("background","blue");
		    //支持鏈式操做
		    $("#floatDiv1").floatEleStart().css("background","blue");
		}else{
			console.warn("index.html文件中floatEleStart.js文件未加載!");
		}
	});
	
</script>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程