php网站飘窗代码写到哪里,页面飘窗代码 - 赤月三号的个人空间 - OSCHINA - 中文开源技术交流社区...
#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..
#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("
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("
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//延迟
});
});
插件形式 再升级(支持链式操作)
插件代码
;(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代码
#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);
}
js代码
$(function(){
//判断插件是否存在
if($.fn.floatEleStart){
//在页面插入内容
$("body").append('
$("#floatDiv").floatEleStart({
top : 200,
}).css("background","blue");
//支持链式操作
$("#floatDiv1").floatEleStart().css("background","blue");
}else{
console.warn("index.html文件中floatEleStart.js文件未加载!");
}
});
更多推荐
所有评论(0)