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



Mẫu code hình ảnh liếc mắt theo chuột với Javascript

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



Mong bài viết giúp ích được các bạn phần nào trong thiết kế Web. Hãy nhấn nút để mọi người cùng học hỏi kiến thức mới nhé. Cảm ơn các bạn đã quan tâm Forum.