Javascript lật hình ảnh khi nhấp chuột
|
Tìm kiếm nhanh trên Google sẽ chỉ cho bạn cách xoay hình ảnh trong HTML. Nhưng nếu bạn muốn xoay hình ảnh chỉ bằng một nút bấm đơn giản bằng javascript. Đây là một hướng dẫn nhanh về cách làm điều đó
Nhiều người không biết xoay ảnh trong JavaScript. Nó thực sự khá đơn giản. Với một vài dòng mã, bạn có thể xoay hình ảnh 90 độ Show
Để xoay hình ảnh, bạn cần sử dụng phương thức rotate(). Phương thức này lấy một góc làm tham số. Góc được đo bằng độ. Vì vậy, để xoay hình ảnh 90 độ, bạn sẽ chuyển vào giá trị 90 Bạn cũng có thể sử dụng các giá trị âm để xoay hình ảnh theo hướng ngược lại. Ví dụ: nếu bạn muốn xoay hình ảnh 180 độ, bạn sẽ chuyển vào giá trị -180 chúng ta sẽ tìm hiểu cách xoay hình ảnh 90 độ bằng hàm onclick JavaScript đơn giản Điều này có thể hữu ích để hiển thị các hình ảnh khác nhau tùy thuộc vào hướng của thiết bị hoặc để cung cấp giao diện trực quan hơn để người dùng lật giữa các hình ảnh Ví dụ: nếu bạn có hình ảnh sản phẩm có thể xoay để hiển thị các mặt khác nhau, bạn có thể sử dụng kỹ thuật này để cung cấp cho người dùng một số quyền kiểm soát đối với chế độ xem mà họ nhìn thấy Điều đầu tiên chúng ta cần làm là thêm trình xử lý sự kiện onclick vào hình ảnh của mình. Điều này sẽ kích hoạt mã xoay khi hình ảnh được nhấp vào Chúng ta cũng cần định nghĩa một hàm để thực hiện phép quay thực tế. Thuộc tính biến đổi CSS có thể được sử dụng để xoay các phần tử và chúng ta có thể sử dụng nó ở đây với giá trị xoay 90 độ Mục tiêu học tập
chuyển đổi css. quay()Biến đổi CSS là một thuộc tính cho phép bạn thay đổi vị trí, kích thước và hình dạng của một phần tử. Bạn cũng có thể sử dụng nó để xoay, chia tỷ lệ và nghiêng một phần tử Chức năng xoay cho phép bạn xoay một phần tử quanh một điểm nhất định. nếu bạn muốn xoay hình ảnh theo chiều kim đồng hồ 90 độ, bạn sẽ sử dụng đoạn mã sau. img { biến đổi. xoay (90 độ); . Ví dụ: nếu bạn muốn tạo một hình ảnh lớn gấp đôi, bạn sẽ sử dụng đoạn mã sau. img { biến đổi. tỷ lệ (2); Một cách khác để xoay hình ảnh trên trang web là sử dụng hoạt ảnh CSS. Để thực hiện việc này, trước tiên bạn cần tạo quy tắc @keyframes có tên mà bạn sẽ sử dụng sau này Trong quy tắc này, bạn sẽ chỉ định lượng vòng quay sẽ xảy ra tại các thời điểm cụ thể Hình ảnh có thể được xoay theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ Ví dụ: để xoay hình ảnh theo chiều kim đồng hồ 90 độ theo chiều kim đồng hồ, mã sẽ như sau Lấy phần tử hình ảnh bằng JavaScriptĐể có được phần tử hình ảnh bằng JavaScript, trước tiên người ta phải hiểu cách thức hoạt động của thẻ img trong HTML. Thẻ img dùng để nhúng hình ảnh vào trang web Thẻ hình ảnh có hai thuộc tính là src và alt. Thuộc tính src chỉ định URL của hình ảnh sẽ được hiển thị. Thuộc tính alt cung cấp văn bản thay thế cho hình ảnh, nếu hình ảnh không thể hiển thị Để lấy phần tử hình ảnh bằng JavaScript, người ta có thể sử dụng phương thức getElementById. Phương thức này trả về phần tử có thuộc tính id được chỉ định Ví dụ: nếu muốn lấy phần tử hình ảnh có id là "myImage", họ sẽ sử dụng đoạn mã sau Kết quả Thêm sự kiện nhấp JavaScript vào hình ảnhSự kiện nhấp chuột JavaScript trên hình ảnh Phần tử image trong HTML dùng để hiển thị hình ảnh trên trang web. Bạn có thể thêm sự kiện nhấp vào thành phần hình ảnh để thực thi chức năng khi hình ảnh được nhấp vào Để thêm sự kiện nhấp chuột vào hình ảnh, bạn cần sử dụng thuộc tính onclick. Thuộc tính onclick nhận một giá trị, là tên của hàm sẽ được thực thi khi nhấp vào hình ảnh Để gắn hàm vào một phần tử, bạn sử dụng thuộc tính onclick. Ví dụ onclick="onButtonClick()" Điều này sẽ khiến hàm onButtonClick() được thực thi khi phần tử được nhấp vào. Bạn cũng có thể xác định các hàm JavaScript nội tuyến bằng thuộc tính onclick Xoay hình ảnh theo chiều kim đồng hồ onclick JavaScriptXoay ảnh là một hiệu ứng ảnh phổ biến. Nó có thể được sử dụng để thêm sự quan tâm đến một trang web hoặc chỉ đơn giản là thay đổi hướng của hình ảnh. Có nhiều cách để xoay hình ảnh bằng javascript, nhưng một trong những cách dễ nhất là sử dụng hàm onclick Để xoay hình ảnh theo chiều kim đồng hồ bằng javascript, chúng ta sẽ cần sử dụng chức năng onclick. Hàm này sẽ nhận hai đối số. phần tử mà chúng ta muốn xoay và mức độ xoay Trong trường hợp của chúng tôi, chúng tôi sẽ muốn xoay hình ảnh 90 độ theo chiều kim đồng hồ. Đây là mã mà chúng ta sẽ cần Khi bạn nhấp vào một hình ảnh, đôi khi bạn muốn nó xoay. Xoay hình ảnh trên trang web có thể được thực hiện bằng JavaScript. Đây là cách để làm điều đó Trước tiên, bạn cần có phần tử hình ảnh trên trang HTML của mình như chúng tôi đã làm ở trên. Sau đó, bạn sẽ cần thiết lập chức năng xoay hình ảnh khi nhấp vào như ở bước trước Trong chức năng này, bạn sẽ sử dụng thuộc tính biến đổi CSS để xoay hình ảnh theo một số độ nhất định, Để làm được điều đó, trước tiên chúng ta cần truy cập thuộc tính biến đổi để bạn có thể cung cấp cho nó một số giá trị theo góc bạn cần theo yêu cầu của bạn, vì vậy trước tiên tôi sẽ xoay nó theo chiều kim đồng hồ Xoay hình ảnh ngược chiều kim đồng hồ khi nhấp vào JavaScriptĐể xoay hình ảnh 90 độ, chúng ta cần sử dụng sự kiện onclick. Sự kiện onclick sẽ cho phép chúng tôi thực thi một chức năng khi người dùng nhấp vào hình ảnh. Trong hàm này, chúng ta sẽ sử dụng phương thức rotate() của JavaScript Phương thức này nhận hai tham số. góc đầu tiên là góc mà chúng ta muốn xoay hình ảnh và góc thứ hai là giá trị Boolean tùy chọn chỉ định xem chúng ta có muốn xoay tại chỗ xung quanh tâm của nó hay không. Theo mặc định, giá trị này là sai Để xoay ảnh -90 độ, chúng ta cần thiết lập thông số angle là -90. Chúng ta cũng cần đặt giá trị Boolean tùy chọn thành true để hình ảnh xoay quanh điểm trung tâm của nó Sau khi thiết lập hai tham số này, chúng ta có thể gọi phương thức rotate() trên đối tượng hình ảnh của mình Phần kết luậnBài viết này đã chỉ cho bạn cách xoay hình ảnh theo chiều kim đồng hồ hoặc ngược chiều kim đồng hồ onclick bằng cách sử dụng nút javascript. Tóm lại, có thể xoay hình ảnh 90 độ bằng hàm JavaScript onclick. Để xoay hình ảnh bằng chức năng onclick Javascript, hãy đặt góc xoay, xác định chức năng xoay hình ảnh và lấy phần tử DOM hình ảnh để thay đổi giá trị của thuộc tính css "transform". Sau đó, tệp JavaScript phải được liên kết với tệp HTML. Cuối cùng, hình ảnh có thể được xoay bằng cách nhấp vào nó Bằng cách làm theo các bước được nêu trong bài viết này, bạn có thể dễ dàng thêm chức năng này vào các ứng dụng web của riêng mình Làm cách nào để lật hình ảnh khi nhấp vào trong JavaScript?$('. thẻ lật'). click(function() { $(this). toggleClass('hover');
Bạn có thể lật một hình ảnh trong CSS không?Lật ảnh bằng thuộc tính biến đổi CSS
. Để lật ảnh, chúng ta phải truyền giá trị âm cho các hàm này. Giá trị âm -1 cũng duy trì tỷ lệ khung hình ban đầu trong khi lật. The scaleX and scaleY functions can be used to flip the image horizontally or vertically, respectively. To flip the image, we must pass a negative value to these functions. A negative value -1 also preserves the original aspect ratio while flipping.
Làm thế nào để đảo ngược một hình ảnh?Với hình ảnh đang mở trong trình chỉnh sửa, hãy chuyển sang tab “Công cụ” ở thanh dưới cùng. Một loạt công cụ chỉnh sửa ảnh sẽ xuất hiện. Cái mà chúng tôi muốn là “Xoay. ” Bây giờ hãy nhấn vào biểu tượng lật ở thanh dưới cùng .
Làm cách nào để phản chiếu CSS văn bản?Làm theo các bước. . Create HTML file: Use element with class name “abc” (as your choice).. Create CSS file: Specify the Display and Margin properties of . Use the transform properties to set the flip you required ( like vertical text flip , Horizontal text flip, Upside down text flip , Mirroring of text ). |
