精美的鼠標跟隨一

時間  2020-04-23
標籤 精美 鼠標 跟隨 简体版
原文   原文鏈接

 Html代碼 複製代碼 收藏代碼css

  1. <html>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  4. <title>精美js鼠標跟隨代碼</title>
  5. </head>
  6. <body>
  7. <script>
  8. A = document.getElementById
  9. B = document.all;
  10. C = document.layers;
  11. T1 = new Array("/jscss/demoimg/200905/trail1.gif", 38, 35, "/jscss/demoimg/200905/trail2.gif", 30, 31, "/jscss/demoimg/200905/trail3.gif", 28, 26, "/jscss/demoimg/200905/trail4.gif", 22, 21, "/jscss/demoimg/200905/trail5.gif", 16, 16, "/jscss/demoimg/200905/trail6.gif", 10, 10)
  12.  
  13. var offsetx = 15
  14. var offsety = 10
  15.  
  16. nos = parseInt(T1.length / 3)
  17. rate = 50
  18. ie5fix1 = 0;
  19. ie5fix2 = 0;
  20. rightedge = B ? document.body.clientWidth - T1[1] : window.innerWidth - T1[1] - 20
  21. bottomedge = B ? document.body.scrollTop + document.body.clientHeight - T1[2] : window.pageYOffset + window.innerHeight - T1[2]
  22.  
  23. for ( i = 0; i < nos; i++) {
  24. createContainer("CUR" + i, i * 10, i * 10, i * 3 + 1, i * 3 + 2, "", "<img src='" + T1[i * 3] + "' width=" + T1[(i * 3 + 1)] + " height=" + T1[(i * 3 + 2)] + " border=0>")
  25. }
  26.  
  27. function createContainer(N, Xp, Yp, W, H, At, HT, Op, St) {
  28. with (document) {
  29. write((!A && !B) ? "<layer id='" + N + "' left=" + Xp + " top=" + Yp + " width=" + W + " height=" + H : "<div id='" + N + "'" + " style='position:absolute;left:" + Xp + "; top:" + Yp + "; width:" + W + "; height:" + H + "; ");
  30. if (St) {
  31. if (C)
  32. write(" style='");
  33. write(St + ";' ")
  34. } else
  35. write((A || B) ? "'" : "");
  36. write((At) ? At + ">" : ">");
  37. write((HT) ? HT : "");
  38. if (!Op)
  39. closeContainer(N)
  40. }
  41. }
  42.  
  43. function closeContainer() {
  44. document.write((A || B) ? "</div>" : "</layer>")
  45. }
  46.  
  47. function getXpos(N) {
  48. if (A)
  49. return parseInt(document.getElementById(N).style.left)
  50. else if (B)
  51. return parseInt(B[N].style.left)
  52. else
  53. return C[N].left
  54. }
  55.  
  56. function getYpos(N) {
  57. if (A)
  58. return parseInt(document.getElementById(N).style.top)
  59. else if (B)
  60. return parseInt(B[N].style.top)
  61. else
  62. return C[N].top
  63. }
  64.  
  65. function moveContainer(N, DX, DY) {
  66. c = (A) ? document.getElementById(N).style : (B) ? B[N].style : (C) ? C[N] : "";
  67. if (!B) {
  68. rightedge = window.innerWidth - T1[1] - 20
  69. bottomedge = window.pageYOffset + window.innerHeight - T1[2]
  70. }
  71. c.left = Math.min(rightedge, DX + offsetx);
  72. c.top = Math.min(bottomedge, DY + offsety);
  73. }
  74.  
  75. function cycle() {
  76. //if (IE5)
  77. if (document.all && window.print) {
  78. ie5fix1 = document.body.scrollLeft;
  79. ie5fix2 = document.body.scrollTop;
  80. }
  81. for ( i = 0; i < (nos - 1); i++) {
  82. moveContainer("CUR" + i, getXpos("CUR" + (i + 1)), getYpos("CUR" + (i + 1)))
  83. }
  84. }
  85.  
  86. function newPos(e) {
  87. moveContainer("CUR" + (nos - 1), (B) ? event.clientX + ie5fix1 : e.pageX + 2, (B) ? event.clientY + ie5fix2 : e.pageY + 2)
  88. }
  89.  
  90. function getedgesIE() {
  91. rightedge = document.body.clientWidth - T1[1]
  92. bottomedge = document.body.scrollHeight - T1[2]
  93. }
  94.  
  95. if (B) {
  96. window.onload = getedgesIE
  97. window.onresize = getedgesIE
  98. }
  99.  
  100. if (document.layers)
  101. document.captureEvents(Event.MOUSEMOVE)
  102. document.onmousemove = newPos
  103. setInterval("cycle()", rate)
  104. </script>
  105. </body>
  106. </html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程