Trung tâm cá nhân
sách gpt4 ai đã đi

JS triển khai hiệu ứng kéo hộp mờ

In lại Tác giả:qq735679552 Thời gian cập nhật: 2022-09-29 22:32:09 29 4
mua khóa gpt4 Nike

CFSDN nhấn mạnh vào việc tạo ra giá trị thông qua mã nguồn mở. Chúng tôi cam kết xây dựng một nền tảng chia sẻ tài nguyên để mọi người làm CNTT có thể tìm thấy thế giới tuyệt vời của riêng mình tại đây.

Bài đăng trên blog CFSDN này JS triển khai hiệu ứng đặc biệt của hộp mờ kéo được tác giả thu thập và sắp xếp. Nếu bạn quan tâm đến bài viết này, hãy nhớ thích nó.

Bài viết này chia sẻ với bạn đoạn code JS cụ thể để thực hiện hiệu ứng đặc biệt của hộp mờ kéo để bạn tham khảo. Nội dung cụ thể như sau.

nhu cầu:

Kéo nút trên hình ảnh, mặt nạ hình ảnh sẽ từ từ che phủ hình ảnh. Khi mép mặt nạ chạm vào văn bản ở góc dưới bên trái và bên phải, văn bản sẽ bị ẩn.

công nghệ:

Người nghe, chuột điều phối việc thu thập.

Hình ảnh hiệu ứng.

JS triển khai hiệu ứng kéo hộp mờ

Chia sẻ mã nguồn:

