咸猪手测试

正文索引 [隐藏]

我开始了搞黄色啦~便便我要对我的live2d看板娘蕾姆伸出邪恶之手——咸猪手口水

我们知道在div中添加cursor: grab;属性可以使鼠标在移入该div后变成一个五指手,可是这不够骚啊傻笑这不生动形象 那就新建一个.html文件来写一个咸猪手进行测试长草再把它应用到博客网站上面吧~

查看演示页面 可以直接点击链接进入网页然后对图片进行测试或者ctrl+u查看源代码

咸猪手测试:

咸猪手应用:

HTML代码:

<div class="box">
    <img src="https://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();
    });
}