常用鼠标事件,键盘事件总结
来源:互联网 发布:网络搞笑名字大全 编辑:程序博客网 时间:2024/05/16 18:14
今天学习了学习了QQ登录面板的拖拽,关闭,切换登录状态。完全自己练习写了一遍。通过自己动手练习,对html,css,JavaScript又进一步的巩固与拓展。
制作静面图展示:
由于是初步的学习,发现,css中有很多属性,自己都没有用过:
在这次制作过程中遇到一些重要但是自己没有用过的属性,记录下:
-moz-:firefox浏览器特有属性;
-webkit-:chrome,safari浏览器特有的属性;
border-radius:使用圆角边框。参数按上左(top-left)、上右(top-right)、下右(bottom-right)、下左(bottom-left)的顺序作用于四个角。
一个参数:将用于全部的于四个角。
两个参数:第一个用于上左(top-left)、下右(bottom-right),第二个用于上右(top-right)、下左(bottom-left)。
三个参数:第一个用于上左(top-left),第二个用于上右(top-right)、下左(bottom-left),第三个用于下右(bottom-right)。
box-shadow:设置阴影。none:是指无阴影;正常5个参数;
使用方法:box-shadow:0 0 8px 8px #000;
接触了JavaScript中一些常用的鼠标事件:
onmousedown:用鼠标点击某个元素要触发的动作;
onmousemove:当鼠标指针在元素内部移动时,反复的触发某个动作;
onmouseup:当释放鼠标按键时要触发的动作;
onmouseover:鼠标指针划到某个元素上面要触发的动作;
onmouseout:鼠标指针离开某个元素是要触发的动作;
在制作qq面板时的一些重要知识点:
处理面板跟随鼠标时的知识:
1、当鼠标点击某个事件时,这个事件对象包含clientX和clientY这两个属性。代表了,该事件在窗口中的横纵坐标。
2、offsetXxxx属性:如offsetLeft,指的是获取此时的元素相对于它的父元素的左侧偏移量,即表示事件发生时鼠标指针在窗口中的水平和垂直坐标,不包括页面滚动的距离。
3、A.offsetWidth和A.offsetHeight属性:获取A元素的宽度和高度。
4、注意在适当时候阻止事件冒泡,否则,某页效果会被覆盖。我们无法看到。很重要。
在提及一下事件冒泡的阻止方法:对象.stopPropagation();和ie中方法:对象.cancelBubble=true;
JavaScript代码实现:
// JavaScript Document//getElementsByClassName();方法不是在任何浏览器中都好使的,我们封装一个方法来处理取得类名的封装方法;function getClassName(clsName,parent){var object=parent?document.getElementById(parent):document;els=[];elements=object.getElementsByTagName("*");for(var i=0;i<elements.length;i++){if(elements[i].className==clsName){els.push(elements[i]);}}return els;}window.onload=drag;function drag(){topp=getClassName('topPicture')[0];topp.onmousedown=move;//关闭closee=getClassName('CloseButton')[0];closee.onclick=function(){panel=getClassName('panel')[0];panel.style.display='none';}//下拉列表框LoginStatus=document.getElementById('LoginStatus');menu=document.getElementById('menu');list=menu.getElementsByTagName('li');picture=document.getElementById('picture');textt=document.getElementById('status');/*点击出现列表*/LoginStatus.onclick=function(e){e=e||window.e;if(e.stopPropagation){e.stopPropagation();}else if(e.cancelBubble){e.cancelBubble=true;}menu.style.display='block';}/*每次划过列表改变颜色,离开后恢复颜色,并且点击之后*/for(var i=0;i<list.length;i++){list[i].onmouseover=function(){this.style.background="#ccc";}list[i].onmouseout=function(){this.style.background="#f6f6f6";}list[i].onclick=function(e){e=e||window.e;e.stopPropagation()||e.cancelBubble==true;var id=this.id;menu.style.display="none";picture.className="";picture.className='statusPicture '+id;textt.innerHTML=getClassName('selectText',id )[0].innerHTML;}}document.onclick=function(){menu.style.display='none';}}function move(event){e=event||window.event;var panel=getClassName('panel')[0];var leftLocation=e.clientX-panel.offsetLeft;var topLocation=e.clientY-panel.offsetTop;document.onmousemove=function(e){ee=e||window.e;moveTo(ee,leftLocation,topLocation);}document.onmouseup=function(){document.onmousemove=null;document.onmouseup=null;}}function moveTo(ee,leftLocation,topLocation){var panel=getClassName('panel')[0]; var l=ee.clientX-leftLocation;var t=ee.clientY-topLocation;var WinW=document.documentElement.clientWidth||document.body.clientWidth;var WinH=document.documentElement.clientHeight||document.body.clientHeight;var maxW=WinW-panel.offsetWidth;var maxH=WinH-panel.offsetHeight;if(l<0)l=0;if(l>maxW)l=maxW;if(t<0)t=0;if(t>maxH){t=maxH;}panel.style.left=l+"px";panel.style.top=t+"px";}
qq面板图案设置css:
@charset "utf-8";/* CSS Document */.panel{width:320px;height:200px;position:absolute;background-color:#f6f6f6;top:180px;left:521px;border:solid 1px #ccc;-moz-box-shadow:0 0 8px #000;-webkit-box-shadow:0 0 8px #000;box-shadow:0 0 8px #000;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;}.CloseButton{position:absolute;right:-10px;z-index:1;width:28px;height:28px;background:url(../picture/close.png);margin-right:10px;}.topPicture{margin-left:70px;margin-top:10px;width:200px;height:44px;background:url(../picture/login_window_logo.png) no-repeat -210px 0;cursor:move;}.center{margin-left:50px;font: bold 15px arial;}.center .text{width:150px;line-height:18px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px; color: #868686; font-size: 16px;}.center .inputText{margin-top:20px;margin-bottom:20px;}.loginButton{width:111px;height:35px;margin-left:64px;background:url(../picture/login_btn.png) no-repeat -111px 0px;float:left;}.statusPicture{width:15px;height:15px;position:absolute;left:180px;bottom:12px;}.Triangle{width:10px;height:15px;background:url(../picture/ptlogin.png) no-repeat 0px -15px;position:absolute;left:200px;bottom:15px;}.statusText{position:absolute;left:215px;bottom:12px;}.menu{margin-left:10px;padding-left:27px;background-color:#f6f6f6;width:71px;height:112px;list-style:none;position:absolute;left:160px;bottom:-125px;-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;cursor:pointer;}.selectIcon{width:15px;height:15px;position:absolute;left:10px;float:left;}.Online{background:url(../picture/ptlogin.png);}.QME{background:url(../picture/ptlogin.png) no-repeat -72px 0;}.Leave{background:url(../picture/ptlogin.png) no-repeat -18px 0;}.Busy{background:url(../picture/ptlogin.png) no-repeat -36px 0;}.nono{background:url(../picture/ptlogin.png) no-repeat -107px 0;}.hidden{background:url(../picture/ptlogin.png) no-repeat -53px 0;}html代码实现:
<!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>qq面版</title><link href="../css/qq.css" rel="stylesheet" type="text/css" /><script src="../js/qq.js" type="text/javascript"></script></head><body><div class="panel"> <div class="CloseButton"></div> <div class="topPicture"></div> <div class="center" > <div class="inputText"> <span>账号:</span> <input class="text" value="QQ号码或Email账号" onmouseover="if(value =='QQ号码或Email帐号'){value =''}" onBlur="if(value ==''){value='QQ号码或Email帐号';}" tabindex="1"></input></div> <div class="inputText"><span>密码:</span><input class="text" tabindex="2"></input></div> </div> <div class="bottom"> <div class="loginButton"></div> <div class="LoginStatus" id="LoginStatus"> <div class="statusPicture Online" id="picture"></div> <div class="Triangle" id="triangle"></div> <div class="statusText" id='status'>在线</div> <ul id="menu" class="menu" style="display:none"> <li id="Online"> <div class="selectIcon Online"></div> <div class="selectText">我在线上</div> </li> <li id="QME"> <div class="selectIcon QME"></div> <div class="selectText">Q我吧</div> </li> <li id="Leave"> <div class="selectIcon Leave"></div> <div class="selectText">离开</div> </li> <li id="Busy"> <div class="selectIcon Busy"></div> <div class="selectText">忙碌</div> </li> <li id="nono"> <div class="selectIcon nono"></div> <div class="selectText">请勿打扰</div> </li> <li id="hidden"> <div class="selectIcon hidden"></div> <div class="selectText">隐身</div> </li> </ul> </div> <div> </div> </div></div></body></html>
对于键盘事件练习了抽奖系统:
onkeydown:当用户按下键盘上任意键触发,而如果按住不放的话,会反复的触发此事件。
onkeypress:当用户按下键盘上的字符键触发,而如果按下不放的话,会反复的触发此事件。
onkeyup:当用户释放键盘上的按键时触发。
注意:
1、如何判断用户按了那个按键?
event对象提供了keyCode属性,当用户按哪个按键,可以获得该对象的对应的键码值,从而进行判断。
当要判断是第几次按这个键子时,可以用一个全局变量自己进行控制。
2、注意使用setIntervel();和clearInterval();方法。
当点击某个键子,进行指定周期的跳转,为了不返回的触及定制器,每次进入时,先对定时器进行一下清除。
- 常用鼠标事件,键盘事件总结
- 常用JS键盘鼠标事件
- 键盘和鼠标事件总结
- Qt事件总结(鼠标、键盘)
- Qt事件总结(鼠标、键盘)
- js鼠标键盘事件总结
- javascript中常用鼠标事件和键盘事件
- Qt 鼠标事件,键盘事件
- 键盘事件和鼠标事件
- 鼠标事件及键盘事件
- 键盘鼠标事件
- 模拟鼠标键盘事件
- 键盘和鼠标事件
- 鼠标键盘事件
- 鼠标键盘事件模拟
- Python鼠标键盘事件
- js鼠标、键盘事件
- 模拟鼠标、键盘事件
- ZCMU—1126
- oracle 自带方法 的 用法
- springmvc配置responsebody返回json格式数据
- 数据结构学期期末总结—力量源自真实,那就坚持吧
- RecyclerView 的简单封装
- 常用鼠标事件,键盘事件总结
- ArrayList源码分析
- 程序相关的概念
- 如何做出相关系数矩阵可视化图
- 嵌入式linux开发环境搭建(三)
- 练习
- tomcat启动后,输入localhost:8080报错404
- 第十六周项目一验证算法(4)堆排序
- c++12.11开始