前端 - web端鼠标左右拖拽，滑动图片

问题描述

问 题

这个网页http://eicodesign.com/ 顶部的鼠标点击左右拖拽，可以滑动是怎么实现的？

解决方案

大概事件思路：onmousedown、onmousemove 、onmouseup

---

相关资料：

纯 JS 实现：http://fgm.cc/learn/lesson8/01.html （参考它滑动滚动条图片滑动，只是它有个小延迟效果）

jQuery 插件：http://kenwheeler.github.io/slick/

---

补充：

不用判断左右，判断当前位置即可，参考 http://fgm.cc/learn/lesson8/01.html 代码 77~100 行。
他是在鼠标松开时做了图片移动，你需要在鼠标滑动时做图片移动。

var x1, x2;

picObj.onmousedown = function (event) {

    // ① 这里获取点击鼠标时当前的位置
    x1 = xxx;
    
    document.onmousemove = function (event) {
        // ② 这里获取鼠标滑动时的当前位置
        x2 = xxx;
        
        // ③ 这里的 tmpX 大于 0 就是向右滑，小于 0 就是向左滑，但这个无需考虑
        var tmpX = x2 - x1;
        
        // ④ 这里结合 x1, x2 和图片的 width 做些计算，得到当前位置
        tmpX = xxxxxx;
        
        // ⑤ 将最后得到的位置传入图片开始移动方法，开始移动图片
        startMove(tmpX);
    };        
    
    document.onmouseup = function() {
        // ⑥ 鼠标松开时停止图片移动
        stopMove();
    };

    return false;

};

这篇关于前端 - web端鼠标左右拖拽，滑动图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！