浏览器默认行为自定义右键菜单栏放大镜效果

最新推荐文章于 2024-11-10 15:10:09 发布

又菜又不想学的小张

最新推荐文章于 2024-11-10 15:10:09 发布

阅读量602

点赞数

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_45108358/article/details/121234166

版权

浏览器默认行为

1. 阻止默认行为

1.1 return

可以通过return false来阻止默认行为

1.2 e.preventDefault();

推荐使用

2. 案例

2.1 仿百度查询功能

实现功能：查询之前，判断是否输入了内容，如果内容为空，则不查询。

注意1:https://www.baidu.com/s"

注意2:name="wd"

<form action="https://www.baidu.com/s" method="get" id="myform">
    查询：<input type="text" name="wd">
    <input type="submit" value="查询">
</form>

js部分

var myform = document.getElementById('myform');
//表单的提交事件  是在提交操作完成之前触发。
myform.onsubmit = function(e){
    //获取输入的内容
    var wd = document.querySelector("input[name='wd']").value;
    //判断输入的内容是否为空
    if (wd.length==0) {
        alert("请输入查询关键字")
        //阻止提交
        //return false;
        e.preventDefault();
    }

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <form action="https://www.baidu.com/s" method="get" id="myform">
    查询：<input type="text" name="wd">
    <input type="submit" value="查询">
  </form>
  <script>
    var myform = document.getElementById('myform');
    //表单的提交事件  是在提交操作完成之前触发。
    myform.onsubmit = function(e){
      //获取输入的内容
      var wd = document.querySelector("input[name='wd']").value;
      //判断输入的内容是否为空
      if (wd.length==0) {
        alert("请输入查询关键字")
        //阻止提交
        return false;
        // e.preventDefault();
      }

    }
  </script>
</body>
</html>

2.2 自定义右键菜单功能

2.1 准备工作

<div id="menu">
    <ul>
      <li>投币</li>
      <li>白嫖</li>
      <li>举报</li>
      <li>点赞</li>
      <li>下次一定</li>
    </ul>
  </div>

步骤一

获取菜单元素节点

//获取菜单元素节点
var menu = document.getElementById('menu');

步骤二

绑定右键事件，绑定给document。

 document.oncontextmenu = function (e) {}

步骤三

事件中，让菜单显示，阻止默认行为。

menu.style.display = "block";

步骤四

点击左键隐藏

 document.onclick = function () {
      menu.style.display = "none";
    }

整体代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义右键菜单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        #menu {
            position: absolute;
            width: 200px;
            height: 200px;
            border: 1px solid orange;
            display: none;
        }
        
        ul {
            display: flex;
            height: 200px;
            flex-direction: column;
            justify-content: space-evenly;
            border: 1px solid #ccc;
        }
        
        li {
            height: 40px;
            line-height: 40px;
            list-style: none;
            padding-left: 30px;
        }
        
        li:hover {
            background-color: orange;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="menu">
        <ul>
            <li>嘻嘻</li>
            <li>嘻嘻</li>
            <li>嘻嘻</li>
            <li>嘻嘻</li>
            <li>嘻嘻</li>
        </ul>
    </div>
</body>
<script>
    var menu = document.getElementById("menu");
    // 点击右键显示
    document.oncontextmenu = function(e) {
            menu.style.display = 'block';
            // 阻止默认行为
            // return false
            // 推荐使用
            e.preventDefault();
            menu.style.left = e.pageX + 'px';
            menu.style.top = e.pageY + 'px';
        }
        // 点击左键隐藏
    document.onclick = function() {
        menu.style.display = 'none'
    }
</script>

</html>

放大镜效果

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>放大镜效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .wrap {
            display: flex;
            width: 1226px;
            margin: 100px auto;
        }
        
        #small {
            position: relative;
            width: 350px;
            height: 449px;
        }
        
        #mark {
            position: absolute;
            top: 0;
            left: 0;
            width: 220px;
            height: 220px;
            background-color: yellow;
            opacity: .5;
            cursor: move;
            display: none;
        }
        
        #big {
            /* 大盒子的宽高计算公式 */
            /*  遮罩层的大小与大图所在的div成等比关系。 */
            /* 小图片的宽/遮罩层的宽 = 大图片的宽/大盒子的宽 */
            width: 503px;
            height: 503px;
            overflow: hidden;
            position: relative;
            margin-left: 10px;
            display: none;
        }
        
        #big-img {
            left: 0;
            top: 0;
            position: absolute;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div id="small">
            <!-- 遮罩层 -->
            <img src="img/small.jpg" alt="">
            <div id="mark"></div>
        </div>
        <div id="big">
            <img src="img/big.jpg" alt="" id="big-img">
        </div>
    </div>

</body>
<script>
    var small = document.getElementById('small');
    var mark = document.getElementById('mark');
    var bigBox = document.getElementById('big');
    var bigImg = document.getElementById("big-img");
    console.log(bigImg);

    small.onmousemove = function(e) {
        // 遮罩层的偏移量
        var m_left = e.pageX - mark.offsetWidth / 2 - small.offsetLeft;
        var m_top = e.pageY - mark.offsetHeight / 2 - small.offsetTop;
        // 边界值
        var max_left = small.offsetWidth - mark.offsetWidth;
        var max_top = small.offsetHeight - mark.offsetHeight;
        // 判断遮罩层是否出了边界
        if (m_left < 0) {
            m_left = 0;
        } else if (m_left > max_left) {
            m_left = max_left;
        }
        if (m_top < 0) {
            m_top = 0;
        } else if (m_top > max_top) {
            m_top = max_top;
        }
        // 给遮罩层赋值
        mark.style.left = m_left + 'px';
        mark.style.top = m_top + 'px';

        // 大盒子图片移动比例
        var rate = bigImg.offsetWidth / small.offsetWidth;
        // 大盒子图片移动距离
        bigImg.style.left = -m_left * rate + 'px';
        bigImg.style.top = -m_top * rate + 'px';


    }
//鼠标移入时触发的事件
    small.onmouseover = function() {
        mark.style.display = 'block';
        bigBox.style.display = 'block';
    }
//鼠标移出时触发的事件
    small.onmouseout = function() {
        mark.style.display = 'none';
        bigBox.style.display = 'none';
    }
</script>

</html>