随网页滚动条上下移动的效果浮动QQ在线客服&网站QQ在线咨询

View Post

Code Snippet

<body>
<div style=\'visibility:visible;position:absolute;top:0;left:0;width:300px;height:180px;border:3px double #AAA\' id=\'msgtip\'></div>

<script>
// 浏览器类型获取.
if (typeof Platform == \'undefined\') var Platform = {};
Platform.getUserAgent = navigator.userAgent;
Platform.isGecko = Platform.getUserAgent.indexOf("Gecko") != -1;
Platform.isOpera = Platform.getUserAgent.indexOf("Opera") != -1;
Platform.isIE = Platform.getUserAgent.indexOf("MSIE") != -1;

var LoginUI = !!window.LoginUI || {};

LoginUI.getViewportWidth = function(){
 var width=0;
 if(document.documentElement && document.documentElement.clientWidth){
 width=document.documentElement.clientWidth;}
 else if(document.body && document.body.clientWidth){
 width=document.body.clientWidth;}
 else if(window.innerWidth){
 width=window.innerWidth-18;}
 return width;
}

LoginUI.getContentHeight = function()
{
 if(document.body&&document.body.offsetHeight){
 return document.body.offsetHeight;
 }
}

LoginUI.getViewportHeight = function() {
 var height=0;
 if(window.innerHeight){
 height=window.innerHeight-18;}
 else if(document.documentElement&&document.documentElement.clientHeight){
 height=document.documentElement.clientHeight;}
 else if(document.body&&document.body.clientHeight){
 height=document.body.clientHeight;}
 return height;
}

LoginUI.getViewportScrollX = function(){
 var scrollX=0;
 if(document.documentElement&&document.documentElement.scrollLeft){
 scrollX=document.documentElement.scrollLeft;}
 else if(document.body&&document.body.scrollLeft){
 scrollX=document.body.scrollLeft;}
 else if(window.pageXOffset){
 scrollX=window.pageXOffset;}
 else if(window.scrollX){
 scrollX=window.scrollX;}
 return scrollX;
}

LoginUI.getViewportScrollY=function() {
 var scrollY=0;
 if(document.documentElement&&document.documentElement.scrollTop){
 scrollY=document.documentElement.scrollTop;}
 else if(document.body&&document.body.scrollTop){
 scrollY=document.body.scrollTop;}
 else if(window.pageYOffset){
 scrollY=window.pageYOffset;}
 else if(window.scrollY){
 scrollY=window.scrollY;}
 return scrollY;
}

LoginUI.getViewportScrollHeight=function() {
 var scrollH=0;
 if(document.documentElement && document.documentElement.scrollHeight){
 scrollH=document.documentElement.scrollHeight;}
 else{
 scrollH=document.body.scrollHeight;}
 return scrollH;
}

LoginUI.centerDiv = function(div)
{
 var top=((LoginUI.getViewportHeight()-div.offsetHeight)/2);
 if(top<0)top=10;
 div.style.left=((LoginUI.getViewportWidth()-div.offsetWidth)/2)+"px";
 div.style.top=top+LoginUI.getViewportScrollY()+"px";
}

LoginUI.showLogin = function()
{
 $("_userAuthImg").src = USERMGR_ROOT + "authimg?tmp=" + Date.parse(new Date());
 $("Login").className = "popup container";
 $("Login").style.display="block";
 LoginUI.centerDiv($("Login"));
 $("blockUI").style.display="block";
 $("blockUI").style.height = LoginUI.getViewportScrollHeight() + LoginUI.getViewportScrollY() + "px";
}

LoginUI.hideLogin = function()
{
 //$("Login").className = "popup container";
 //LoginUI.centerDiv($("Login"));
 $("blockUI").style.display="none";
 $("Login").style.display="none";
 //$("blockUI").style.height = LoginUI.getViewportScrollHeight() + LoginUI.getViewportScrollY() + "px";
}

function $(id)
{
return document.getElementById(id)
}

function scrollMsgTip()
{
 var t = LoginUI.getViewportHeight() + LoginUI.getViewportScrollY() - $("msgtip").offsetHeight;
 if(!Platform.isIE)
 {
 t += 16;
 }

 $("msgtip").style.top = t + "px";
 $("msgtip").style.left = LoginUI.getViewportWidth() + LoginUI.getViewportScrollX() - $("msgtip").offsetWidth + "px";
}

function scrollTip()
{
 scrollMsgTip()
}

function preventEvents(event)
{
 try
 {
 if(Platform.isIE)
 {
 event.cancelBubble = true;
 event.returnValue = false;
 }
 else
 {
 event.stopPropagation();
 event.preventDefault();
 }
 }
 catch(ex){}
}

$("msgtip").innerHTML = "直接拷贝即可执行"
$("msgtip").style.visibility = "visible";
scrollTip();
window.onscroll = scrollTip;
</script>
 
 
 
 
 
 
 
</body>

View Post

随网页滚动条上下移动的效果 浮动QQ在线客服&网站QQ在线咨询

随网页滚动条上下移动的效果浮动QQ在线客服&网站QQ在线咨询