Tất cả bài viết | Lập trình Jquery
Hướng dẫn sử dụng jQuery End Page Box để tạo quảng cáo góc phải trang web
Hướng dẫn sử dụng jQuery End Page Box để tạo quảng cáo góc phải trang web
Phần định nghĩa HTML cho trang web
Cách sử dụng jQuery End Page Box để tạo quảng cáo góc phải trang web
Là một Jquery cho phép chúng ta đặt quảng cáo ở góc trang web khi cuộn thanh trượt xuống phía dưới.
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
Hãy tạo nhiều đoạn bằng thẻ p...
Phần định nghĩa HTML cho nội dung cần quảng cáo
Phần định nghĩa Jquery để gọi nội dung quảng cáo
Phần định nghĩa CSS cho nội dung của trang & box chứa quảng cáo
.wrapper { width:auto; margin-left:auto; margin-right:auto; } h1 { margin-top: 10px; color: #6D461D; margin-bottom: 5px; font-size: 24px; text-align:center; } h2 { color: #444; font-weight: bold; margin: 0px; font-size: 14px; margin-bottom: 10px; text-align:center; } .endpage-box { width:400px; height:210px; background: white; } .page_container { box-shadow: 0 3px 5px rgba(0,0,0,0.55); background: white; max-width: 960px; margin-left:auto; margin-right:auto; padding: 10px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; text-align: left; color: black; } .page_container p { color: black; font-size: 14px; font-family:Arial; text-align:left; font-weight:normal; }
Phần định nghĩa hiệu ứng CSS3 cho box chứa quảng cáo
.endpage-box { display: none; position: fixed; bottom: 0px; right: 10px; background:#F00E12; width: 400px; padding: 0px; box-shadow: 0 2px 3px rgba(0,0,0,0.5); -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.5); } [class*="animation-"] { -webkit-animation-duration: 500ms; -moz-animation-duration: 500ms; -o-animation-duration: 500ms; animation-duration: 500ms; } .animation-flyInRight { -webkit-animation-name: flyInRight; -moz-animation-name: flyInRight; -o-animation-name: flyInRight; animation-name: flyInRight; } .animation-flyOutRight { -webkit-animation-name: flyOutRight; -moz-animation-name: flyOutRight; -o-animation-name: flyOutRight; animation-name: flyOutRight; } .animation-flyInLeft { -webkit-animation-name: flyInLeft; -moz-animation-name: flyInLeft; -o-animation-name: flyInLeft; animation-name: flyInLeft; } .animation-flyOutLeft { -webkit-animation-name: flyOutLeft; -moz-animation-name: flyOutLeft; -o-animation-name: flyOutLeft; animation-name: flyOutLeft; } .animation-flyInUp { -webkit-animation-name: flyInUp; -moz-animation-name: flyInUp; -o-animation-name: flyInUp; animation-name: flyInUp; } .animation-flyOutUp { -webkit-animation-name: flyOutUp; -moz-animation-name: flyOutUp; -o-animation-name: flyOutUp; animation-name: flyOutUp; } .animation-flyInDown { -webkit-animation-name: flyInDown; -moz-animation-name: flyInDown; -o-animation-name: flyInDown; animation-name: flyInDown; } .animation-flyOutDown { -webkit-animation-name: flyOutDown; -moz-animation-name: flyOutDown; -o-animation-name: flyOutDown; animation-name: flyOutDown; } @-webkit-keyframes flyInRight { 0% { opacity: 0; -webkit-transform: translateX(3000px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes flyInRight { 0% { opacity: 0; -moz-transform: translateX(3000px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes flyInRight { 0% { opacity: 0; -o-transform: translateX(3000px); } 100% { -o-transform: translateX(0); } } @keyframes flyInRight { 0% { opacity: 0; transform: translateX(3000px); } 100% { transform: translateX(0); } } @-webkit-keyframes flyOutRight { 0% { -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(3000px); } } @-moz-keyframes flyOutRight { 0% { -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(3000px); } } @-o-keyframes flyOutRight { 0% { -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(3000px); } } @keyframes flyOutRight { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(3000px); } } @-webkit-keyframes flyInLeft { 0% { opacity: 0; -webkit-transform: translateX(-3000px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes flyInLeft { 0% { opacity: 0; -moz-transform: translateX(-3000px); } 100% { -moz-transform: translateX(0); } } @-o-keyframes flyInLeft { 0% { opacity: 0; -o-transform: translateX(-3000px); } 100% { -o-transform: translateX(0); } } @keyframes flyInLeft { 0% { opacity: 0; transform: translateX(-3000px); } 100% { transform: translateX(0); } } @-webkit-keyframes flyOutLeft { 0% { -webkit-transform: translateX(0); } 100% { opacity: 0; -webkit-transform: translateX(-3000px); } } @-moz-keyframes flyOutLeft { 0% { -moz-transform: translateX(0); } 100% { opacity: 0; -moz-transform: translateX(-3000px); }} @-o-keyframes flyOutLeft { 0% { -o-transform: translateX(0); } 100% { opacity: 0; -o-transform: translateX(-3000px); }} @keyframes flyOutLeft { 0% { transform: translateX(0); } 100% { opacity: 0; transform: translateX(-3000px); }} @-webkit-keyframes flyInUp { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 100% { -webkit-transform: translateY(0); }} @-moz-keyframes flyInUp { 0% { opacity: 0; -moz-transform: translateY(-2000px); } 100% { -moz-transform: translateY(0); }} @-o-keyframes flyInUp { 0% { opacity: 0; -o-transform: translateY(-2000px); } 100% { -o-transform: translateY(0); }} @keyframes flyInUp { 0% { opacity: 0; transform: translateY(-2000px); } 100% { transform: translateY(0); }} @-webkit-keyframes flyOutUp { 0% { -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(-2000px); }} @-moz-keyframes flyOutUp { 0% { -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(-2000px); }} @-o-keyframes flyOutUp { 0% { -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(-2000px); }} @keyframes flyOutUp { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(-2000px); }} @-webkit-keyframes flyInDown { 0% { opacity: 0; -webkit-transform: translateY(2000px); } 100% { -webkit-transform: translateY(0); }} @-moz-keyframes flyInDown { 0% { opacity: 0; -moz-transform: translateY(2000px); } 100% { -moz-transform: translateY(0); }} @-o-keyframes flyInDown { 0% { opacity: 0; -o-transform: translateY(2000px); } 100% { -o-transform: translateY(0); }} @keyframes flyInDown { 0% { opacity: 0; transform: translateY(2000px); } 100% { transform: translateY(0); }} @-webkit-keyframes flyOutDown { 0% { -webkit-transform: translateY(0); } 100% { opacity: 0; -webkit-transform: translateY(2000px); }} @-moz-keyframes flyOutDown { 0% { -moz-transform: translateY(0); } 100% { opacity: 0; -moz-transform: translateY(2000px); }} @-o-keyframes flyOutDown { 0% { -o-transform: translateY(0); } 100% { opacity: 0; -o-transform: translateY(2000px); }} @keyframes flyOutDown { 0% { transform: translateY(0); } 100% { opacity: 0; transform: translateY(2000px); }}
Lập trình Jquery Xem (4015) Học thiết kế web giá rẻ