Đăng nhập

Ghi nhớ
Latest topics
» Tôi sẽ đỗ đại học!
by pro_qng 11/6/2017, 11:18 pm

» Xin hỗ trợ về DNS Domain cho Forumvi
by hoangthong 9/5/2017, 9:37 pm

» skin xinh forum full punbb
by kenbi05 8/5/2017, 10:47 am

» HỖ TRỢ GIÚP MÌNH VỀ VIỆC MẤT CHỨC NĂNG KIỂM TRA THÀNH VIÊN XEM BÀI TRONG GROUP FB
by hoangthong 4/5/2017, 9:14 am

» Xin chỉ giúp cách fix hình nền header cho forumvi
by Phuongtran 25/4/2017, 4:43 pm

» [Mod] Shop Gunny (New Version)
by accit 14/4/2017, 10:30 am

» Giới thiệu 3 mẫu smartphone nổi bật cho bạn quan tâm
by huydv 21/3/2017, 11:14 pm

» [Thông báo] Đổi tên miền diễn đàn[✔]
by vietkanpy 9/3/2017, 8:28 am

» Skin]Teen Pro9x [ PunBB ]
by phamtuananh9x 15/2/2017, 12:57 pm

» [Help] Nhờ mọi người " RIP " giúp mình[✔]
by sayedn73 7/2/2017, 10:31 pm

» CHÚC MỪNG NĂM MỚI
by Exterminator 7/2/2017, 12:16 pm

» Cần giúp đỡ về Ads Banner trong forum
by sayedn73 7/2/2017, 12:42 am

» Xin index box forumvi [✔]
by sayedn73 5/2/2017, 6:50 am

» LỖI ADD TRANG CHỦ
by tommy_phan 17/1/2017, 11:04 am

» Bác nào rảnh tham gia cho vui nhé
by phamthohoa 27/12/2016, 10:06 am

» Xin forum rao vặt vBulletin 4.1.11
by tonyhoaivu 18/12/2016, 12:35 am

» Cần xin skin ngamvn.com
by sayedn73 14/12/2016, 2:24 am

» Cách đổi nền Forum
by sayedn73 27/10/2016, 1:28 am

» Skin CNTT-K3 2015 (Full Mod)[✔]
by sayedn73 27/10/2016, 1:14 am

» Share skin Gameprivatevn.ace.st
by help me 23/10/2016, 4:32 pm

» Share Skin Xanh Dương Cùi Bắp
by Thànhkent 21/10/2016, 1:37 pm

» [Thắc mắc] RIP Giúp Em Topics_Blog_Box
by sayedn73 21/10/2016, 8:03 am

» Làm sao để làm Shop Pet
by aquariuss 20/10/2016, 2:21 pm

» các thím trên chinhphuc thử tìm từ khóa này xem
by bucnong1 17/10/2016, 1:35 pm

» Cách tăng lượng view ảo xem topic ?
by Tin VIP 4/10/2016, 9:34 am

Top posting users this week


Tạo 1 nút đóng/ mở hình ảnh[✔]

Xem chủ đề cũ hơn Xem chủ đề mới hơn Go down

Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Trúc Sơn on 13/2/2015, 9:21 pm

mình đang cần 1 code hoặc js có thể đóng/ mở 1 hình ảnh.

Như hình trên:
Màu đen là thanh nav
Màu xanh là hình ảnh cần đóng/ mở
Màu đỏ là nút đóng/mở. nút này là 1 hình ảnh (nút "Mở" 1 hình và nút "Đóng" 1 hình)
Nếu có thể làm cho nó trượt lên xuống nhẹ nhàng lúc đóng/mở cho đỡ thô luôn Yêu

Mong mn giúp mình với ạ Rose Rose
avatar
Trúc Sơn
CPMember
CPMember

Chrome Invision
Ngày đăng ký : 21/06/2014
Số bài : 134
CPP : -1
Châm ngôn sống : Không có

Xem lý lịch thành viên http://www.forumgiaitri.net

Về Đầu Trang Go down

Re: Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Draudrey on 14/2/2015, 7:24 am

Đơn giản nhất là dùng js, tự làm cái button rồi cho vào:
Code:
<a href="javascript:void(0)" class="ahdwads">hide img</a><a href="javascript:void(0)" class="hdwads" style="display:none;">show img</a>

Code:
<script type="text/javascript">
  $(function() {
     $(".ahdwads").live("click", function() {
     $(".classimgneedtohide").css('margin-top',-1000);
     $(".ahdwads").css("display" ,"none");
     $(".hdwads").fadeToggle('fast');
});
});
$(function() {
     $(".hdwads").live("click", function() {
     $(".classimgneedtohide").css('margin-top',0);
     $(".hdwads").css("display" ,"none");
     $(".ahdwads").fadeToggle('fast');
});
});
</script>

Muốn có hiệu ứng trượt thì dùng CSS:
Code:
.classimgneedtohide {
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
z-index:1
}
/* dùng z-index để img không lấn qua thanh nav mà nằm bên dưới */
.yournavbar {
z-index:1000
}

