zoukankan      html  css  js  c++  java

  • 一个挺漂亮的鼠标跟随效果

    1. <html> 
    2. <head> 
    3. <title>follow mouse</title> 
    4. <style type="text/css"> 
    5. html { 
    6. overflow: hidden; 
    7. } 
    8. body { 
    9. position: absolute; 
    10. height: 100%; 
    11.  100%; 
    12. margin:0; 
    13. padding:0; 
    14. } 
    15. #screen { 
    16. background:#000; 
    17. position: absolute; 
    18.  100%; 
    19. height: 100%; 
    20. } 
    21. #screen span { 
    22. background: #fff; 
    23. font-size: 0; 
    24. overflow: hidden; 
    25.  2px; 
    26. height: 2px; 
    27. } 
    28. </style> 
    29.   <script type="text/javascript">  
    30. var Follow = function () { 
    31. var $ = function (i) {return document.getElementById(i)}, 
    32. addEvent = function (o, e, f) {o.addEventListener ? o.addEventListener(e, f, false) : o.attachEvent('on'+e, function(){f.call(o)})}, 
    33. OBJ = [], sp, rs, N = 0, m; 
    34. var init = function (id, config) { 
    35. this.config = config || {}; 
    36. this.obj = $(id); 
    37. sp = this.config.speed || 4; 
    38. rs = this.config.animR || 1; 
    39. m = {x: $(id).offsetWidth * .5, y: $(id).offsetHeight * .5}; 
    40. this.setXY(); 
    41. this.start(); 
    42. } 
    43. init.prototype = { 
    44. setXY : function () { 
    45. var _this = this; 
    46. addEvent(this.obj, 'mousemove', function (e) { 
    47. ee = e || window.event; 
    48. m.x = e.clientX; 
    49. m.y = e.clientY; 
    50. }) 
    51. }, 
    52. start : function () { 
    53. var k = 180 / Math.PI, OO, o, _this = this, fn = this.config.fn; 
    54. OBJ[N++] = OO = new CObj(null, 0, 0); 
    55. for(var i=0;i<360;i+=20){ 
    56. var O = OO; 
    57. for(var j=10; j<35; j+=1){ 
    58. var x = fn(i, j).x, 
    59. y = fn(i, j).y; 
    60. OBJ[N++] = o = new CObj(O , x, y); 
    61. O = o; 
    62. } 
    63. } 
    64. setInterval(function() { 
    65. for (var i = 0; i < N; i++) OBJ[i].run(); 
    66. }, 16); 
    67. } 
    68. } 
    69. var CObj = function (p, cx, cy) { 
    70. var obj = document.createElement("span"); 
    71. this.css = obj.style; 
    72. this.css.position = "absolute"; 
    73. this.css.left = "-1000px"; 
    74. this.css.zIndex = 1000 - N; 
    75. document.getElementById("screen").appendChild(obj); 
    76. this.ddx = 0; 
    77. this.ddy = 0; 
    78. this.PX = 0; 
    79. this.PY = 0; 
    80. this.x = 0; 
    81. this.y = 0; 
    82. this.x0 = 0; 
    83. this.y0 = 0; 
    84. this.cx = cx; 
    85. this.cy = cy; 
    86. this.parent = p; 
    87. } 
    88. CObj.prototype.run = function () { 
    89. if (!this.parent) { 
    90. this.x0 = m.x; 
    91. this.y0 = m.y; 
    92. } else { 
    93. thisthis.x0 = this.parent.x; 
    94. thisthis.y0 = this.parent.y; 
    95. } 
    96. thisthis.x = this.PX += (this.ddx += ((this.x0 - this.PX - this.ddx) + this.cx) / rs) / sp; 
    97. thisthis.y = this.PY += (this.ddy += ((this.y0 - this.PY - this.ddy) + this.cy) / rs) / sp; 
    98. this.css.left = Math.round(this.x) + 'px'; 
    99. this.css.top = Math.round(this.y) + 'px'; 
    100. } 
    101. return init; 
    102. }(); 
    103. </script></head> 
    104. <body> 
    105. <div id="screen"></div> 
    106. <script type="text/javascript"> 
    107. new Follow('screen', {speed: 4, 
    108. animR : 2, 
    109. fn : function (i, j) { 
    110. return { 
    111. x : j/4*Math.cos(i), 
    112. y : j/4*Math.sin(i) 
    113. } 
    114. }}) 
    115. </script></body> 
    116. </html> 
  • 相关阅读:
    poj2774
    GDOI2012 字符串
    poj3261
    poj1743
    bzoj 2565 manacher
    归档-ios
    学习
    ViewPager动态加载、删除页面
    android:ScrollView嵌套ListView的问题
    Android学习笔记进阶之在图片上涂鸦(能清屏)
  • 原文地址：https://www.cnblogs.com/umgsai/p/3908185.html
Copyright © 2011-2022 走看看