Code hình ảnh liếc mắt theo chuột với Javascript

Chia sẻ

---

1. HTML

 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
    <div class="container">
        <div class="img">
            <img src="https://imgur.com/eymjZ3y.png" alt="">
        </div>
        <div class="eyes">
            <div class="eye">
                <div class="inside"></div>
            </div>
            <div class="eye">
                <div class="inside"></div>
            </div>
        </div>
    </div>

2. CSS

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
img{
    max-width: 300px;
    vertical-align: middle;
}
.container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.eyes{
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%,-50%);
    background-color: transparent;
    text-align: center;
    width: 100%;
}
.eye{
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: white;
    margin: 20px;
    border-radius: 50%;
    border: 2px solid black;
    overflow: hidden;
}
.inside{
    position: absolute;
    width: 15px;
    height: 15px;
    background-color: black;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    border: 1px solid gray;
}

3. JAVASCRIPT

var insides=document.querySelectorAll('.inside');
document.addEventListener('mousemove',function() {
    var x=event.clientX *100/window.innerWidth+ '%';
    var y=event.clientY *100/window.innerHeight+ '%';
    insides[0].style.left=x;
    insides[0].style.top=y;
    insides[1].style.left=x;
    insides[1].style.top=y;
})

---