16.6.19 |
0
nhận xét
|
lượt xem
Bài viết này hướng dẫn tạo các nút liên hệ sẽ hiển thị khi kéo chuột đến một vị trí mong muốn. Ưu điểm của nó là các nút được tạo bởi SVG không phải là file hình ảnh nên các bạn có thể yên tâm về tốc độ tải trangBạn có thể kéo chuột xuống chạm phần Nhãn tại bài viết này để xem demo
Hiển thị các nút bằng HTML
Bạn có thể dán đoạn code bên dưới vào trước thẻ đóng </body>. Tất nhiên nếu không muốn hiển thị nút nào bạn xóa nút đó đi là được, và đừng quên thay các thông tin thành thông tin của bạn<div class='hdc'>
<div class='zalo icon-hdc'>
<a href="https://zalo.me/0905999333" rel="noppener nofollow" target="_blank" title="Zalo Chat">
<svg class='icon' viewBox="0 0 900.000000 900.000000">
<g transform="translate(0.000000,900.000000) scale(0.100000,-0.100000)" fill="#fff" stroke="none">
<path d="M1011 6034 c-86 -23 -140 -68 -181 -149 l-35 -70 0 -1265 0 -1265 32 -66 c34 -69 69 -101 148 -136 34 -15 77 -18 295 -21 l256 -3 12 -157 c7 -86 12 -178 12 -204 0 -37 4 -48 15 -48 21 0 209 127 281 190 78 69 183 133 269 165 134 51 175 54 615 49 223 -3 511 -2 641 3 233 9 236 9 295 38 93 47 142 127 160 266 l7 49 -35 0 c-19 0 -70 -10 -114 -21 -77 -21 -96 -22 -874 -23 -858 -1 -834 -2 -922 53 -67 43 -101 99 -106 175 -7 113 4 131 464 747 143 191 288 386 324 434 158 211 250 341 250 353 0 9 -84 12 -385 12 -351 0 -389 2 -434 19 -75 28 -117 66 -151 135 -64 130 -48 272 39 357 92 89 25 84 1045 87 l898 3 -7 36 c-18 96 -95 197 -183 240 l-57 28 -1260 2 c-1078 2 -1268 0 -1314 -13z" />
<path d="M6075 5891 c-77 -20 -121 -59 -157 -136 l-23 -50 0 -1065 0 -1065 29 -58 c35 -72 86 -111 164 -128 161 -33 280 37 311 182 7 34 11 389 11 1073 0 1119 2 1079 -59 1163 -16 23 -48 49 -74 61 -50 23 -155 36 -202 23z" />
<path d="M3745 5274 c-22 -31 -246 -331 -497 -668 -252 -336 -458 -617 -458 -623 0 -10 107 -13 510 -13 l510 0 0 680 c0 537 -3 680 -12 680 -7 0 -31 -26 -53 -56z" />
<path d="M4638 5180 c-195 -35 -376 -140 -474 -273 -142 -192 -213 -435 -201 -686 8 -156 34 -266 93 -391 128 -270 368 -461 613 -489 143 -16 267 7 403 75 l67 34 133 -25 c141 -26 268 -32 315 -14 15 5 40 22 56 37 55 52 57 75 63 702 4 346 2 611 -4 667 -11 108 -48 195 -108 261 -39 41 -42 42 -104 42 -35 0 -112 -11 -170 -25 l-107 -26 -79 35 c-43 19 -117 44 -163 56 -94 24 -259 34 -333 20z m317 -528 c163 -83 254 -328 200 -536 -22 -83 -43 -124 -88 -169 -60 -60 -127 -87 -219 -87 -220 0 -348 151 -348 412 0 190 96 346 245 395 56 18 161 11 210 -15z" />
<path d="M7295 5184 c-301 -45 -510 -194 -640 -459 -148 -302 -136 -720 30 -1000 112 -189 262 -311 472 -381 112 -38 289 -44 427 -15 185 38 367 149 492 299 65 78 155 256 178 352 92 382 -19 781 -278 1002 -107 92 -220 148 -366 183 -66 15 -260 27 -315 19z m254 -540 c137 -40 231 -208 231 -409 0 -171 -63 -295 -181 -360 -44 -23 -69 -30 -137 -33 -139 -7 -220 29 -286 130 -45 68 -67 151 -68 263 -1 102 14 189 45 255 31 65 102 132 162 152 64 21 167 22 234 2z" />
</g>
</svg>
<span class='none'>Zalo</span>
</a>
</div>
<div class='messenger icon-hdc'>
<a href="https://www.messenger.com/t/huycovip" rel="noppener nofollow" target="_blank" title="Messenger Chat">
<svg class='icon' viewBox="96 93 322 324">
<path d="M257 93c-88.918 0-161 67.157-161 150 0 47.205 23.412 89.311 60 116.807V417l54.819-30.273C225.449 390.801 240.948 393 257 393c88.918 0 161-67.157 161-150S345.918 93 257 93zm16 202l-41-44-80 44 88-94 42 44 79-44-88 94z" fill="#fff" />
</svg>
<span class='none'>Messenger</span>
</a>
</div>
<div class='phone icon-hdc'>
<a href="tel:0905999333" target="_blank" title="Phone: 0905.999.333">
<svg class='icon' viewBox="0 0 485.213 485.212">
<g>
<path d="M242.607,0C108.629,0,0.001,108.628,0.001,242.606c0,133.976,108.628,242.606,242.606,242.606 c133.978,0,242.604-108.631,242.604-242.606C485.212,108.628,376.585,0,242.607,0z M370.719,353.989l-19.425,19.429 c-3.468,3.463-13.623,5.624-13.949,5.624c-61.452,0.536-120.621-23.602-164.095-67.08c-43.593-43.618-67.759-102.998-67.11-164.657 c0-0.028,2.224-9.892,5.689-13.324l19.424-19.427c7.108-7.141,20.762-10.368,30.327-7.168l4.086,1.363 c9.537,3.197,19.55,13.742,22.185,23.457l9.771,35.862c2.635,9.743-0.919,23.604-8.025,30.712l-12.97,12.972 c12.734,47.142,49.723,84.138,96.873,96.903l12.965-12.975c7.141-7.141,20.997-10.692,30.719-8.061l35.857,9.806 c9.717,2.67,20.26,12.62,23.456,22.154l1.363,4.145C381.028,333.262,377.826,346.913,370.719,353.989z" fill="#0fcf1b" />
</g>
</svg>
<span class='none'>Phone</span>
</a>
</div>
<div class='email icon-hdc'>
<a href="huycoivip.volam@gmail.com" target="_blank" title="Gửi Email">
<svg class='icon' viewBox="0 0 612 612">
<g>
<path d="M306.768,346.814h0.131c4.615,0,9.176-1.339,12.866-3.777l1.001-0.643c0.218-0.142,0.446-0.271,0.675-0.424l11.658-9.645 l278.259-229.624c-0.576-0.795-1.557-1.339-2.602-1.339H3.233c-0.751,0-1.448,0.272-2.003,0.729l291.125,239.954 C296.024,345.083,301.259,346.814,306.768,346.814z M0,133.899v340.37l208.55-168.471L0,133.899z M403.668,306.941L612,474.356 V135.031L403.668,306.941z M337.431,361.585c-8.305,6.814-19.168,10.57-30.576,10.57c-11.451,0-22.304-3.734-30.587-10.516 l-47.765-39.394L0,506.806v0.587c0,1.753,1.502,3.244,3.276,3.244h605.491c1.741,0,3.232-1.491,3.232-3.255v-0.544L383.693,323.4 L337.431,361.585z" fill="#fff" />
</g>
</svg>
<span class='none'>Email</span>
</a>
</div>
</div>
Viết CSS cho các nút liên hệ
<style>
.hdc {
position: fixed;
top: 50%;
right: 0;
transform: translate(-0, -50%);
z-index: 999!important;
display: none
}
.icon-hdc {
margin: 5px;
width: 45px;
height: 45px;
}
.zalo {
background: #0fa3db;
border-radius: 50%;
}
.email {
background: #5571f7;
border-radius: 50%;
text-align: center;
line-height: 65px;
}
.phone {
background: #fff;
border-radius: 50%;
}
.messenger {
background: #0084ff;
border-radius: 50%;
text-align: center;
line-height: 65px;
}
.messenger .icon {
width: 30px;
}
.email .icon {
width: 30px;
}
</style>
Sử dụng Jquery để ẩn hiện các nút liên hệ theo ý muốn
Tiếp tục chèn đoạn code bên dưới trước thẻ đóng body<script>
//<![CDATA[
$(document).on('scroll', function() {
var x = $(this).scrollTop(),
y = $('#Label1').offset().top
if (x > y) {
$('.hdc').fadeIn()
} else {
$('.hdc').fadeOut()
}
})
//]]>
</script>
Trong đó #Label1 là id của phần tử mà bạn muốn khi kéo chuột đến đó sẽ hiển thị các nút liên hệ
Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh
Chèn code: [pre]Code đã mã hóa [/pre]
Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”
Chèn link: Click để chèn link