10/10/2018, 10:07

[Help] Di chuyển tấm hình trên tag DIV như thế nào?

Mình có một trang HTML gồm 4 tag DIV :Banner,Center,Right và Bottom.
Mình có Source Ở đây

Trong tag DIV Center có 1 tấm hình,nó rất lớn.Giờ mình muốn xem tấm hình đó không bằng thanh cuộn(Scroll),mà bằng cách kéo thả tấm hình,nhưng nó vẫn nằm dưới tag DIV Center tứ là hiện hình theo giới hạn của tag DIV Center.Bố cục trang như hình bên dưới



Mình phải cần gì và kỹ thuật xử lý như thế nào ,mong các bạn chia sẽ...
Cảm ơn các bạn đã quan tâm...!
thuyduongcd viết 12:20 ngày 10/10/2018
Code:
<div id="center" style="overflow:scroll"><img src="...." /></div>
nokida viết 12:08 ngày 10/10/2018
1.
Code:
<div id="center" style="overflow:hidden"><img src="...." style="cursor: pointer;"/></div>
2. Sử dụng javascript để tạo hiệu ứng drag (etc: http://script.aculo.us/)
Truongcnt45dh viết 12:22 ngày 10/10/2018
Tạo thumb cho ảnh theo kích thước mong muốn ^_^.
ndp1007 viết 12:21 ngày 10/10/2018
Được gửi bởi nokida
1.<div id="center" style="overflow:hidden"><img src="...." style="cursor: pointer;"/></div>
Mình muốn cái Cursor đó là một file .cur thì phải làm thế nào.

Được gửi bởi Truongcnt45dh
Tạo thumb cho ảnh theo kích thước mong muốn ^_^.
---> Mình cho cố tình thể hiện đúng kích thước thật luôn mà...

Cảm ơn các bạn đã chia sẽ
violetzs viết 12:11 ngày 10/10/2018
dùng thư viện JS của tui nè $T(this).drag();
viết 12:18 ngày 10/10/2018
Được gửi bởi ndp1007
Mình có một trang HTML gồm 4 tag DIV :Banner,Center,Right và Bottom.
Mình có Source Ở đây

Trong tag DIV Center có 1 tấm hình,nó rất lớn.Giờ mình muốn xem tấm hình đó không bằng thanh cuộn(Scroll),mà bằng cách kéo thả tấm hình,nhưng nó vẫn nằm dưới tag DIV Center tứ là hiện hình theo giới hạn của tag DIV Center.Bố cục trang như hình bên dưới

Mình phải cần gì và kỹ thuật xử lý như thế nào ,mong các bạn chia sẽ...
Cảm ơn các bạn đã quan tâm...!
Trong tag div Center chứa 1 tag div , tag div đó chứa tấm hình khổng lồ,và nó phải nằm bên dưới tất cả các tag div mà bạn đề cập ở trên qua chỉ số Z-index trong CSS.
Khi di chuyển là bạn di chuyển tag DIV chứa hình đó,và dĩ nhiên bạn sẽ thấy được phần tấm hình chỉ trong phạm vi của tag DIV Center.
Còn các hàm,và kỹ thuật đều trong Scripttatolus hay JQUERY.
Cái yêu cầu mà bạn cần đó là phần DROP và DRAG trong 2 thư viện trên.
Thân!
Truongcnt45dh viết 12:12 ngày 10/10/2018
@thuyduongcd: Mình vẫn chưa hình dung cụ thể ra ý bạn thế nào,nếu bạn muốn xem full ảnh thì fix width bằng của thẻ Div, để height tự do và cho thẻ img khi nó to quá kích thước của thẻ Div <- làm thế này ảnh ko còn như kích thước thật của nó khi đó chất lượng ảnh là ko mong muốn. Cách khác là mở rộng chiều rộng của thẻ Div(not recommended). Thẻ Div của bạn độ rộng như hình là cố định như thế là bạn ko muốn thay đổi width của Div + hơn nữa là cái ảnh kích thước là ko xác định trước ko muốn có scroll thì e rằng ko khả thi @@. Kiểu gì cũng phải thu nhỏ width của image nếu nó to hơn: ép width or tạo thumb
hoainguyenduc viết 12:14 ngày 10/10/2018
http://jquery.com! vô đây thì mọi vấn đề có thể sẽ dc giải quyết hết! he he!
thuyduongcd viết 12:10 ngày 10/10/2018
Được gửi bởi Truongcnt45dh
@thuyduongcd: Mình vẫn chưa hình dung cụ thể ra ý bạn thế nào,nếu bạn muốn xem full ảnh thì fix width bằng của thẻ Div, để height tự do và cho thẻ img khi nó to quá kích thước của thẻ Div <- làm thế này ảnh ko còn như kích thước thật của nó khi đó chất lượng ảnh là ko mong muốn. Cách khác là mở rộng chiều rộng của thẻ Div(not recommended). Thẻ Div của bạn độ rộng như hình là cố định như thế là bạn ko muốn thay đổi width của Div + hơn nữa là cái ảnh kích thước là ko xác định trước ko muốn có scroll thì e rằng ko khả thi @@. Kiểu gì cũng phải thu nhỏ width của image nếu nó to hơn: ép width or tạo thumb
sorry! hiểu nhầm ý
Bài liên quan
0