-
【原理】 先把所有奖项放在一个数组里，然后采用一个计时器，每个一段之间生成一个随机数，把数组中的某项取出来。 function playFun(){ timer=setInterval(function(){},50); } 【随机数】 var random=Math.floor(Math.romdom()*data.length);（不能用round四舍五入）查看全部
-
【键盘事件】 keyDown当用户按下键盘上的[任意键]时触发，而且如果按住不放的话，会重复触发此事件 keyPress当用户按下键盘上的[字符键]时触发，而且如果按住不放的话，会重复触发此事件 keyUp当用户释放键盘上的键时触发查看全部
-
【在空白地方点击列表隐藏】 document.onclick=function(){ stateList.style.display="none"; 很明显，由于冒泡，列表根本无法出现了 } 所以，应该在点击div使列表出现的地方阻止事件冒泡 loginState.onclick=function(e){ e=e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } stateList.style.display="block"; }查看全部
-
【接上条_切换状态】 lis[i].onclick=function(){ var id=this.id; stateList.style.display="none"; stateTxt.innerHTML=getByClass("stateSelect_text",id)[0].innerHTML; 先找到对应状态的id，再通过类名来获取文本内容 loginStateShow.className=""; loginStateShow.className="login-state-show "+id;（注意show后面有一个空格） 【两个类】这里有两个类login-state-show和online，如果切换，只是切换online，login-state-show是仍然要保留的。 【冒泡】此时，点完图标之后ul并没有隐藏。因为，鼠标点击li的时候ul隐藏，但是点击整个div的时候ul隐藏。 所以需要阻止冒泡 e=e || window.event; if(e.stopPropagation){ e.stopPropagation(); }else{ e.cancelBubble=true; } }查看全部
-
【切换状态】 首先把该取的元素都取出来 var loginState=document.getElementById("loginState"); var stateList=document.getElementById("loginstatePanel"); var lis=stateList.getElementByTagName("li"); var stateTxt=document.getElementById("login2qq_state_txt"); var loginStateShow=document.getElementById("loginStateShow"); 接下来绑定事件 loginState.onclick=function(){ stateList.style.display="block"; } 鼠标滑过、离开和点击状态列表时 for(var i=0; i<lis.length; i++){ lis[i].onmouseover=function(){ this.style.background="#567"; } lis[i].onmouseout=function(){ this.style.background="#FFF"; }查看全部
-
事件处理的跨浏览器解决办法查看全部
-
【关闭按钮】 var oClose=document.getElementById("ui_boxyClose"); oClose.onclick=function(){ document.getElementById("loginPanel").style.display="none"; }查看全部
-
总结： 1、所有的鼠标跟随和拖拽都与光标的坐标密不可分。拖动就是让光标在哪儿，盒子的left和top在哪儿。 2、细节：光标在哪儿按下，拖动完成之后还在哪儿。需要求光标和盒子之间的距离，是在按下的时候求的，而不是在移动时候求的。查看全部
-
【3】//释放鼠标 mouseup当用户释放鼠标按钮时触发 document.onmouseup=function(){ document.onmousemove=null;（DOM0级事件） document.onmouseup=null; }查看全部
-
【bug】弹框可以任意拖动，甚至超出屏幕范围。解决方法：找到边界，然后要是超出了边界，就设置为边界。左边：边界是0，右边：可以拖动的最大范围=屏幕的宽-弹框的宽（高同理） winW=document.documentElement.clientWidth || document.body.clientWidth; winH=document.documentElement.clientHeight || document.body.clientHeight; maxW=winW-oDrag.offsetWidth; maxH=winH-oDrag.offsetHeight; if(l<0){ l=0; }else if(l>maxW){ l=maxW; } if(t<0){ t=0; }else if(t>maxH){ t=maxH; } oDrag.style.left=l+"px"; oDrag.style.top=t+"px"; 最后还做了一些微调。 maxW=winW-oDrag.offsetWidth-10; t=10;查看全部
-
【分析并解决bug】原因：对一个盒子做定位的时候，是以左上角为参照点的。前面那种写法相当于告诉浏览器，光标在哪里，弹框的top和left就在哪儿。解决方法：先计算出光标在标题栏中按下的时候，光标与弹框左上角的距离，比如clientX（光标与浏览器左边框的距离）-offsetLeft（弹框与浏览器左边框的距离）。 function fnDown(event){ event=event window.event; var oDragdocument.getElementById("loginPanel"), //光标按下时光标和面板之间的距离 disX=event.clientX-oDrag.offsetLeft, disY=event.clientY-oDrag.offsetRight; //移动 document.onmousemove=function(event){ 光标移动过程中也需要获取光标位置 event=event window.event; fnMove(event,disX,disY); } } function fnMove(e,posX,posY) var oDragdocument.getElementById("loginPanel"); var l=e.clientX-posX,t=e.clientY-posY; oDrag.style.left=l+"px"; oDrag.style.top=t+"px";查看全部
-
【2】fuction fnDown(){ mousemove当鼠标指针在元素内部移动时重复地触发 document.onmousemove=function(event){ event=event || windown.event;（考虑IE和非IE） 任何能够跟着鼠标移动的东西，都要有一个绝对定位position:absolute; 【bug】var oDrag=document.getElementById("loginPanel"); oDrag.style.left=event.clientX+"px"; oDrag.style.top=event.clientY+"px"; 这里有一个很明显的bug，每次移动完之后鼠标都会停在弹框的左上角。 } }查看全部
-
页面加载window.onload=drag();接下来封装drag函数： 三步：在标题区域按下->要在页面中移动->释放鼠标时停止移动 【1】var oTitle=getByClass("login_logo_webqq,"loginPanel")[0]; 取得标题区域，接下来为标题区域添加onmousedown事件（在用户按下任何鼠标按钮时触发） oTitle.onmousedown=fnDown; 接下来写fnDown函数，首先需要知道光标在哪里。使用clientX和clientY属性。鼠标事件都是在浏览器窗口中的特定位置上发生的。这个位置信息保存在事件的clientX和clientY属性中。所有的浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平和垂直坐标。不包括页面滚动的距离。查看全部
-
封装一个用class来取元素的方法： 虽然有一个方法叫做document.getElementByClassName()，但是IE10以前额浏览器都不支持。 function getByClass(必填类名，父元素可选默认为document){ var oParent=parent?document.getElementById(parent):document; 如果用户传递了父元素进来，不要传父元素这个对象，而是传递父元素的id，如果没传就用document var eles=[]; 取得的结果是一个数组 var element=oParent.getElementsByTagName("*"); 取得父元素下的所有元素，挨个遍历，判断是否跟传过来的类一样，如果相同，加入到eles中。 最后再返回eles }查看全部
-
不同的事件类型 鼠标事件：click事件，mouseover事件，mouseout事件 键盘事件查看全部
举报
0/150
提交
取消