分享一款js右下角悬浮弹窗特效

作者:sky 点击:69 评论:0 发布时间:周一, 03/31/2014 - 02:08 所属分类:窗口特效

网页右下角漂浮弹窗跟随页面悬浮显示，这个弹窗带有关闭按钮供用户实用，且兼容当前主流浏览器。

<html> <head> <meta http-equiv="content-Type" content="text/html;charset=gb2312"> <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" /> <title>网页特效右下角漂浮的窗口站长特效网</title> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> 窗口内容的文件下载：http://www.zzjs.net/img/zzjs_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>  <script type="text/javascript"> var Groj = function() { this.initialize.apply(this, arguments); }//欢迎来到q站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 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; } }//欢迎来到站长特效网，d我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 //////////////////////////////////////////////////////////////////////// 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_zzjs_net = function() { this.initialize.apply(this, arguments); } www_zzjs_net.prototype = { initialize: function() { this.dataJsPath = "http://www.zzjs.net/img/zzjs_data.js"; this.imagesPath = "http://www.zzjs.net/img/1"; //请自行修改以上两行的地址，也可以使用相对路径，如下两行： //this.dataJsPath = "zzjs_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+'/pop_bg.png");background:url('+this.imagesPath+'/pop_bg.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+'/title.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+'/close.png" width="15" height="15" alt="" /></a></div>'; this.popDivs += '<div class="kxclose"><a style="cursor:hand;" onclick="www_zzjs_net.closeDiv();"><img src="'+this.imagesPath+'/close.png" width="15" height="15" alt="" /></a></div>'; this.popDivs += '<div id="kuaixunContent"></div>'; this.popDivs += '<div class="kxsohu2008"><a href="http://zzjs.net" target="_blank"><img src="'+this.imagesPath+'/zzjs_net_title.gif" width="239" height="22" alt="" /></a></div>'; this.popDivs += '<div class="kuaixunads240x40"><a href="http://www.zzjs.net" target="_blank"><img src="'+this.imagesPath+'/ad240x40_zzjs_net.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_zzjs_nettype = this.GetCookie("www_zzjs_nettype"); this.www_zzjs_netid = parseInt(this.GetCookie("www_zzjs_netid")); this.timeDifference = 1000 * 60 * 10;//时间间隔10分钟 this.www_zzjs_netrequestTime = this.GetCookie("www_zzjs_netrequestTime"); 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_zzjs_nettype && parseInt(data.id) == this_.www_zzjs_netid ){ }else{ this_.www_zzjs_nettype = data.type; this_.www_zzjs_netid = parseInt(data.id); this_.SetCookie("www_zzjs_nettype",data.type); this_.SetCookie("www_zzjs_netid",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_zzjs_netrequestTime) > this.timeDifference){ this.SetCookie("www_zzjs_netrequestTime",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_zzjs_net.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_zzjs_net.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_zzjs_net.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); } }//欢迎来到站长特效网，我们的网址是www.zzjs.net，很d好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 var www_zzjs_net = new www_zzjs_net(); www_zzjs_net.start(); </script> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(0)

100%

踩一下

(0)

100%

标签: