scrollTop+documentElement+js提示框-转载

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量152 收藏
点赞数
分类专栏： 不解，贴代码 文章标签： javascript xhtml ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cqh520llr/article/details/84080498
版权 

<!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">  '+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>
cqh520llr
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html页面悬浮提示框,js实现页面悬浮框
weixin_29248611的博客
06-04 4504
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用.当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示..div1 {height:2000px;}.div2 {width:%;height:35px;background-color:#3399FF;margin-top:100px;}.div2_1{position:fixed;wi...
Js 订制自己的AlertBox(信息提示框)
10-30
### Js 订制自己的AlertBox(信息提示框) 在网页开发过程中，经常需要用到弹出框来显示信息或警告用户。JavaScript 提供了内置的 `alert()` 函数来快速实现这一功能，但其样式和功能相对单一。为了提高用户体验并更...
【兼容性解决】页面滚动距离document.documentElement.scrollTop兼容性问题
xyphf的博客
03-30 5821
页面滚动距离兼容性解决 *{ margin:0; padding:0; list-style:none; font-family: "微软雅黑","张海山锐线体简"} body{height:2000px;} #div1{width:100px;height:101px;background:red; position:fixed;right:0;bottom:0;}
kindeditor在光标处插入编辑器外的数据
weixin_30538029的博客
10-08 348
页面 　　　　　　　　　　　　　　 <div class="form-group clearfix"> <label class="control-label col-sm-3 col-md-3 col-lg-3 m-from-fon1" for="userName">用户</label> ...
document.documentElement.scrollTop指定位置失效解决办法
weixin_30949361的博客
08-29 3343
近期在vue的H5项目中，做指定位置定位的时候发现使用document.documentElement.scrollTop一直不生效。 解决办法是document.documentElement.scrollTop改成document.body.scrollTop； 如果是PC端项目，则使用document.documentElement.scrollTop。 转载于:http...
vite+ts+vue组合式api-c端-移动端项目（保姆级教学）
SuperTun的博客
02-03 1749
vite+ts+vue组合式api-c端-移动端项目（保姆级教学）
js提示框-转载+++ js 乱码+++自动提交+滚动图片加载+箭头导航(转载)
cqh520llr的专栏
11-14 408
[code="java"] String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); } var camelize = function (s) { return s.replace(/-(\w)/g, function (s...
html 向下的气泡弹出框,JS+CSS实现一个气泡提示框
weixin_39763953的博客
06-03 1069
分享一个气泡提示框，练习的技术有：(1)JS响应鼠标的事件；(2)纯CSS制作三角形。效果这样：这是html：气泡对话框h1{font-size: 60px;margin-top: 0;font-family: Arial, sans-serif;text-shadow: 2px 0px 10px #292929;letter-spacing: 0px;text-decoration: none...
DIV+js+css跟随鼠标的浮动提示框
D的博客
02-27 2329
RF: http://blog.163.com/meng_qiang/blog/static/1773543732011416105516937/&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;...
简单实现js浮动框
10-20
var y = window.pageYOffset || document.documentElement.scrollTop; return { top: y }; } }; ``` 在这个JavaScript对象中，`Message`包含了浮动框的各种操作方法，如`set`用于切换最小化和展开状态，`close`...
关于window.pageYOffset和document.documentElement.scrollTop
12-10
在给定的例子中，当执行 `window.scrollBy(0, 100)` 时，页面向下滚动100像素，然后通过 `alert(window.pageYOffset)` 弹出提示框显示滚动后的距离，即100。这说明`pageYOffset`会实时反映页面的滚动状态。 而 `...
javascript弹出带文字信息的提示框效果_.docx
10-09
javascript 弹出带文字信息的提示框效果 javascript 作用域是前端开发必把握的基础学问。在这篇文章中，我们将主要介绍 javascript 中的作用域的相关资料，并分享一个实例，讲解并描述了如何实现javascript 弹出带...
js 弹出框 替代浏览器的弹出框
10-28
因此，本文将介绍一种使用JavaScript（简称JS）自定义实现的弹出框方法，该方法不仅可以替代浏览器默认的弹出框，而且能够提供更好的用户体验。 #### 二、自定义弹出框设计思路 为了实现一个更加美观且可定制的弹出...
支持鼠标跟随的JS+CSS链接提示框
08-11 172
觉得纯css的tips限制有点大，而且好像兼容性也不好，这是我发现的一个Js+CSS的链接提示框效果，还会跟随鼠标而移动，而且兼容性也不错，代码与大家分享
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 650
JavaScript青少年简明教程：函数及其相关知识（下）
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 418
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 78
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
vue3 + ts +vant 中的van-list如何实现滚动到底部加载下一页数据
05-19
const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop; const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值