一些网页悬浮窗代码.doc

在线客服代码可展开和收起的在线客服代码imgborder:0;ul,lipadding:0;margin:0;.QQbox z-index:99;right:0;width:128px;height:128px;position:absolute;.QQbox .pressright:0;width:36px;cursor:pointer;position:absolute;height:128px;.QQbox .Qlistleft:0;width:131px;position:absolute;height:128px;background:url(/uploads/allimg/1107/floatServiceBj.gif) no-repeat left center;.QQbox .Qlist ulpadding:43px 0 0 21px;.QQbox .Qlist liheight:26px;margin-bottom:11px;_margin-bottom:7px; list-style-type:none;window.onload = window.onresize = window.onscroll = function ()var oBox = document.getElementById(divQQbox);var oLine = document.getElementById(divOnline);var oMenu = document.getElementById(divMenu);var iScrollTop = document.documentElement.scrollTop | document.body.scrollTop;setTimeout(function ()clearInterval(oBox.timer);var iTop = parseInt(document.documentElement.clientHeight - oBox.offsetHeight)/2) + iScrollTop;oBox.timer = setInterval(function ()var iSpeed = (iTop - oBox.offsetTop) / 8;iSpeed = iSpeed 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);oBox.offsetTop = iTop ? clearInterval(oBox.timer) : (oBox.style.top = oBox.offsetTop + iSpeed + px);, 30), 100)oBox.onmouseover = function ()this.style.width = 131 + px;oLine.style.display = block;oMenu.style.display = none;oBox.onmouseout = function ()this.style.width = ;oLine.style.display = none;oMenu.style.display = block;悬浮窗口定位显示效果网页特效 跟随页面悬浮滚动的调查窗口bodytext-align:center;font-size:12px;color:#333;font-family:宋体;background:#fff;margin:0 auto;padding:0;body divtext-align:center;margin-right:auto;margin-left:auto;div,form,ul,ol,li,span,p,dt,dd,dlborder:0;margin:0;padding:0;img,a imgborder:0;margin:0;padding:0;h1,h2,h3,h4,h5,h6font-size:12px;font-weight:400;margin:0;padding:0;ul,ol,lilist-style:none;tdword-break:break-all;acolor:#003cc8;text-decoration:none;a:hovertext-decoration:none;.f_tahomafont-family:Tahoma;em,ifont-style:normal;.asp_zzjs_netoverflow:hidden;position:fixed;left:0px;top:200px;z-index:2;.left_zzjsbackground:red;width:20px;height:80px;text-align:center;line-height:20px;display:block;color:#fff;.contentbackground:#999;width:800px;height:2000px;margin:0 auto;* html,* html body/*修正IE6振动bug*/background-image:url(about:blank);background-attachment:fixed;.asp_zzjs_net_position:absolute;_bottom:auto;_left:0;_top: expression(documentElement.scrollTop + 200 + px);.pagewidth:0px; position:absolute;height:0px;left:0;top:0px;z-index:1;overflow:hidden;display:none;.page divborder:1px solid #000;overflow:hidden;width:398px;.page h1height:40px;text-align:center;font-size:20px;color:#fff;background:red;line-height:40px;.page h1 afloat:right;color:#000;margin-top:-15px;.page ppadding:10px;line-height:22px;font-size:14px;text-align:left;background:#fff;height:400px;width:378px;$(function() $(#clickopen).click(function() var offset=$(#clickopen).offset().top; $(#page).css(top,offset+px); $(#clickopen).hide(); $(#page).animate( width: 400px, height: 400px, left: ($(body).width()/2-200)+px, top: (offset-100)+px, opacity: toggle , 300 ); return false; ) $(#closepage).click(function() var offset=$(#page).offset().top; $(#page).animate( width: 0px, height: 0px, left: 0px, top: (offset+100)+px, opacity: toggle , 300 ); $(#clickopen).show(); return false; )网站首页漂浮窗口代码 var x = 50,y = 60 var xin = true, yin = true var step = 1 var delay = 10 var obj=document.getElementById(ad) function floatAD() var L=T=0 var R= document.body.clientWidth-obj.offsetWidth var B = document.body.clientHeight-obj.offsetHeight obj.style.left = x + document.body.scrollLeft obj.style.top = y + document.body.scrollTop x = x + step*(xin?1:-1) if (x R) xin = false; x = R y = y + step*(yin?1:-1) if (y B) yin = false; y = B var itl= setInterval(floatAD(), delay) obj.onmouseover=function()clearInterval(itl) obj.onmouseout=function()itl=setInterval(floatAD(), delay) 代码分析： var x = 50,y = 60 /浮动层的初始位置，分别对应层的初始X坐标和Y坐标 var xin = true, yin = true /判断层的X坐标和Y坐标是否在在控制范围之内，xin为真