这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文给大家分享基于 js 实现的右键菜单功能和拖拽功能的代码解析,非常不错,具有一定的参考借鉴价值,感兴趣的朋友一起看看吧
下面先给大家介绍下 js 实现的右键菜单功能,具体详情如下所示:
这一章解决的问题
1、实现右键菜单功能代码。
2、阻止默认事件的实际应用。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>右键菜单</title>
- <style type="text/CSS">
- #menu {
- position: fixed;
- left:0;
- top:0;
- width:200px;
- height: 400px;
- background-color: blue;
- display: none;
- }
- </style>
- </head>
- <body>
- <div id="menu">
- </div>
- <script type="text/javascript">
- var menu = document.getElementById("menu");
- document.oncontextmenu = function(e) {
- var e = e || window.event;
- //鼠标点的坐标
- var oX = e.clientX;
- var oY = e.clientY;
- //菜单出现后的位置
- menu.style.display = "block";
- menu.style.left = oX + "px";
- menu.style.top = oY + "px";
- //阻止浏览器默认事件
- return false;//一般点击右键会出现浏览器默认的右键菜单,写了这句代码就可以阻止该默认事件。
- }
- document.onclick = function(e) {
- var e = e || window.event;
- menu.style.display = "none"
- }
- menu.onclick = function(e) {
- var e = e || window.event;
- e.cancelBubble = true;
- }
- // document.addEventListener("contextmenu",function(e){
- // var e = e || window.event;
- // e.preventDefault();
- // alert("menu");
- // },false)
- </script>
- </body>
- </html>
好了,以上代码详情是 js 实现的右键菜单功能。下面接着给大家介绍下 js 拖曳功能的代码解析
这一章解决的问题
1、怎样在网页中实现拖曳功能。
2、document.documentElement 与 document.body 的区别。
document.documentElement.clientWidth 指整个 html 文档的宽度,document.body.clientWidth 的宽度。这两者是不一样的。可以在 console 控制台通过 console.log(document.documentElement) 和 console.log(document.body) 进行测试。
3、getBoundingClientRect().left 与 offsetLeft 的区别。
getBoundingClientRect() 用于获取元素的 left、top、right、bottom。offset 获取相对于父级的 left 和 top。getBoundingClientRect() 获取相对于窗口的 left、top、right、bottom。
4、e.clientX 指的是鼠标点相对于窗口的坐标。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>弹窗</title>
- <style type="text/css">
- #mask {
- position: fixed;
- left:0;
- top:0;
- width:100%;
- height: 100%;
- background-color: hsla(250,100%,50%,0.6);
- display: none;
- }
- #popBox {
- position: absolute;
- background-color: #fff;
- width:200px;
- height: 200px;
- /*left:50%;
- top:50%;*/
- /*margin-top: -100px;
- margin-left: -100px;*/
- }
- </style>
- </head>
- <body>
- <button id="clickBtn">点击</button>
- <div id="mask">
- <div id="popBox"></div>
- </div>
- <script type="text/javascript">
- var clickBtn = document.getElementById("clickBtn");
- var popBox = document.getElementById("popBox")
- var mask = document.getElementById("mask");
- clickBtn.onclick = function() {
- mask.style.display = "block";
- popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";
- popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";
- }
- popBox.onclick = function(e) {
- var e = e || window.event;//e指所有代码的集合,通过它可以获取事件的各种属性。
- e.cancelBubble = true;//阻止事件冒泡,即点击事件不会传递到mask这一层,意味着不会触发点击mask事件代码。
- }
- mask.onclick = function() {
- mask.style.display = "none";
- }
- //拖拽 mousedown->mousemove->mouseup
- popBox.onmousedown = function(e) {
- var e = e || window.event;
- var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
- var oX = e.clientX - pos.left;//clientX指相对于窗口的坐标。
- var oY = e.clientY - pos.top;
- document.onmousemove = function(e) {
- var e = e || window.event;
- var oLeft = e.clientX - oX;
- var oTop = e.clientY - oY;
- popBox.style.left = oLeft + "px";
- popBox.style.top = oTop + "px";
- if (oLeft<0) {
- popBox.style.left = 0 + "px";
- };
- if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {
- popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整个html文档的宽度,document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。
- }
- if (oTop<0) {
- popBox.style.top = 0 + "px";
- };
- if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {
- popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";
- }
- }
- popBox.onmouseup = function() {
- document.onmousemove = null;
- }
- }
- </script>
- </body>
- </html>
以上所述是小编给大家介绍的基于 JavaScript 实现右键菜单和拖拽功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0525/330127.html