HTML .

  1. Thanh trượt so sánh hình ảnh
  2. <điều hướng="">
  3. nguồn="img/img-original.jpg" thay thế="">
  4. <> nhận dạng="hình ảnh">
  5. <> nhận dạng="trái dưới">Đã sửa đổi
  6. <> nhận dạng="btn">
  7. lớp học="iconfont biểu tượng-zuojiantou">
  8. lớp học="iconfont biểu tượng-youjiantou">
  • <> nhận dạng="phải dưới cùng">Nguyên bản

    • Kiểu CSS.

    2. * {
    3. lề: 0;
    4. đệm lót: 0;
    5. màu sắc: #E8F6F5;
    6. }
    7. thân hình {
    8. lý lịch-màu sắc: #566B89;
    9. đệm lót-đứng đầu: 1px;
    10. }
    11. dẫn đường {
    12. chiều rộng: 1200px;
    13. chiều cao: 675px;
    14. tràn ngập-x: ẩn giấu;
    15. chức vụ: liên quan đến;
    16. lề: 100px tự động 0;
    17. }
    18. h1 {
    19. chữ-căn chỉnh: trung tâm;
    20. lề-đứng đầu: 100px;
    21. phông chữ-cân nặng: 400;
    22. }
    23. dẫn đường>hình ảnh {
    24. chức vụ: tuyệt đối;
    25. }
    26. #hình ảnh {
    27. chiều rộng: 600px; /*Trạng thái ban đầu hiển thị một nửa mặt nạ*/
    28. chiều cao: 675px;
    29. lý lịch: địa chỉ("img/img-modified.jpg"); /*Kích thước container ở đây phù hợp với hình ảnh. Nếu bạn muốn thay đổi kích thước, hãy đặt thuộc tính kích thước nền background-size: image width image height;*/
    30. chức vụ: liên quan đến;
    31. hoạt hình: bắt đầu 1 giây xoa dịu-TRONG-ngoài;
    32. }
    33. #img hình ảnh {
    34. chiều rộng: 100%;
    35. chiều cao: 100%;
    36. }
    37. @khung hình chính bắt đầu {
    38. 0% {
    39. chiều rộng: 0;
    40. }
    41. 50% {
    42. chiều rộng: 650px;
    43. }
    44. 100% {
    45. chiều rộng: 600px;
    46. }
    47. }
    48. #nút {
    49. chức vụ: tuyệt đối;
    50. Phải: -25px;
    51. đứng đầu: tính toán(50% - 25px);
    52. chiều rộng: 56px;
    53. chiều cao: 56px;
    54. đường kẻ-chiều cao: 56px;
    55. ranh giới: không có;
    56. phác thảo: không có;
    57. ranh giới-bán kính: 50%;
    58. lý lịch-màu sắc: hồng;
    59. phông chữ-kích cỡ: 0;
    60. chữ-căn chỉnh: trung tâm;
    61. màu sắc: trắng;
    62. con trỏ: con trỏ;
    63. }
    64. .Phông chữ biểu tượng {
    65. phông chữ-kích cỡ: 20px;
    66. }
    67.  
    68. h3 {
    69. phông chữ-cân nặng: 400;
    70. màu sắc: trắng;
    71. }
    72. #tráidưới,#phảidưới {
    73. chức vụ: tuyệt đối;
    74. chiều rộng: 100px;
    75. đáy: 50px;
    76. }
    77. #tráidưới cùng {
    78. bên trái: 50px;
    79. }
    80. #phảidưới cùng {
    81. Phải: 50px;
    82. }

    Phần JS.

    2. hãy để hình ảnh = tài liệu.Bộ chọn truy vấn("#hình ảnh");
    3. để btn = tài liệu.Bộ chọn truy vấn("#btn");
    4. hãy để nav = tài liệu.Bộ chọn truy vấn("điều hướng");
    5. để tráiBottom = tài liệu.Bộ chọn truy vấn("#tráidưới");
    6. để bên phảiBottom = tài liệu.Bộ chọn truy vấn("#rightBottom");
    7. nút.trênchuột xuống = Chức năng (và) {
    8. cho phép khách hàngx = và.khách hàngX; // Nhấp để lấy tọa độ X ban đầu của chuột
    9. dẫn đường.onmousemove = Chức năng () {
    10. hãy để e = những lập luận[0] || cửa sổ.sự kiện;
    11. hãy để X = và.khách hàngX; // Lấy tọa độ X của chuột khi di chuyển
    12. hãy để imgW = phân tích cú pháp(lấyKiểuTínhToán(hình ảnh,vô giá trị).chiều rộng);
    13. hình ảnh.phong cách.chiều rộng = `${ hình ảnh + X - khách hàngx}điểm ảnh`; // Chiều rộng ảnh = Tọa độ X khi di chuyển - tọa độ ban đầu khi nhấp chuột, tức là chiều rộng ảnh + độ lệch của tọa độ X của chuột
    14. khách hàngx = X ; // Gán tọa độ X mới nhất cho tọa độ nhấp chuột ban đầu, tức là cập nhật giá trị tọa độ X ban đầu
    15. nếu như (hình ảnh < 150){
    16. tráiDưới.phong cách.trưng bày = "không có";
    17. }khác {
    18. tráiDưới.phong cách.trưng bày = "khối";
    19. }
    20. nếu như (hình ảnh > 1050){
    21. phảiDưới.phong cách.trưng bày = "không có";
    22. }khác {
    23. phảiDưới.phong cách.trưng bày = "khối";
    24. }
    25. }
    26. };
    27. tài liệu.trênchuộtlên = Chức năng () {
    28. dẫn đường.onmousemove = vô giá trị;
    29. }

    Trên đây là toàn bộ nội dung bài viết này, hy vọng sẽ giúp ích cho việc học tập của mọi người, và mong các bạn ủng hộ chúng tôi.

    Liên kết gốc: https://blog.csdn.net/hthththtt/article/details/108181361.

    Cuối cùng, bài viết này về JS triển khai hiệu ứng đặc biệt drag blur box đã có ở đây. Nếu bạn muốn biết thêm về JS triển khai hiệu ứng đặc biệt drag blur box, vui lòng tìm kiếm các bài viết CFSDN hoặc tiếp tục duyệt các bài viết liên quan. Tôi hy vọng bạn sẽ ủng hộ blog của tôi trong tương lai! .

    29 4 0
    Bài viết được đề xuất: Giới thiệu về các hàm chuyển đổi đối tượng toString() và valueOf() trong JavaScript
    Bài viết được đề xuất: Triển khai C++ của LeetCode (74. Tìm kiếm ma trận hai chiều)
    Bài viết được đề xuất: Giới thiệu về các quy tắc chuyển đổi đối tượng thành số hoặc chuỗi trong JavaScript
    Bài viết được đề xuất: Triển khai C++ của LeetCode (73. Ma trận zeroing)
    qq735679552
    Hồ sơ cá nhân

    Tôi là một lập trình viên xuất sắc, rất giỏi!

    Nhận phiếu giảm giá Didi Taxi miễn phí
    Mã giảm giá Didi Taxi
    Các bài viết nóng hổi trên toàn bộ trang web
    Giấy chứng nhận ICP Bắc Kinh số 000000
    Hợp tác quảng cáo: 1813099741@qq.com 6ren.com