jQuery實現鼠標拖動圖片功能

本文轉載自查看原文 2021-03-04 09:24 386

本例利用jQuery實現一個鼠標托動圖片的功能。

首先設一個wrapper，wrapper內的坐標即圖片移動的坐標

  #wrapper{
            width: 1000px;
            height:1000px;
            position:relative;

設置圖片div，這個div即要拖動的div

        #div1{
            position: absolute;
            left:0px;
            top:0px;
            width: 300px;
            height: 200px;
            background: url("d:/Pictures/Earth.jpg");
            background-size:contain;
        }

上面設置了wrapper的定位為relative，div1的定位為absolute。

接下來設計拖動的算法：

思路如下：

1.鼠標點下時讓div跟隨鼠標移動

2.鼠標松開時停止跟隨

首先需要一個函數，他會將該div的坐標改變為當前鼠標的位置：

首先需要定義幾個變量，保存當前鼠標的坐標以及圖片的坐標

　　　　　　　　var timer;
            var mouseX=0;
            var mouseY=0;
            var pic_width = parseInt($("#div1").css("width")); 
            var pic_height = parseInt($("#div1").css("height"));

那么現在就需要為wrapper添加一個事件監聽器，鼠標在wrapper中移動時，修改變量mousex，mousey的值

$("#wrapper").mousemove(function(e){
                mouseX = e.clientX;
                mouseY = e.clientY;
            });

編寫follow函數，並用計時器調用它

         $("#div1").mousedown(function(){
                timer=setInterval(follow,10);
            });
            $("#div1").mouseup(function(){
                clearInterval(timer);
            });
            var follow = function(){

                $("#div1").css("left",mouseX-pic_width/2);
                $("#div1").css("top",mouseY-pic_height/2);
            };

完整代碼如下所示：

<!doctype html>
<html>
    <head>
        <script type = "text/javascript" src = "jquery.js"></script>
        <style type = "text/css">
        #wrapper{
            width: 1000px;
            height:1000px;
            position: relative;
            background: linear-gradient(lightblue,white);
            font-size: 40px;
        }
        #div1{
            position: absolute;
            left:0px;
            top:0px;
            width: 300px;
            height: 200px;
            background: url("d:/Pictures/Earth.jpg");
            background-size:contain;
        }
        </style>
    </head>
    <body>
        <div id = "wrapper">
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit numquam accusamus explicabo praesentium laudantium et accusantium, ab ipsum, excepturi necessitatibus quos iste ad qui deleniti sed debitis reiciendis quam nisi.
            <div id = "div1">

            </div>
        </div>
        
        
        <script>
            
            var timer;
            var mouseX=0;
            var mouseY=0;
            var pic_width = parseInt($("#div1").css("width")); 
            var pic_height = parseInt($("#div1").css("height")); 

            
            $("#wrapper").mousemove(function(e){
                mouseX = e.clientX;
                mouseY = e.clientY;
            });

            $("#div1").mousedown(function(){
                timer=setInterval(follow,10);
            });
            $("#div1").mouseup(function(){
                clearInterval(timer);
            });
            var follow = function(){

                $("#div1").css("left",mouseX-pic_width/2);
                $("#div1").css("top",mouseY-pic_height/2);
            };
        </script>
    </body>
</html>

最終效果：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery實現鼠標拖動改變Div高度 Unity UGUI實現鼠標拖動圖片 jQuery UI實現div的拖動、縮放功能基於jquery實現圖片拖動和曲線拖放 C#實現圖片鼠標拖動和滾動縮放 20.QT-Qpixmap實現圖片鼠標縮放,鼠標拖動示例(詳解) jQuery實現鼠標移入切換圖片 jQuery實現鼠標經過圖片變亮效果 Qt實現鼠標拖動窗口 jquery實現鼠標移入圖片,顯示大圖並跟隨鼠標移動