浮动飘窗代码 html,页面飘窗代码

#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("

");

document.write("

X

");

document.write("");

document.write("");

document.write("");

document.write("

");

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 

xin = true;

x = L;

}

if (x > R) {

xin = false;

x = R;

}

y = y + step * (yin ? 1 : -1);

if (y 

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);

}

再加一个飘窗如下：

#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("

");

document.write("

X

");

document.write("");

document.write("");

document.write("");

document.write("

");

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 

xin1 = true;

x1 = L;

}

if (x1 > R) {

xin1 = false;

x1 = R;

}

y1 = y1 + step1 * (yin1 ? 1 : -1);

if (y1 

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);

}

升级版本插件形式

;(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);

调用插件

#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;

}

$(function() {

//在页面插入内容

$("body").append('

$("#floatDiv").floatEleStart({

'zIndex' : 50,

'left' : 300,//样式中也设置

'top' : 200,//样式中也设置

'step' : 1,//每步跨越的大小

'delay' : 16//延迟

});

$("#floatDiv1").floatEleStart({

'zIndex' : 51,

'left' : 500,//样式中也设置

'top' : 40,//样式中也设置

'step' : 5,//每步跨越的大小

'delay' : 16//延迟

});

});