网页右下角漂浮弹窗跟随页面悬浮显示，这个弹窗带有关闭按钮供用户实用，且兼容当前主流浏览器。
<html>
<head>
<meta http-equiv="content-Type" content="text/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。">
<title>分享一款js右下角悬浮弹窗特效_武鸣人</title>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>，各种信息资源免费发布，分享励志语录经典短句，减肥健身常识，各种js特效代码。网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台，各种信息免费发布，资源共享合作共赢，分享互联网流行的励志语录经典短句，减肥健身健康小常识及打卡记录，收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
窗口内容的文件下载：https://www.wuming.ren/img/wuming_data.js，可自己修改内容。<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<!--把下面代码加到<body>与</body>之间-->
<script type="text/javascript">
var Groj = function() {
this.initialize.apply(this, arguments);
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
Groj.prototype = {
initialize: function(url, options) {
//跨域请求
this.url = url;
this.setOptions(options);
this.request();
},
setOptions: function(options) {
this.options = {
variable: '',
step: 500,//循环问询间隔时间（毫秒为单位）
timeout: 5000//超时时间（毫秒为单位）
}
for (var i in options) {
this.options[i] = options[i];
}
this.varArr = this.options.variable.split(".");
},
request: function() {
if (this.isVarValid()) {
this.onResult();
return;
}
var _this = this;
var oHead = document.getElementsByTagName('head')[0];
this.link = document.createElement('script');
this.link.src = this.url;
this.link.type = 'text/javascript';
this.timer = window.setInterval(function() {_this.onCheck();}, this.options.step);
oHead.appendChild(this.link);
//设置超时回调函数
this.outTimer = window.setTimeout(function() {_this.onTimeout();}, this.options.timeout)
},
isVarValid: function() {
var vari = this.getVar();
return typeof(vari) != "undefined" && vari != null;
//return (typeof(this.getVar()) != "undefined" );
},
getVar: function() {
var vari = window;
for (var i=0; i<this.varArr.length; i++) {
vari = vari[this.varArr[i]];
if (typeof(vari) == "undefined" || vari == null) break;
}
return vari;
},
clearVar:function(){
var vari = window;
for (var i=0; i<this.varArr.length; i++) {
var vvv= vari[this.varArr[i]];
if (typeof(vvv) == "undefined" || vvv == null) {
break;
}
vari[this.varArr[i]]=null;
}
},
onResult: function() {
this.clearTimer();
var currentVar=this.getVar();
this.options.onSuccess(currentVar);
//清除变量，移除该SCRIPT标签.
this.clearVar();
try{
if(this.link){
this.link.parentNode.removeChild(this.link);
}
}catch(e){};
},
onCheck: function() {
if (this.isVarValid()) this.onResult();
else return;
},
onTimeout: function() {
this.clearTimer();
//if (this.link) Element.remove(this.link);
if(this.link){
this.link.parentNode.removeChild(this.link);
}
else if (this.options.onFailure) this.options.onFailure();
},
clearTimer: function() {
if (this.timer) {
window.clearInterval(this.timer);
this.timer = null;
}
window.clearTimeout(this.outTimer);
this.outTimer = null;
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
////////////////////////////////////////////////////////////////////////
function GR() {
if (arguments.length < 1) return;
for (var i=0; i<arguments.length; i++) {
GRO(arguments[i]);
}
}
function GRO(options) {
if (typeof(options.interval) == "number" && options.interval > 0) {
function run() {
var url = typeof(options.url) == "function" ? options.url() : options.url;
var variable = typeof(options.variable) == "function" ? options.variable() : options.variable;
if (!!url && !!variable) {
new Groj(url, {
variable: variable,
onSuccess: options.onSuccess,
onFailure: options.onFailure || function() {}
});
}
}
run();
window[options.hold] = window.setInterval(run, options.interval);
} else {
var url = typeof(options.url) == "function" ? options.url() : options.url;
var variable = typeof(options.variable) == "function" ? options.variable() : options.variable;
if (!!url && !!variable) {
new Groj(url, {
variable: variable,
onSuccess: options.onSuccess,
onFailure: options.onFailure || function() {}
});
}
}
}
////////////////////////////////////////////////////////////////////////
var www_wuming_ren = function() {
this.initialize.apply(this, arguments);
}
www_wuming_ren.prototype = {
initialize: function() {
this.dataJsPath = "/img/wuming_data.js";
this.imagesPath = "/img/1";
//请自行修改以上两行的地址，也可以使用相对路径，如下两行：
//this.dataJsPath = "wuming_data.js";
//this.imagesPath = "images";
this.popDivs ='<style type="text/css">';
this.popDivs += '#olympic2008pop *{color:#333;font-size:12px;font-family:"宋体";text-align:center;}';
this.popDivs += '#olympic2008pop > div{margin-right:auto;margin-left:auto;text-align:center;}';
this.popDivs += '#olympic2008pop div,#olympic2008pop form,#olympic2008pop ul,#olympic2008pop ol,#olympic2008pop li,#olympic2008pop span,#olympic2008pop p{margin:0;padding:0;border:0;}';
this.popDivs += '#olympic2008pop img,#olympic2008pop a img{margin:0;padding:0;border:0;}';
this.popDivs += '#olympic2008pop a{color:#333;text-decoration:none; }';
this.popDivs += '#olympic2008pop a:hover{color:#D30000;text-decoration:underline;}';
this.popDivs += '#olympic2008pop .kuaixunmain{width:258px;height:216px;FILTER:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled="true",sizingMethod="scale",src="'+this.imagesPath+'/20240403_www_wuming_ren_1.png");background:url('+this.imagesPath+'/20240403_www_wuming_ren_1.png)!important;background:none}';
this.popDivs += '#olympic2008pop .kuaixunmain .kxtitle{display:inline;float:left;width:155px;height:15px;margin:34px 0 0 72px;text-align: left;}';
this.popDivs += '#olympic2008pop .kuaixunmain .kxclose{ float:right;width:15px;height:15px;margin:34px 10px 0 0;display:inline;position:relative}';
this.popDivs += '#olympic2008pop .kuaixunmain .kxsohu2008{clear:both;width:239px;height:22px;margin:0 auto;text-align:left;position:relative}';
this.popDivs += '#olympic2008pop .kuaixunads240x40{ margin:5px 0 0;text-align:center;position:relative}';
this.popDivs += '#olympic2008pop .kuaixunmain #kuaixunContent{float:left;width: 230px;height:72px; margin:15px 0 0 15px;display:inline;line-height: 22px;text-align:left;position:relative;word-wrap:break-word}';
this.popDivs += '</style>';
this.popDivs += '<div id="olympic2008pop" style="Z-INDEX: 99999;VISIBILITY: hidden;POSITION: absolute;left:0px;top:0px;">';
this.popDivs += '<div class="kuaixunmain">';
this.popDivs += '<div class="kxtitle"><img src="'+this.imagesPath+'/20240403_www_wuming_ren_2.png" width="135" height="15" alt="" /></div>';
//this.popDivs += '<div class="kxclose"><a style="cursor:hand;" onclick="window.olympic2008pop.style.display=\'none\';"><img src="'+this.imagesPath+'/20240403_www_wuming_ren_3.png" width="15" height="15" alt="" /></a></div>';
this.popDivs += '<div class="kxclose"><a style="cursor:hand;" onclick="www_wuming_ren.closeDiv();"><img src="'+this.imagesPath+'/20240403_www_wuming_ren_3.png" width="15" height="15" alt="" /></a></div>';
this.popDivs += '<div id="kuaixunContent"></div>';
this.popDivs += '<div class="kxsohu2008"><a href="https://wuming.ren" target="_blank"><img src="'+this.imagesPath+'/20240403_www_wuming_ren_4.gif" width="239" height="22" alt="" /></a></div>';
this.popDivs += '<div class="kuaixunads240x40"><a href="https://www.wuming.ren" target="_blank"><img src="'+this.imagesPath+'/20240403_www_wuming_ren_5.jpg" width="240" height="40" alt="" /></a></div>';
this.popDivs += '</div>';
this.popDivs += '</div>';
this._initGlobal();
},
_initGlobal:function() {
this.docUrl = document.location.href;
this.cookieDomain = "";
this.CheckCookieDomain();
this.www_wuming_rentype = this.GetCookie("www_wuming_rentype");
this.www_wuming_renid = parseInt(this.GetCookie("www_wuming_renid"));
this.timeDifference = 1000 * 60 * 10;//时间间隔10分钟
this.www_wuming_renrequestTime = this.GetCookie("www_wuming_renrequestTime");
this.isSHTML = document.compatMode=="CSS1Compat" ? true:false;
this.divTop=0;
this.divLeft=0;
this.divWidth=0;
this.divHeight = 0;
this.docHeight = 0;
this.docWidth = 0;
this.objTimer = 0;
this.timecounter = 0;
this.showtimeout = 30;//显示关闭时间，单位为秒
this.olympic2008pop = null;
document.write(this.popDivs);
this.olympic2008pop = document.getElementById("olympic2008pop");
if (window.addEventListener) {
window.addEventListener("resize", this.resizeDiv, false);
} else {
window.attachEvent("onresize", this.resizeDiv);
}
//window.onerror = window.onerror || function(e){}
},
start:function() {
var this_ = this;
var getKuaixun = {
url:function(){
var date = new Date();
return this_.dataJsPath+"?random="+date.getTime();
},
variable: "kuaixun",
interval: -1,
hold: "kuaixun_hold",
onSuccess : function(data){
if(data.id != null && data.id != "" && typeof(data.id)!= "undefined"){
if( data.type == this_.www_wuming_rentype && parseInt(data.id) == this_.www_wuming_renid ){
}else{
this_.www_wuming_rentype = data.type;
this_.www_wuming_renid = parseInt(data.id);
this_.SetCookie("www_wuming_rentype",data.type);
this_.SetCookie("www_wuming_renid",data.id);
if(data.type == "system"){
this_.SetCookie("olympic2008kuaixunId",data.id);
}
var dataContent = data.content.replace(/\r\n/g,"<br>");
if(data.url != ""){
if(data.url.indexOf("http://")<0){
data.url = "http://"+data.url;
}
dataContent = this_.writeStr(dataContent);
//dataContent += " <a href=\""+data.url+"\" target=\"_blank\">详细</a>>>";
dataContent += "</a> <a href=\""+data.url+"\" target=\"_blank\">详细</a>>>";
dataContent = "<a href=\""+data.url+"\" target=\"_blank\">" + dataContent;
}
this_.initDiv(dataContent);
}
}
}
};
//if( (new Date().getTime()-this.www_wuming_renrequestTime) > this.timeDifference){
this.SetCookie("www_wuming_renrequestTime",new Date().getTime());
GR(getKuaixun);
//}
},
getStrLen:function(str){
var len = 0;
var cnstrCount = 0;
for(var i = 0 ; i <str.length ; i++){
if(str.charCodeAt(i)>255)
cnstrCount = cnstrCount + 1 ;
}
len = str.length + cnstrCount;
return len;
},
substring:function(str,start,end){
var retStr = "";
var count = 0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)>255){
count += 2;
}else{
count += 1;
}
if(count<=end){
retStr += str.charAt(i);
}else{
break;
}
}
return retStr;
},
writeStr:function(str){
var newStr = "";
if(this.getStrLen(str)>100){
newStr = this.substring(str,0,100)+"...";
}else{
newStr = str;
}
return newStr;
},
getCookieVal:function (offset){
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
},
GetCookie:function (name){
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return this.getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
},
SetCookie:function (name, value){
var argv = this.SetCookie.arguments;
var argc = this.SetCookie.arguments.length;
//var expires = (argc > 2) ? argv[2] : null;
var expiresTime = new Date("2008","8","10");
var expires = (argc > 2) ? argv[2] : expiresTime;
var path = (argc > 3) ? argv[3] : "/";
var domain = (argc > 4) ? argv[4] : this.cookieDomain;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +((path == null) ? "" : ("; path=" + path)) +((domain == null) ? "" : ("; domain=" + domain)) +((secure == true) ? "; secure" : "");
},
CheckCookieDomain:function(){
var sohuMatrix = [".sohu.com",".sogou.com",".chinaren.com",".focus.cn",".17173.com",".goodfeel.com.cn",".go2map.com"];
for(var i=0;i<sohuMatrix.length;i++){
if(this.docUrl.indexOf(sohuMatrix[i])>=0){
this.cookieDomain = sohuMatrix[i];
break;
}
}
},
/********************** view Div **************************/
//initDiv --> moveDiv --> resizeDiv --> closeDiv
initDiv:function (content){
try{
this.divTop = parseInt(this.olympic2008pop.style.top,10);//div上部的像素点
this.divLeft = parseInt(this.olympic2008pop.style.left,10);//div左边的像素点
this.divHeight = parseInt(this.olympic2008pop.offsetHeight,10);//div自身高度
this.divWidth = parseInt(this.olympic2008pop.offsetWidth,10);//div自身宽度
//+++在web标准声明下用document.documentElement; 如果是未声明用document.body+++用document.compatMode判断+++
if(this.isSHTML){
this.docHeight = document.documentElement.clientHeight;//页面高度
this.docWidth = document.documentElement.clientWidth;//页面宽度
this.olympic2008pop.style.top = parseInt(document.documentElement.scrollTop,10) + this.docHeight + 10 + "px";//变换div上部的位置
this.olympic2008pop.style.left = this.docWidth - this.divWidth + parseInt(document.documentElement.scrollLeft,10) + "px";//变换div左边的位置
}else{
this.docHeight = document.body.clientHeight;//页面高度
this.docWidth = document.body.clientWidth;//页面宽度
this.olympic2008pop.style.top = parseInt(document.body.scrollTop,10) + this.docHeight + 10;//变换div上部的位置
this.olympic2008pop.style.left = this.docWidth - this.divWidth + parseInt(document.body.scrollLeft,10);//变换div左边的位置
}
document.getElementById("kuaixunContent").innerHTML = content;//填充内容
this.olympic2008pop.style.visibility="visible";
this.objTimer = window.setInterval("www_wuming_ren.moveDiv()",1);
}catch(e){
}
},
moveDiv:function(){
try{
var tmpVar1;
if(this.isSHTML){
tmpVar1 = parseInt(document.documentElement.scrollTop,10);
}else{
tmpVar1 = parseInt(document.body.scrollTop,10);
}
if(parseInt(this.olympic2008pop.style.top,10) <= (this.docHeight - this.divHeight + tmpVar1)){
if(this.objTimer){
window.clearInterval(this.objTimer);
}
this.timecounter=0;
this.resizeDiv();
this.objTimer = window.setInterval("www_wuming_ren.resizeDiv()",1000);//1秒调一次，实现showtimeout*1000ms的效果
}else{
this.divTop = parseInt(this.olympic2008pop.style.top,10);
this.olympic2008pop.style.top = this.divTop - 5 +"px";
}
}catch(e){
}
},
resizeDiv:function(){
this.timecounter+=1;
if((this.timecounter) >= this.showtimeout){//超过时间限制就隐藏Div
if(this.objTimer) window.clearInterval(this.objTimer)
this.objTimer = window.setInterval("www_wuming_ren.closeDiv()",1);
}
try{
this.divHeight = parseInt(this.olympic2008pop.offsetHeight,10);
this.divWidth = parseInt(this.olympic2008pop.offsetWidth,10);
if(this.isSHTML){
this.docWidth = document.documentElement.clientWidth;
this.docHeight = document.documentElement.clientHeight;
this.olympic2008pop.style.top = this.docHeight - this.divHeight + parseInt(document.documentElement.scrollTop,10)+"px";
this.olympic2008pop.style.left = this.docWidth - this.divWidth + parseInt(document.documentElement.scrollLeft,10)+"px";
}else{
this.docWidth = document.body.clientWidth;
this.docHeight = document.body.clientHeight;
this.olympic2008pop.style.top = this.docHeight - this.divHeight + parseInt(document.body.scrollTop,10);
this.olympic2008pop.style.left = this.docWidth - this.divWidth + parseInt(document.body.scrollLeft,10);
}
}catch(e){
}
},
closeDiv:function(){
this.olympic2008pop.style.visibility="hidden";
if(this.objTimer) window.clearInterval(this.objTimer);
}
}//武鸣人网站https://www.wuming.ren 网站很好记住，wuming.ren(武鸣拼音.ren域名后缀)
var www_wuming_ren = new www_wuming_ren();
www_wuming_ren.start();
</script>
</body>
</html>本文来自武鸣人网站，转载请注明出处