[JS] Div di chuyển theo sự thay đổi của chuột

Hi các bạn, hiệu ứng Div di chuyển theo sự thay đổi của chuột được sử dụng ở khá nhiều theo xu thế hiện nay, thường kết hợp với phong cách OnePage ví dụ như sau:

(Link ảnh nếu hết BW)​

Mình cũng đi tìm hiểu nhưng ko thấy ai làm thành dạng plugin nên mình tự code lại theo "sự hiểu" của bản thân .

Bước 1: nhét thư viện jquery vào code của bạn

Code:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Bước 2: Phần html đơn giản chỉ là div to bao ngoài và 4 div con bên trong

PHP:

    <div class="container con-1">
        <div class="items item-1"></div>
        <div class="items item-2"></div>
        <div class="items item-3"></div>
        <div class="items item-4"></div>
    </div>
    <div class="result result-1"></div>

Bước 3: CSS make-up để bạn thấy rõ div theo màu sắc phân biệt

PHP:

        div {
            clear: both;
            display: block;
        }
        strong {
            color: red;
            text-decoration: underline;
        }
        .container {     
            margin: auto;
        }
        .con-1, .con-2 {
            background-image: linear-gradient(#FFFFFF, #2F2F2F 90%, #1F1F1F);
            border: 2px solid;
            height: 400px;
            position: relative;
            width: 95%;
        } 
        .result {
            margin-top: 15px;
            text-align: center;
        }
        .items {
            display: block;
            height: 50px;
            position: absolute;
            width: 50px;
        }
        .item-1 {
            background-color: red;
            left: 75px;
            top: 20px;
        }
        .item-2 {
            background-color: blue;
            left: 685px;
            top: 120px;     
        }
        .item-3 {
            background-color: green;
            left: 355px;
            top: 240px;     
        }
        .item-4 {
            background-color: yellow;
            left: 815px;
            top: 340px;
        }

Bước 4: Bây giờ là phần code js xử lí

• Mình sử dụng 1 hàm của jquery là mousemove để bắt sự kiện di chuyển chuột trong khung div trên, từ hàm đó bạn có thể lấy đc biến e, chứ toạ độ X và Y của chuột (clientX và clientY).
• Hàm _move(a,b) để tính toán việc di chuyển các div, bạn chỉ cần truyền div vào, và toạ độ left ban đầu của div đó!
• Hàm mình viết đang chạy ngược chiều chuột. Nếu bạn muốn chạy xuôi chiều hãy sửa dòng 73 trong ảnh chỗ b + thành b -.
• Nếu bạn thấy tốc độ di chuyển nhanh/chậm ko phù hợp, hãy sửa số 45 ở dòng 73 trong ảnh thành số nào bạn thích.
• Trong demo có thêm trường hợp di chuyển dọc, hàm na ná thế nên các bạn tự xem vậy .
• Dĩ nhiên là demo thì mình chỉ xài div tô màu đơn sắc, bạn nào muốn bóng bểy như hình đầu tiên của thớt thì tự làm vậy .

Bước 5: Kết quả

(Link ảnh nếu hết BW)​

Link demo: Here
(Cảm ơn Đoilơ ViệtDesigner đã tài trợ hosting )