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

							 
 
    

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.