Diễn đàn PHP - HTML - CSS [CSS/Javascript] Troll bạn bè cực vui

[CSS/Javascript] Troll bạn bè cực vui

787 lượt xem
28/11/2022 20:13 Bình luận (7)
hehe như tiêu đề, cái này là code bong bóng chat messenger thôi =))

đầu tiên bạn phải có 1 trang web/wap gì cũng được, sau đó dụ nó vào web mình chơi :D kiểu "Ờ tao mới làm trang web nè m vô coi thử đẹp hơm", kiểu kiểu vậy :D khi nó vào rồi thì sẽ có 1 bong bóng chat hiện ra và một âm thanh quen thuộc ping lên như thật luôn :v những điều bạn cần làm là sửa lại link ảnh avatar nữa là xong nha. bong bóng đó nó ở đó mãi thôi =)) khó chịu cực, mình đã thử và thành công troll rồi nha...

Vào việc chính thôi nào: Add css này vào web bạn, vì là để troll thôi thì chúng ta để nó ở thẻ style tiện mai mốt bỏ đi
<style type="text/css">#chat-head { 
background: #fff url('https://nguoinghe.vn/zoom/156x0/uploads/images/trunganhdung/2022/09/12/kg-1662994624.jpg') no-repeat -3px -5px;
background-size: 80px 80px;
width: 70px;
height: 70px;
-webkit-border-radius: 55px;
-moz-border-radius: 55px;
border-radius: 55px;
background-color: #adafb5;
-webkit-box-shadow: 0 2px 12px 1px rgba(0,0,0,.89);
-moz-box-shadow: 0 2px 12px 1px rgba(0,0,0,.89);
box-shadow: 0 2px 12px 1px rgba(0,0,0,.89);
border: solid 1px #fff;
position: fixed;
right: -110px;
top: 60px;
text-decoration: none;
-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;
opacity: 0;
transition: 5s;
}
#chat-head i { 
width: 17px;
height: 24px;
-webkit-border-radius: 4px/3px;
-moz-border-radius: 4px/3px;
border-radius: 4px/3px;
background-color: #adafb5;
background-image: -webkit-linear-gradient(bottom, #ff1919, #ff5959);
background-image: -moz-linear-gradient(bottom, #ff1919, #ff5959);
background-image: -o-linear-gradient(bottom, #ff1919, #ff5959);
background-image: -ms-linear-gradient(bottom, #ff1919, #ff5959);
background-image: linear-gradient(to top, #ff1919, #ff5959);
display: block;
color: #fff;
font-style: normal;
font-family: 'Helvetica';
font-weight: bold;
font-size: 16px;
text-align: center;
line-height: 28px;
box-shadow: 0px 1px 3px #000;
-moz-box-shadow: 0px 1px 3px #000;
-webkit-box-shadow: 0px 1px 3px #000;
border: 1px solid rgba(255, 0, 0, .5);
margin: -5px 0 0 -5px;
text-shadow: 0 2px 0 #c51414;
}
#chat-head.animate { right: -10px;opacity: 1 }
</style>

tiếp theo đặt cái này ở header
<a id="chat-head" href="#">
  <i>1</i>
</a>

<audio id="pingpong" autoplay>
  <source src="http://nhacchuongvui.com/wp-content/uploads/Nhac-chuong-tin-nhan-Messenger-www_nhacchuongvui_com.mp3?_=1" type="audio/mpeg">
</audio>


và không thể thiếu javascript =)) cái này là chính nè
<script>
  var element = document.getElementById("chat-head");
  var pingpong = document.getElementById("pingpong");
  element.classList.add("animate");
  pingpong.play();
  dragElement(document.getElementById(("chat-head")));
function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id + "header")) {
    document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
  } else {
    elmnt.onmousedown = dragMouseDown;
  }
  function dragMouseDown(e) {
    e = e || window.event;
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    document.onmousemove = elementDrag;
  }
  function elementDrag(e) {
    e = e || window.event;
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }
  function closeDragElement() {
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

Giải thích tại sao có javascript thì là lúc đầu không có, sờ vào bong bóng thấy thô quá nên là để cho sinh động hơn chút thì gắn javascript này để có thể di chuyển bong bóng chat đi chổ khác được nhưng không thể tắt được =)) và muốn kéo nó đi cũng cực kì khó luôn nha, cứ kéo mà nó không chịu đi theo ý mà nó cứ từ từ nó đi thôi nên là bực mình lắm luôn.
Đây là link file mp3: nhacchuongvui.com/wp-content/uploads/Nhac-chuong-tin-nhan-Messenger-www_nhacchuongvui_com.mp3?_=1 thay link này nếu không có tiếng nha.
Đây là link avatar mình lụm trên google: nguoinghe.vn/zoom/156x0/uploads/images/trunganhdung/2022/09/12/kg-1662994624.jpg
Demo online:http://imgill.viwap.com/ddos.victim
Chan Hoang, Hữu Phương, Minh Nhí và 1 người khác đã thích bài viết này
BÌNH LUẬN (7)
Vẫn ko hiểu lắm -((
10 điểm về chỗ
Avatar
Tác giả
@Black Angel tức là, nó sẽ hiện 1 bong bóng chat giống như là messenger thật ý, nhìn khó chịu cực @@
Nó thoát web là hết hả 14
xịn xò 1
Cho bong bóng nó nhảy ra nhanh như android thì hay á
Avatar
Tác giả
@nguoidi laf lắm ông =))

Viết bình luận

Vui lòng đăng nhập để tham gia bình luận.

Trang chủ Tìm kiếm Trò chuyện Đăng nhập