使用鼠标拖拽div,实现横向滚动

效果

  
<html>  
    <head>  
        <meta charset="utf-8" />  
        <title>title>  
        <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8">script> 
    head>  

    <body>  

        <div id="pic" style="width:10000px;height:300px;font-size:100px;">
getY和getX同样道理,这两个差值就是鼠标相对于对象的定位,因为拖拽后鼠标和拖拽对象的相对位置是不变的
        div>
        <script type="text/javascript">  
            var drag=function(obj){
        

                obj.bind("mousedown",start);  

                function start(event){
        
                    if(event.button==0){
     //判断是否点击鼠标左键  
                        gapX=event.clientX;
                        startx = $(window).scrollLeft();  // scroll的初始位置

                        //movemove事件必须绑定到$(document)上,鼠标移动是在整个屏幕上的  
                        $(document).bind("mousemove",move);  
                        //此处的$(document)可以改为obj  
                        $(document).bind("mouseup",stop);                           
                    }  
                    return false;//阻止默认事件或冒泡  
                }  
                function move(event){
        
                    var left = event.clientX-gapX; // 鼠标移动的相对距离

                    $(window).scrollLeft(startx - left );

                    return false;//阻止默认事件或冒泡  
                }  
                function stop(){
        
                    //解绑定,这一步很必要,前面有解释  
                    $(document).unbind("mousemove",move);  
                    $(document).unbind("mouseup",stop);  
                }  
            }  
            obj=$("#pic");  
            drag(obj);//传入的必须是jQuery对象,否则不能调用jQuery的自定义函数  
        script>  
    body>  
html> 

你可能感兴趣的:(html)