`
cqh520llr
  • 浏览: 509680 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
文章分类
社区版块
存档分类
最新评论

scrollTop+documentElement+js提示框-转载

 
阅读更多 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ϟ±덢τµµ</title>
<script type="text/javascript">
window.onscroll = function () {
var oWatermark = document.getElementById("divWatermark");
oWatermark.style.top = document.body.scrollTop+50;//document.documentElement.scrollTop;

}
</script>
</head>
<body>
<p>Try scrolling this window. </p>
<div id="divWatermark" style="position: absolute; top:0;right: 0px; color: #cccccc; width: 150px; height: 30px; background-color: navy">Watermark </div>
<p>Line 1 </p>
<p>Line 2 </p>
<p>Line 3 </p>
<p>Line 4 </p>
<p>Line 5 </p>
<p>Line 6 </p>
<p>Line 7 </p>
<p>Line 8 </p>
<p>Line 9 </p>
<p>Line 10 </p>
<p>Line 11 </p>
<p>Line 12 </p>
<p>Line 1 </p>
<p>Line 2 </p>
<p>Line 3 </p>
<p>Line 4 </p>
<p>Line 5 </p>
<p>Line 6 </p>
<p>Line 7 </p>
<p>Line 8 </p>
<p>Line 9 </p>
<p>Line 10 </p>
<p>Line 11 </p>
<p>Line 12 </p>
<p>Line 1 </p>
<p>Line 2 </p>
<p>Line 3 </p>
<p>Line 4 </p>
<p>Line 5 </p>
<p>Line 6 </p>
<p>Line 7 </p>
<p>Line 8 </p>
<p>Line 9 </p>
<p>Line 10 </p>
<p>Line 11 </p>
<p>Line 12 </p>
</body>
</html>




<script language="javascript">
function dealscroll()
{
test.style.top=document.body.scrollTop+50;
test.style.left=document.body.scrollLeft;
}
</script>
<body onscroll=" dealscroll()" onselectstart="return false">
试试看，你能不能复制这个网页文档中的内容；
<textarea rows="500" cols="500" id="textarea1" name="textarea1">
</textarea>
<a id=test href="http://www.cxybl.com" style='position:absolute;LEFT:0;top:50;word-break:keep-all'>
程序员部落</a>
</body>



<script type="text/javascript">
if (typeof document.attachEvent!='undefined') {
   window.attachEvent('onload',init);
   document.attachEvent('onmousemove',moveMouse);
   document.attachEvent('onclick',checkMove); }
else {
   window.addEventListener('load',init,false);
   document.addEventListener('mousemove',moveMouse,false);
   document.addEventListener('click',checkMove,false);
}

var oDv=document.createElement("div");
var dvHdr=document.createElement("div");
var dvBdy=document.createElement("div");
var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft;
boxOpen=false;
ox=10;
oy=10;
lockX=0;
lockY=0;

function init() {
 oDv.appendChild(dvHdr);
 oDv.appendChild(dvBdy);
 oDv.style.position="absolute";
 oDv.style.visibility='hidden';
 document.body.appendChild(oDv); 
}

function defHdrStyle() {
 dvHdr.innerHTML='<img  style="vertical-align:middle"  src="info.gif">&nbsp;&nbsp;'+dvHdr.innerHTML;
 dvHdr.style.fontWeight='bold';
 dvHdr.style.width='150px';
 dvHdr.style.fontFamily='arial';
 dvHdr.style.border='1px solid #A5CFE9';
 dvHdr.style.padding='3';
 dvHdr.style.fontSize='11';
 dvHdr.style.color='#4B7A98';
 dvHdr.style.background='#D5EBF9';
 dvHdr.style.filter='alpha(opacity=85)'; // IE
 dvHdr.style.opacity='0.85'; // FF
}

function defBdyStyle() {
 dvBdy.style.borderBottom='1px solid #A5CFE9';
 dvBdy.style.borderLeft='1px solid #A5CFE9';
 dvBdy.style.borderRight='1px solid #A5CFE9';
 dvBdy.style.width='150px';
 dvBdy.style.fontFamily='arial';
 dvBdy.style.fontSize='11';
 dvBdy.style.padding='3';
 dvBdy.style.color='#1B4966';
 dvBdy.style.background='#FFFFFF';
 dvBdy.style.filter='alpha(opacity=85)'; // IE
 dvBdy.style.opacity='0.85'; // FF
}

function checkElemBO(txt) {
if (!txt || typeof(txt) != 'string') return false;
if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf('[')>-1))
   return true;
else
   return false;
}

function scanBO(curNode) {
   if (checkElemBO(curNode.title)) {
         curNode.boHDR=getParam('header',curNode.title);
         curNode.boBDY=getParam('body',curNode.title);
   curNode.boCSSBDY=getParam('cssbody',curNode.title);   
   curNode.boCSSHDR=getParam('cssheader',curNode.title);
   curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false;
   curNode.fixX=parseInt(getParam('fixedrelx',curNode.title));
   curNode.fixY=parseInt(getParam('fixedrely',curNode.title));
   curNode.absX=parseInt(getParam('fixedabsx',curNode.title));
   curNode.absY=parseInt(getParam('fixedabsy',curNode.title));
   curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10;
   curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10;
   curNode.fade=(getParam('fade',curNode.title)=='on')?true:false;
   curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04;
   curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0;
   if (getParam('requireclick',curNode.title)=='on') {
    curNode.requireclick=true;
    document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false);
    document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false);
   }
   else {// Note : if requireclick is on the stop clicks are ignored      
      if (getParam('doubleclickstop',curNode.title)!='off') {
       document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);
      } 
      if (getParam('singleclickstop',curNode.title)=='on') {
       document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);
      }
     }
   curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true;
   curNode.title='';
   curNode.hasbox=1;
    }
    else
       curNode.hasbox=2;  
}


function getParam(param,list) {
 var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]');
 var res = reg.exec(list);
 var returnvar;
 if(res)
  return res[2].replace('[[','[').replace(']]',']');
 else
  return '';
}

function Left(elem){ 
 var x=0;
 if (elem.calcLeft)
  return elem.calcLeft;
 var oElem=elem;
 while(elem){
   if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))
    x+=parseInt(elem.currentStyle.borderLeftWidth);
   x+=elem.offsetLeft;
   elem=elem.offsetParent;
   }
 oElem.calcLeft=x;
 return x;
 }

function Top(elem){
  var x=0;
  if (elem.calcTop)
   return elem.calcTop;
  var oElem=elem;
  while(elem){  
    if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))
    x+=parseInt(elem.currentStyle.borderTopWidth);
   x+=elem.offsetTop;
          elem=elem.offsetParent;
   }
   oElem.calcTop=x;
   return x;
  
}

var ah,ab;
function applyStyles() {
 if(ab)
  oDv.removeChild(dvBdy);
 if (ah)
  oDv.removeChild(dvHdr);
 dvHdr=document.createElement("div");
 dvBdy=document.createElement("div");
 CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle();
 CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle();
 dvHdr.innerHTML=CBE.boHDR;
 dvBdy.innerHTML=CBE.boBDY;
 ah=false;
 ab=false;
 if (CBE.boHDR!='') {  
  oDv.appendChild(dvHdr);
  ah=true;
 } 
 if (CBE.boBDY!=''){
  oDv.appendChild(dvBdy);
  ab=true;
 } 
}

var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ;
var ini=false;

// Customised function for inner window dimension
function SHW() {
   if (document.body && (document.body.clientWidth !=0)) {
      width=document.body.clientWidth;
      height=document.body.clientHeight;
   }
   if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) {
      width=document.documentElement.clientWidth;  
      height=document.documentElement.clientHeight;  
   }  
   return [width,height];
}


var ID=null;
function moveMouse(e) {
   //boxMove=true;
 e?evt=e:evt=event;
 
 CSE=evt.target?evt.target:evt.srcElement;
 
 if (!CSE.hasbox) {
    // Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement
    iElem=CSE;
    while ((iElem.parentNode) && (!iElem.hasbox)) {
       scanBO(iElem);
       iElem=iElem.parentNode;
    }   
 }
 
 if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){  
    if (!CSE.boxItem) {
   iterElem=CSE;
   while ((iterElem.hasbox==2)&&(iterElem.parentNode))
     iterElem=iterElem.parentNode;
   CSE.boxItem=iterElem;
   }
  iterElem=CSE.boxItem;
  if (CSE.boxItem&&(CSE.boxItem.hasbox==1))  {
   LBE=CBE;
   CBE=iterElem;
   if (CBE!=LBE) {
    applyStyles();
    if (!CBE.requireclick)
     if (CBE.fade) {
      if (ID!=null)
       clearTimeout(ID);
      ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay);
     }
     else {
      if (ID!=null)
       clearTimeout(ID);
      COL=1;
      ID=setTimeout("oDv.style.visibility='visible';ID=null;",CBE.delay);      
     }
    if (CBE.IEbugfix) {hideSelects();}
    fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX;
    fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY;   
    lockX=0;
    lockY=0;
    boxMove=true;
    ox=CBE.offX?CBE.offX:10;
    oy=CBE.offY?CBE.offY:10;
   }
  }
  else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove)) {
   // The conditional here fixes flickering between tables cells.
   if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) {      
      CBE=null;
      if (ID!=null)
       clearTimeout(ID);
      fadeOut();
      showSelects();
   }
  }
  LSE=CSE;
 }
 else if (((isChild(CSE,dvHdr) || isChild(CSE,dvBdy))&&(boxMove))) {
  totalScrollLeft=0;
  totalScrollTop=0;
  
  iterElem=CSE;
  while(iterElem) {
   if(!isNaN(parseInt(iterElem.scrollTop)))
    totalScrollTop+=parseInt(iterElem.scrollTop);
   if(!isNaN(parseInt(iterElem.scrollLeft)))
    totalScrollLeft+=parseInt(iterElem.scrollLeft);
   iterElem=iterElem.parentNode;   
  }
  if (CBE!=null) {
   boxLeft=Left(CBE)-totalScrollLeft;
   boxRight=parseInt(Left(CBE)+CBE.offsetWidth)-totalScrollLeft;
   boxTop=Top(CBE)-totalScrollTop;
   boxBottom=parseInt(Top(CBE)+CBE.offsetHeight)-totalScrollTop;
   doCheck();
  }
 }
 
 if (boxMove&&CBE) {
  // This added to alleviate bug in IE6 w.r.t DOCTYPE
  bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
  bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;
  mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientLeft;
  mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientTop;
  if ((CBE)&&(CBE.windowLock)) {
   mouseY < -oy?lockY=-mouseY-oy:lockY=0;
   mouseX < -ox?lockX=-mouseX-ox:lockX=0;
   mouseY > (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY;
   mouseX > (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX;   
  }
  oDv.style.left=((fixposx)||(fixposx==0))?fixposx:bodyScrollLet+mouseX+ox+lockX+"px";
  oDv.style.top=((fixposy)||(fixposy==0))?fixposy:bodyScrollTop+mouseY+oy+lockY+"px";  
  
 }
}

function doCheck() { 
 if (   (mouseX < boxLeft)    ||     (mouseX >boxRight)     || (mouseY < boxTop) || (mouseY > boxBottom)) {
  if (!CBE.requireclick)
   fadeOut();
  if (CBE.IEbugfix) {showSelects();}
  CBE=null;
 }
}

function pauseBox(e) {
   e?evt=e:evt=event;
 boxMove=false;
 evt.cancelBubble=true;
}

function showHideBox(e) {
 oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden';
}

function hideBox(e) {
 oDv.style.visibility='hidden';
}

var COL=0;
var stopfade=false;
function fadeIn(fs) {
  ID=null;
  COL=0;
  oDv.style.visibility='visible';
  fadeIn2(fs);
}

function fadeIn2(fs) {
  COL=COL+fs;
  COL=(COL>1)?1:COL;
  oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')';
  oDv.style.opacity=COL;
  if (COL<1)
   setTimeout("fadeIn2("+fs+")",20);  
}


function fadeOut() {
 oDv.style.visibility='hidden';
 
}

function isChild(s,d) {
 while(s) {
  if (s==d)
   return true;
  s=s.parentNode;
 }
 return false;
}

var cSrc;
function checkMove(e) {
 e?evt=e:evt=event;
 cSrc=evt.target?evt.target:evt.srcElement;
 if ((!boxMove)&&(!isChild(cSrc,oDv))) {
  fadeOut();
  if (CBE&&CBE.IEbugfix) {showSelects();}
  boxMove=true;
  CBE=null;
 }
}

function showSelects(){
   var elements = document.getElementsByTagName("select");
   for (i=0;i< elements.length;i++){
      elements[i].style.visibility='visible';
   }
}

function hideSelects(){
   var elements = document.getElementsByTagName("select");
   for (i=0;i< elements.length;i++){
   elements[i].style.visibility='hidden';
   }
}
</script>

<p title="header=[温馨提示] body=[按住鼠标拖拖看<br>DIY你的主页]">拖动我试试</p>
--转载 

<script type="text/javascript"> 
//自动关闭提示框  
function Alert(str) {  
    var msgw,msgh,bordercolor;  
    msgw=350;//提示窗口的宽度  
    msgh=80;//提示窗口的高度  
    titleheight=25 //提示窗口标题高度  
    bordercolor="#336699";//提示窗口的边框颜色  
    titlecolor="#99CCFF";//提示窗口的标题颜色  
    var sWidth,sHeight;  
    //获取当前窗口尺寸  
    sWidth = document.body.offsetWidth;  
    sHeight = document.body.offsetHeight;  
//    //背景div  
    var bgObj=document.createElement("div");  
    bgObj.setAttribute('id','alertbgDiv');  
    bgObj.style.position="absolute";  
    bgObj.style.top="0";  
    bgObj.style.background="#E8E8E8";  
    bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";  
    bgObj.style.opacity="0.6";  
    bgObj.style.left="0";  
    bgObj.style.width = sWidth + "px";  
    bgObj.style.height = sHeight + "px";  
    bgObj.style.zIndex = "10000";  
    document.body.appendChild(bgObj);  
    //创建提示窗口的div  
    var msgObj = document.createElement("div")  
    msgObj.setAttribute("id","alertmsgDiv");  
    msgObj.setAttribute("align","center");  
    msgObj.style.background="white";  
    msgObj.style.border="1px solid " + bordercolor;  
    msgObj.style.position = "absolute";  
    msgObj.style.left = "50%";  
    msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";  
    //窗口距离左侧和顶端的距离   
    msgObj.style.marginLeft = "-225px";  
    //窗口被卷去的高+（屏幕可用工作区高/2）-150  
    msgObj.style.top = document.body.scrollTop+(window.screen.availHeight/2)-150 +"px";  
    msgObj.style.width = msgw + "px";  
    msgObj.style.height = msgh + "px";  
    msgObj.style.textAlign = "center";  
    msgObj.style.lineHeight ="25px";  
    msgObj.style.zIndex = "10001";  
    document.body.appendChild(msgObj);  
    //提示信息标题  
    var title=document.createElement("h4");  
    title.setAttribute("id","alertmsgTitle");  
    title.setAttribute("align","left");  
    title.style.margin="0";  
    title.style.padding="3px";  
    title.style.background = bordercolor;  
    title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";  
    title.style.opacity="0.75";  
    title.style.border="1px solid " + bordercolor;  
    title.style.height="18px";  
    title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif";  
    title.style.color="white";  
    title.innerHTML="提示信息";  
    document.getElementById("alertmsgDiv").appendChild(title);  
    //提示信息  
    var txt = document.createElement("p");  
    txt.setAttribute("id","msgTxt");  
    txt.style.margin="16px 0";  
    txt.innerHTML = str;  
    document.getElementById("alertmsgDiv").appendChild(txt);  
    //设置关闭时间  
    window.setTimeout("closewin()",2000);   
}  
function closewin() {  
    document.body.removeChild(document.getElementById("alertbgDiv"));  
    document.getElementById("alertmsgDiv").removeChild(document.getElementById("alertmsgTitle"));  
    document.body.removeChild(document.getElementById("alertmsgDiv"));  
} 

  function form_check(){                                                                                             
      if(document.form1.user.value==""){Alert("请输入用户名！");document.form1.user.focus();return (false);}        
      if(document.form1.password.value==""){Alert("请输入密码！");document.form1.password.focus();return (false);}  
      }                                                                                                             
 </script>                                                                                                          
                                                                                                                    
 <form name="form1" onsubmit="return form_check();" method="post" action="#">                               
 用户名： <input name="user" type="text" id="user"/>                                                                
 密码： <input name="password" type="password" id="password" />                                                     
 <INPUT id=btnEnter type="submit" name=btnEnter>
分享到：
| 打包war
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动).docx

    JS+CSS 实现遮罩居中弹出层（随浏览器窗口滚动条滚动） 本文将详细介绍使用 JS 和 CSS 实现遮罩居中弹出层，并且随浏览器窗口滚动条滚动。...该方法可以应用于各种Web项目中，例如弹出层、提示框、确认框等。

    js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合.docx

    在Web开发中，经常需要让某个元素（如一个提示框、悬浮按钮等）始终保持在屏幕的特定位置，即使用户滚动页面也不会受到影响。本篇文章将详细介绍如何利用 JavaScript 和 CSS 实现 DIV 始终居于屏幕中间、左下、左上...

    随滚动条移动的DIV层

    在网页设计与开发过程中，为了提高用户体验以及页面的交互性，常常会遇到需要制作一个随滚动条移动的元素（如提示框、广告栏等）。本文将通过分析一段具体的代码示例，详细介绍如何利用HTML、CSS及JavaScript技术...

    js提示特效

    常见的方法之一就是利用JavaScript来实现自定义的提示框，其中`alert`函数是最基础的一种弹窗方式。然而，原生的`alert`样式单一且不可定制，这限制了其在现代Web开发中的应用。因此，开发者们常常会自定义一些具有...

    javascript弹出带文字信息的提示框效果_.docx

    javascript 弹出带文字信息的提示框效果 javascript 作用域是前端开发必把握的基础学问。在这篇文章中，我们将主要介绍 javascript 中的作用域的相关资料，并分享一个实例，讲解并描述了如何实现javascript 弹出带...

    js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合

    在网页设计中，将一个`DIV`元素保持在屏幕的特定位置...这在创建浮动提示框、导航栏或其他需要跟随用户滚动的交互元素时非常有用。记得在实际应用中，根据具体需求调整代码，以适应不同尺寸的屏幕和浏览器兼容性问题。

    js提示信息jtip封装代码，可以是图片或文章

    位了，这个根据鼠标的当前位置来调整提示框的位置，确保它始终在鼠标附近。下面的`setTipPosition(e)`函数就是一个关键，它会计算鼠标的坐标，并据此设置提示框的位置。 ```javascript function setTipPosition(e) ...

    js+div+css弹出层.txt

    根据给定文件的信息，本文将围绕“js+div+css弹出层”的实现方法进行详细介绍。弹出层在网页设计中十分常见，主要用于提供额外的信息展示或者操作界面，如登录框、注册框、提示信息等。 ### 一、基本概念 #### 1.1...

    自定义js_Alert

    msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px"; msgObj.style.left = (sWidth - msgw) / 2 + "px"; ``` - **创建消息框**：同样使用`createElement`方法创建一个`div`...

    关于window.pageYOffset和document.documentElement.scrollTop

    在给定的例子中，当执行 `window.scrollBy(0, 100)` 时，页面向下滚动100像素，然后通过 `alert(window.pageYOffset)` 弹出提示框显示滚动后的距离，即100。这说明`pageYOffset`会实时反映页面的滚动状态。 而 `...

    网页模板——JQUEYR 消息插件 Messager v1.5 仿QQ消息弹出提醒.zip

    jQuery Messager的核心功能是创建动态的消息提示框，这些提示框可以模拟QQ等即时通讯应用中的各种消息样式，如信息、警告、错误等。其主要特点包括： 1. **自定义样式**：Messager允许开发者定制消息框的外观，包括...

    java easyui即时消息框实例

    top: document.body.scrollTop + document.documentElement.scrollTop + 200, bottom: '' } }); }); }); ``` 在这个例子中，`title`定义了消息框的标题，`msg`是显示的消息内容，`showType`决定了消息框的动画...

    弹出框随滚动条滚动

    当用户在页面上滚动时，某些特定的弹出框（如提示信息、菜单或对话框）需要保持在用户的视野内，这通常通过JavaScript或者CSS来实现。以下是关于这个主题的详细知识点： 1. **JavaScript事件监听**： - **scroll...

    深入浅析JavaScript中的scrollTop

    JavaScript中的scrollTop属性是用于获取或设置一个元素的顶部相对其视窗顶部的偏移量。当页面内容超出可视区域大小，垂直方向上的滚动条会允许用户向下或向上滚动页面。scrollTop可以用来检测当前滚动条的位置，也...

    javascript学习笔记1

    - `prompt(message[, default])`：显示一个提示框，允许用户输入信息。 - **事件监听** - `onload`：页面加载完成时触发。 - `window.onscroll`：页面滚动时触发。 - `window.onresize`：页面大小改变时触发。 ...

    检测低版本IE6.0并提示下载新版本IE的javascript脚本

    对于IE6，则通过监听滚动事件动态调整提示框的位置。 ```css #ie6-warning { background: rgb(255, 255, 225) url("/upload/201006/20100628012515690.gif") no-repeat scroll 8px center; position: absolute; ...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    Js 订制自己的AlertBox(信息提示框)

    ### Js 订制自己的AlertBox(信息提示框) 在网页开发过程中，经常需要用到弹出框来显示信息或警告用户。JavaScript 提供了内置的 `alert()` 函数来快速实现这一功能，但其样式和功能相对单一。为了提高用户体验并更...

    css div实现的遮罩层完美兼容IE6-IE9 FireFox

    top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight); } ``` 对于`#load_content`，我们需要设置其为绝对定位，以便在页面中央显示。同时，为了在IE6中正确显示，...

    鼠标经过显示隐藏信息

    return {x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft, y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop}; }, start: function (obj) { var ...

Magicbox
Global site tag (gtag.js) - Google Analytics