* Lưu ý : Tại blog này bạn có thể sử dụng phím mũi tên trên bàn phím < > để chuyển bài viết mới hơn hoặc cũ hơn rất tiện lợi

Thứ Tư, 23 tháng 10, 2013

Button Lên Trên - Xuống dưới ẩn hiện

Với hiệu ứng trượt nhẹ nhàng

Button Lên Trên - Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng Bài viết này mình sẽ hướng dẫn bạn làm cách nào để thêm 2 button Lên trên và Xuống dưới ẩn hiện với hiệu ứng trượt nhẹ nhàng nhờ sử dụng Javascript.
Và các button mình không sử dụng hình ảnh như các thủ thuật trước mà thay vào đó các button sẽ được tạo từ CSS. Nếu bạn có hứng thú với tiện ích thú vị này hãy làm theo các bước hướng dẫn đơn giản bên dưới!




Thủ thuật đã thực hiện thành công bạn có thể xem trước tại đây
Blog này 

Thêm CSS

Bạn vào HTML Click chuột trái vào vị trí bất kì trong khung HTML sau đó nhấn tổ hộp phím (Ctrl+F) Sẽ hiện ra khung Search bên phía trên ,mé bên phía tay phải bạn Và dán ]]></b:skin> vô khung Search rồi nhấn Enter
Thêm đoạn code bên dưới vào trước thẻ

]]></b:skin>

#gotop{cursor:pointer;width:30px;height:30px;position:fixed !important;position:absolute;z-index:999;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:10px 0 0 0;-moz-border-radius:10px 0 0 0;border-radius:10px 0 0 0;overflow:hidden} #gotop:hover:after{border-bottom-color:white} #gotop:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:transparent transparent #C3D1D7 transparent;position:absolute;top:0;left:11px} #gobottom{cursor:pointer;width:30px;height:30px;position:fixed!important;position:absolute;top:26px;right:0;z-index:99;text-indent:-9999px;border:1px solid #144F69;background-color:#067BAF;background-image:-webkit-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-moz-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-ms-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:-o-radial-gradient(ellipse at center top,#2493C4,#086A95);background-image:radial-gradient(ellipse at center top,#2493C4,#086A95);-webkit-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-moz-box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;box-shadow:inset 0 0 0 1px #2493C4,0 1px 3px black;-webkit-border-radius:0 0 0 10px;-moz-border-radius:0 0 0 10px;border-radius:0 0 0 10px;overflow:hidden} #gobottom:hover:after{border-top-color:white} #gobottom:after{content:"";display:block;width:0;height:0;border-width:10px 4px;border-style:solid;border-color:#C3D1D7 transparent transparent transparent;position:absolute;top:10px;left:11px}

Javascript

Thêm code bên dưới vào trước thẻ đóng

</body>

<script type='text/javascript'>//<![CDATA[ $(window).scroll(function () { if ($(this).scrollTop() > 100) { $("#gotop").removeAttr("href"); $("#gotop").stop().animate({ bottom: "0", right: "0" }, { duration: 800, queue: false }) } else { $("#gotop").stop().animate({ bottom: "-50", right: "-50" }, { duration: 1000, queue: false }) } if ($(this).scrollTop() > 100) { $("#gobottom").removeAttr("href"); $("#gobottom").stop().animate({ top: "-50", right: "-50" }, { duration: 800, queue: false }) } else { $("#gobottom").stop().animate({ top: "0", right: "0" }, { duration: 1000, queue: false }) } }); $(function () { $("#gotop").click(function () { $("html, body").animate({ scrollTop: 0 }, "slow"); return false }) $("#gobottom").click(function () { $("html, body").animate({ scrollTop: $('#footer').offset().top }, 970); return false }) });//]]> </script> <a id="gotop" style="bottom: -50px; right: -50px;">Lên Trên!</a> <a id="gobottom" style="top: 0px; right: 0px;">Xuống Dưới!</a> <div id='footer'/>