demo: http://draudrey.f-orum.com/h2-dm1 Rose
avatar
Draudrey
CPModerator
CPModerator

Chrome Invision
Ngày đăng ký : 10/08/2012
Số bài : 902
CPP : 601
Châm ngôn sống : Nhìn lại mình trên CP mới thấy mình hồi đó sao trẻ trâu vcđ ra, đan con mạch nó muốn tự sát v l

Xem lý lịch thành viên http://diendan.chinhphuc.info/

Về Đầu Trang Go down

Re: Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Trúc Sơn on 14/2/2015, 10:51 am

@Draudrey ơi dùng punBB thì được nhưng Invision ko hoạt động
avatar
Trúc Sơn
CPMember
CPMember

Chrome Invision
Ngày đăng ký : 21/06/2014
Số bài : 134
CPP : -1
Châm ngôn sống : Không có

Xem lý lịch thành viên http://www.forumgiaitri.net

Về Đầu Trang Go down

Re: Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Draudrey on 14/2/2015, 1:20 pm

http://gamexper.forumotion.net/h4-dm1 chịu
avatar
Draudrey
CPModerator
CPModerator

Chrome Invision
Ngày đăng ký : 10/08/2012
Số bài : 902
CPP : 601
Châm ngôn sống : Nhìn lại mình trên CP mới thấy mình hồi đó sao trẻ trâu vcđ ra, đan con mạch nó muốn tự sát v l

Xem lý lịch thành viên http://diendan.chinhphuc.info/

Về Đầu Trang Go down

Re: Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Trúc Sơn on 14/2/2015, 1:38 pm

http://www.forumgiaitri.net/h34-page Buồn
avatar
Trúc Sơn
CPMember
CPMember

Chrome Invision
Ngày đăng ký : 21/06/2014
Số bài : 134
CPP : -1
Châm ngôn sống : Không có

Xem lý lịch thành viên http://www.forumgiaitri.net

Về Đầu Trang Go down

Re: Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Draudrey on 14/2/2015, 6:40 pm

Hình như jquery 1.7.2, 1.8.2 mới sài được dạng .live thì phải. chịu Thím thay js:
Code:
$(function() {
    $('.ahdwads').click(function(){
    $(".classimgneedtohide").css('margin-top',-1000);
    $(".ahdwads").css("display" ,"none");
    $(".hdwads").fadeToggle('fast');
});
});
$(function() {
    $('.hdwads').click(function(){
    $(".classimgneedtohide").css('margin-top',0);
    $(".hdwads").css("display" ,"none");
    $(".ahdwads").fadeToggle('fast');
});
});
avatar
Draudrey
CPModerator
CPModerator

Chrome Invision
Ngày đăng ký : 10/08/2012
Số bài : 902
CPP : 601
Châm ngôn sống : Nhìn lại mình trên CP mới thấy mình hồi đó sao trẻ trâu vcđ ra, đan con mạch nó muốn tự sát v l

Xem lý lịch thành viên http://diendan.chinhphuc.info/

Về Đầu Trang Go down

Re: Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Trúc Sơn on 14/2/2015, 6:51 pm

Được ùi, Thanks bạn @Draudrey very nhiều Cười nhe răng
Nhưng sao 2 cái của bạn đều mượt mà cái mình nó giựt giựt á, bạn xem lại giúp mình đi
avatar
Trúc Sơn
CPMember
CPMember

Chrome Invision
Ngày đăng ký : 21/06/2014
Số bài : 134
CPP : -1
Châm ngôn sống : Không có

Xem lý lịch thành viên http://www.forumgiaitri.net

Về Đầu Trang Go down

Re: Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Draudrey on 14/2/2015, 7:03 pm

@Trúc Sơn đã viết:Được ùi, Thanks bạn @Draudrey very nhiều Cười nhe răng
Nhưng sao 2 cái của bạn đều mượt mà cái mình nó giựt giựt á, bạn xem lại giúp mình đi
Trong quá trình margin top lên thì nó kéo theo cái footer ở dưới lên 1 ít nên nó cà dựt, Cười nghiêng ng cộng thêm sự tham gia của overflow y nữa. Cười nghiêng ng
Cái đó trong html page thì bị chắc vào forum thì không đâu. Cười nghiêng ng Cười nghiêng ng Cười nghiêng ng
avatar
Draudrey
CPModerator
CPModerator

Chrome Invision
Ngày đăng ký : 10/08/2012
Số bài : 902
CPP : 601
Châm ngôn sống : Nhìn lại mình trên CP mới thấy mình hồi đó sao trẻ trâu vcđ ra, đan con mạch nó muốn tự sát v l

Xem lý lịch thành viên http://diendan.chinhphuc.info/

Về Đầu Trang Go down

Re: Tạo 1 nút đóng/ mở hình ảnh[✔]

Bài gửi by Sponsored content


Sponsored content


Về Đầu Trang Go down

Xem chủ đề cũ hơn Xem chủ đề mới hơn Về Đầu Trang


 
Permissions in this forum:
Bạn không có quyền trả lời bài viết