zoukankan      html  css  js  c++  java
  • Jquery 实现鼠标事件(鼠标越过放大图片)

    编写代码

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="jqueryjquery.js"></script>
        <style>
            #newImg {
                position: absolute;
            }
        </style>
    </head>
    
    <body>
        <img src="imgs/1_small.jpg" alt="">
        <img src="imgs/2_small.jpg" alt="">
        <img src="imgs/3_small.jpg" alt="">
        <script>
            $(function() {
                $("img").css({
                    "width": "128px",
                    "heigth": "96px"
                })
                $("img").on({
                    mouseenter: function() {
                        //获取索引
                        var index = $(this).index() + 1;
                        // alert("1")
                        //追加标签
                        $("body").append($("<div id='newImg'><img src='imgs/" + index + ".jpg' /></div>"))
                            //设置图片位置
                        $("#newImg").css({
                            "top": event.pageY + 10 + "px",
                            "left": event.pageX + 10 + "px"
                        })
    
                    },
                    mouseleave: function() {
                        $("#newImg").remove()
                    },
                    mousemove: function() {
                        /*  $("#newImg").css({
                              "top":event.pageY+10+"px",
                              "left":event.pageX+10+"px"
                          })
                          */
                    }
                })
            })
        </script>
    </body>
    
    </html>
    

    运行结果

  • 相关阅读:
    文本数据清洗总结
    PyTorch
    PyTorch
    NLP
    TF
    TF
    TF
    cairosvg
    word2vec 实现 影评情感分析
    Gensim
  • 原文地址:https://www.cnblogs.com/d534/p/15193080.html
Copyright © 2011-2022 走看看