Xong lưu lại ra ngoài blog thưởng thức thành quả .Bạn nào có khó khăn gì để lại lời bình mình sẽ giúp
Cái này quá hay không cài vào blog cũng phí
Chúc blog bạn ngày càng đẹp và phát triển! 
Cảm ơn bạn huy nhiều nhé !

Theo Trollvl.com

8 nhận xét

22:16 22 tháng 10, 2013 Reply

TEM cho entry rất hửu ích anh Hùng ạ! hihi

15:11 23 tháng 10, 2013 Reply

Hùng Nguyễn ơi, chỉ cho mình cách "mặc định" để ảnh post lên trang Blogspot luôn luôn rộng 550. Thân! Chúc bạn luôn khỏe!

18:51 24 tháng 10, 2013 Reply

Thank you http://4.bp.blogspot.com/_XwhCottp9-E/TTmkoSLCwpI/AAAAAAAAAFs/yA9mJ4RIeig/s1600/94.gif !https://lh6.googleusercontent.com/-O6m44_Z-8AA/T2WEjLRImnI/AAAAAAAACck/c_jh643HU6o/s36/31.gif

18:53 24 tháng 10, 2013 Reply

Đã thực hiện chưa và có thành công kg vậy ?https://lh6.googleusercontent.com/-hIVRIc7IAJw/T2WEaO5ASUI/AAAAAAAACaw/FLmCvzeMSbc/s36/15.gif

15:03 25 tháng 10, 2013 Reply

Sang thăm anh chúc anh luôn vui và hạnh phúc...cám ơn những ưu ái anh giành cho em..!

19:36 25 tháng 10, 2013 Reply

Mặc dù huynh đây vẫn thích cả lên "trên" và xuống "dưới", nhưng chẳng thể biết Button là gì!
Buổi tối cuối tuần chúc đệ luôn vui vẻ, bình an, may mắn, hạnh phúc!

21:02 31 tháng 10, 2013 Reply

http://img1.123tagged.com/en/flower/96.jpg
Tặng em nè ! https://lh6.googleusercontent.com/-Q5lMkgcmVR4/T2WEWkNi3MI/AAAAAAAACZ4/7VBYeVbx7kA/s36/01.gifhttps://lh3.googleusercontent.com/-Em3lvBgvYlI/T2WElbV0BaI/AAAAAAAACdI/ApynphQdka8/s36/7.gifhttps://lh5.googleusercontent.com/-9TYEg93ImUM/T2WEjvuhxTI/AAAAAAAACc0/KQRBXuuV_Yg/s36/32.gif

21:54 31 tháng 10, 2013 Reply

Button là cái cục màu xanh bên mé tay phải của blog đại ca đó ! Khi nào đại ca muốn thao tác lên trên cùng blog thì click chuột vô đó đỡ phải kéo chuột và khi nào thích xuống cuối blog thì cũng làm như vậy cái ni nó thụt thò mà https://lh4.googleusercontent.com/-0R7-2DC1klM/T2WEmMQajfI/AAAAAAAACdM/-4JFCeC6QD8/s36/8.gif
Còn chuyện lên trên và xuống dưới bây giờ mình cũng có tuổi rồi chân không còn cứng nữa nhưng đá thì vẫn cứng nên khả thi nhất là xuống dưới cho nó phẻ đại ca

Đăng nhận xét

Bạn có thể chèn hình ảnh. biểu tượng cảm xúc ,video từ Youtube , vào khung Comment không cần dùng thẻ .Chỉ cần Coppy link ảnh , biểu tượng mình thích và paste vào khung comment rồi đăng lên Lưu ý:Định dạng ảnh bạn có thể chèn vào comment['JPG','GIF','PNG','BMP']

Related Posts Plugin for WordPress, Blogger...

Load More Posts

Đã xảy ra lỗi trong tiện ích này
Lên Trên! Xuống Dưới!