cursor属性之grab/grabbing值测试实例页面

回到相关文章 »

代码：

CSS代码：
.box {
    height: 520px;
    overflow: hidden;
}
.grab {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}
.grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}
HTML代码：
<div class="box">
    <img src="//ww1.sinaimg.cn/bmiddle/6f016cdfgw1enanqjvhijj20hi30swwu.jpg" class="grab">
</div>
JS代码：
if (window.addEventListener) {
    var box = document.querySelector(".box"), grab = document.querySelector(".box img");
    
    var store = { move: false };
    
    grab.addEventListener("mousedown", function (event) {
        this.className = "grabbing";
        store.move = true;
        store.startY = event.pageY + box.scrollTop;
        event.preventDefault();
    });
    
    document.addEventListener("mousemove", function(event) {
        store.y = event.pageY;
        if (store.move == true) box.scrollTop =  store.startY - store.y;
        event.preventDefault();
    });
    
    document.addEventListener("mouseup", function(event) {
        grab.className = "grab";
        store.move = false;        
        event.preventDefault();
    });
}

效果：