Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

Javascript chia tỷ lệ hình ảnh theo chiều dọc và chiều ngang và thay đổi vị trí hình ảnh

In lại Tác giả: Vũ trụ không gian Thời gian cập nhật: 2023-11-04 06:15:38 26 4
mua khóa gpt4 Nike

Tôi muốn chuyển đổi hình ảnh theo chiều dọc, chiều ngang và chia tỷ lệ hình ảnh bằng javascript. Hiện tại tôi đã cố gắng làm cho hình ảnh đã được thay đổi kích thước hoạt động nhưng nó có vẻ không ổn. Tôi đang cố gắng sử dụng một cái gì đó như Chuyển đổi hình ảnh Điều gì đó. Khi bạn điều chỉnh thanh di chuyển dọc, hình ảnh sẽ di chuyển lên xuống và khi bạn điều chỉnh thanh di chuyển ngang, hình ảnh sẽ di chuyển theo chiều ngang. Hiện tại hàm testresize() đang thay đổi kích thước hình ảnh nhưng nó không giống như tôi muốn. Tôi muốn áp dụng các thuộc tính biến đổi CSS có chứa các biến đổi dịchX(), dịchY() và thang đo() cho từng hình ảnh. Thanh trượt phạm vi 


                    

                        Chọn hình ảnh để hiển thị
                        
                        
                     
                



 
            
            
        


                    

                        Điều chỉnh hình ảnh

                        
                        


                        
                        


                        
                        

                    

                

var gettestimage=document.getElementsByClassName("hình ảnh");
//thay đổi kích thước hình ảnh
hàm testresize(val){

    for(var i=0;i<>

        var chek1 = document.getElementById("image1");
        var chek2 = document.getElementById("image2");
      
        if(chek1.checked){
            gettestimage[0].style.width=5*(val / 1)+'px';
            console.log(val)

        }else if(chek2.checked){
            gettestimage[1].style.width=5*(val / 1)+'px';

        }

câu trả lời hay nhất

Nếu bạn muốn thiết lập biến đổi thuộc tính css thì tại sao chúng ta phải đặt nó width Và chiều cao để chia tỷ lệ hình ảnh? Giải pháp thực sự khá đơn giản, tôi chỉ cần sử dụng thay thế đồng điệu Thuộc tính thôi. Giải pháp này chỉ hoạt động với một hình ảnh nhưng tôi chắc chắn bạn có thể quản lý để áp dụng giải pháp này cho nhiều hình ảnh.

var image = document.getElementById("image1")

// Phép biến đổi (tỷ lệ, dịch chuyển, xoay) của hình ảnh
biến đổi var = {
  bản dịch: {
    x: 0,
    y: 0
  },
  quy mô: 1
};

hàm tỷ lệImage(val){
  biến đổi.scale = val;
  áp dụngStyle()
}

hàm dịchImage(trục, val){
  Transform.translation[axis] = val;
  áp dụngStyle()
}

hàm áp dụngStyle() {
  image.style.transform = `scale(${transform.scale}) dịch(${transform.translation.x}px, ${transform.translation.y}px)`
}

  

        

  

    Điều chỉnh hình ảnh

Về hình ảnh chia tỷ lệ Javascript theo chiều dọc và chiều ngang cũng như thay đổi vị trí hình ảnh, chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/55986331/

26 4 0
Bài viết khuyến nghị: c - danh sách liên kết, nhưng mỗi con trỏ "tiếp theo" trỏ đến con trỏ "tiếp theo" của nút tiếp theo
Bài viết khuyến nghị: Lỗi khi cài đặt libgreader
Bài viết khuyến nghị: PYTHON: đọc luân phiên các dòng từ 2 file và nối vào file thứ 3
Bài viết khuyến nghị: Có thể căn giữa nội dung của một cột dựa trên cột khác trong bố cục lưới không?
không gian vũ trụ
Hồ sơ

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á taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress