Advertisement
JackHaxor

Chữ chạy theo chuột

Apr 24th, 2018
119
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.97 KB | None | 0 0
  1. <style type="text/css">
  2. /* Circle Text Styles */
  3. #outerCircleText {
  4. /* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
  5. font-style: Times New Roman;
  6. font-weight: bold;
  7. font-family: 'comic sans ms', verdana, times new roman;
  8. color: RED;
  9. /* End Optional */
  10. /* Start Required - Do Not Edit */
  11. position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
  12. #outerCircleText div {position: relative;}
  13. #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
  14. /* End Required */
  15. /* End Circle Text Styles */</style>
  16. <p>
  17. Dòng chữ chạy theo chuột<script type="text/javascript">
  18. /* Circling text trail- Tim Tilton
  19. Website: http://www.ngocmnhweb.com/
  20. Visit: http://www.ngocmanhweb.com/ for Original Source and tons of scripts
  21. Modified Here for more flexibility and modern browser support
  22. Modifications as first seen in http://www.dynamicdrive.com/forums/
  23. username:jscheuer1 - This notice must remain for legal use
  24. */
  25. ;(function(){
  26. // Your message here (QUOTED STRING)
  27. var msg = "Dòng chữ chạy theo chuột";
  28. /* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */
  29. // Set font's style size for calculating dimensions
  30. // Set to number of desired pixels font size (decimal and negative numbers not allowed)
  31. var size = 30;
  32. // Set both to 1 for plain circle, set one of them to 2 for oval
  33. // Other numbers & decimals can have interesting effects, keep these low (0 to 3)
  34. var circleY = 0.75; var circleX = 2;
  35. // The larger this divisor, the smaller the spaces between letters
  36. // (decimals allowed, not negative numbers)
  37. var letter_spacing = 5;
  38. // The larger this multiplier, the bigger the circle/oval
  39. // (decimals allowed, not negative numbers, some rounding is applied)
  40. var diameter = 10;
  41. // Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
  42. var rotation = 0.4;
  43. // This is not the rotation speed, its the reaction speed, keep low!
  44. // Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
  45. var speed = 0.3;
  46. ////////////////////// Stop Editing //////////////////////
  47. if (!window.addEventListener && !window.attachEvent || !document.createElement) return;
  48. msg = msg.split('');
  49. var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20,
  50. ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [],
  51. o = document.createElement('div'), oi = document.createElement('div'),
  52. b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body,
  53. mouse = function(e){
  54. e = e || window.event;
  55. ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position
  56. xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position
  57. },
  58. makecircle = function(){ // rotation/positioning
  59. if(init.nopy){
  60. o.style.top = (b || document.body).scrollTop + 'px';
  61. o.style.left = (b || document.body).scrollLeft + 'px';
  62. };
  63. currStep -= rotation;
  64. for (var d, i = n; i > -1; --i){ // makes the circle
  65. d = document.getElementById('iemsg' + i).style;
  66. d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px';
  67. d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px';
  68. };
  69. },
  70. drag = function(){ // makes the resistance
  71. y[0] = Y[0] += (ymouse - Y[0]) * speed;
  72. x[0] = X[0] += (xmouse - 20 - X[0]) * speed;
  73. for (var i = n; i > 0; --i){
  74. y[i] = Y[i] += (y[i-1] - Y[i]) * speed;
  75. x[i] = X[i] += (x[i-1] - X[i]) * speed;
  76. };
  77. makecircle();
  78. },
  79. init = function(){ // appends message divs, & sets initial values for positioning arrays
  80. if(!isNaN(window.pageYOffset)){
  81. ymouse += window.pageYOffset;
  82. xmouse += window.pageXOffset;
  83. } else init.nopy = true;
  84. for (var d, i = n; i > -1; --i){
  85. d = document.createElement('div'); d.id = 'iemsg' + i;
  86. d.style.height = d.style.width = a + 'px';
  87. d.appendChild(document.createTextNode(msg[i]));
  88. oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0;
  89. };
  90. o.appendChild(oi); document.body.appendChild(o);
  91. setInterval(drag, 25);
  92. },
  93. ascroll = function(){
  94. ymouse += window.pageYOffset;
  95. xmouse += window.pageXOffset;
  96. window.removeEventListener('scroll', ascroll, false);
  97. };
  98. o.id = 'outerCircleText'; o.style.fontSize = size + 'px';
  99. if (window.addEventListener){
  100. window.addEventListener('load', init, false);
  101. document.addEventListener('mouseover', mouse, false);
  102. document.addEventListener('mousemove', mouse, false);
  103. if (/Apple/.test(navigator.vendor))
  104. window.addEventListener('scroll', ascroll, false);
  105. }
  106. else if (window.attachEvent){
  107. window.attachEvent('onload', init);
  108. document.attachEvent('onmousemove', mouse);
  109. };
  110. })();
  111. </script></p>
  112.  
  113. Hướng dẫn sử dụng code :
  114.  
  115. Bạn có thể thay đổi nội dung mầu đỏ cho phù hợp với website nhé
  116.  
  117. WordPress : bạn chèn code vào phần HTML của Widget
  118. Blogger : Chèn vào thêm tiện ích HTML trong phần bố cục.
  119. Đối với các dạng website khác bạn chèn vào trước thẻ </body> nhé
  120. Chúc bạn thành công
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement