Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi banbaonylong, 20/4/14.

Lượt xem: 9,717

  1. banbaonylong Ko phải assmin

    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:

    [​IMG]

    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 :D.

    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 {
                
    clearboth;
                
    displayblock;
            }
            
    strong {
                
    colorred;
                
    text-decorationunderline;
            }
            .
    container {     
                
    marginauto;
            }
            .
    con-1, .con-{
                
    background-imagelinear-gradient(#FFFFFF, #2F2F2F 90%, #1F1F1F);
                
    border2px solid;
                
    height400px;
                
    positionrelative;
                
    width95%;
            } 
            .
    result {
                
    margin-top15px;
                
    text-aligncenter;
            }
            .
    items {
                
    displayblock;
                
    height50px;
                
    positionabsolute;
                
    width50px;
            }
            .
    item-{
                
    background-colorred;
                
    left75px;
                
    top20px;
            }
            .
    item-{
                
    background-colorblue;
                
    left685px;
                
    top120px;     
            }
            .
    item-{
                
    background-colorgreen;
                
    left355px;
                
    top240px;     
            }
            .
    item-{
                
    background-coloryellow;
                
    left815px;
                
    top340px;
            }
    Bước 4: Bây giờ là phần code js xử lí

    [​IMG]

    • 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.
    • 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 :D.

    Bước 5: Kết quả

    [​IMG]

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

    ...
    Chỉnh sửa lần cuối: 20/4/14
  2. crawfish

    crawfish Thành viên cấp 1

    lấy tọa độ của chuột có thể dùng cách sau:

    var posx = 0;
    var posy = 0;
    if (!e) var e = window.event;
    if (e.pageX || e.pageY) {
    posx = e.pageX;
    posy = e.pageY;
    } else if (e.clientX || e.clientY) {
    posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    Hà Duy Phương thích bài viết này
  3. giayvun

    giayvun Thành viên cấp 1

    Làm nhiều lớp với vận tốc khác nhau, hình như gọi là "Parallax Design". :)
    Thường dùng là tạo hiệu ứng với vị trí chuột, và hiệu ứng khi cuộn trang (Parallax Scrolling)

Ủng hộ diễn đàn