麦芽雪冷萃

我开始了搞黄色啦~我要对我的live2d看板娘蕾姆伸出邪恶之手——咸猪手
我们知道在div中添加cursor: grab;属性可以使鼠标在移入该div后变成一个五指手，可是这不够骚啊这不生动形象 那就新建一个.html文件来写一个咸猪手进行测试再把它应用到博客网站上面吧~
查看演示页面 可以直接点击链接进入网页然后对图片进行测试或者ctrl+u查看源代码

咸猪手测试：

咸猪手应用：

HTML代码：

<div class="box">
    <img src="tanyaodan.com/img/re01.jpg" width="520px" height="520px" class="grab">
</div>

CSS代码：

.box {
    height: 520px;
    overflow: hidden;
}
.grab {
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
}
.grabbing {
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

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();
    });
}