首页 > 代码库 > 文字围绕鼠标旋转并移动（滚轮控制半径）
文字围绕鼠标旋转并移动（滚轮控制半径）
网上看到的字符旋转效果，加以改动跟随鼠标旋转并移动，滚轮控制旋转圆到横向直径和纵向直径：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <META content="text/html; charset=gb2312" http-equiv=Content-Type> 5 <META name=GENERATOR content="MSHTML 8.00.7600.17051"> 6 <title>Insert title here</title> 7 </head> 8 <body onload="setting()"> 9 <DIV 10 style="POSITION: absolute;font-weight:bold;" 11 id="Circle0"> 12 <P><FONT COLOR = steelblue size=4>你</FONT></P> 13 </DIV> 14 <DIV 15 style="POSITION: absolute;font-weight:bold;" 16 id="Circle1"> 17 <P><FONT COLOR = steelblue size=4>是</FONT></P> 18 </DIV> 19 <DIV 20 style="POSITION: absolute;font-weight:bold;" 21 id=Circle2> 22 <P><FONT COLOR = steelblue size=4>我</FONT></P> 23 </DIV> 24 <DIV 25 style="POSITION: absolute;font-weight:bold;" 26 id=Circle3> 27 <P><FONT COLOR = steelblue size=4>的</FONT></P> 28 </DIV> 29 <DIV 30 style="POSITION: absolute;font-weight:bold;" 31 id=Circle4> 32 <P><FONT color=#ff0000 size=4>小</FONT></P> 33 </DIV> 34 <DIV 35 style="POSITION: absolute;font-weight:bold;" 36 id=Circle5> 37 <P><FONT color=#ff0000 size=4>呀</FONT></P> 38 </DIV> 39 <DIV 40 style="POSITION: absolute;font-weight:bold;" 41 id=Circle6> 42 <P><FONT color=#ff0000 size=4>小</FONT></P> 43 </DIV> 44 <DIV 45 style="POSITION: absolute;font-weight:bold;" 46 id=Circle7> 47 <P><FONT color=#ff0000 size=4>苹</FONT></P> 48 </DIV> 49 <DIV 50 style="POSITION: absolute;font-weight:bold;" 51 id=Circle8> 52 <P><FONT color=#ff0000 size=4>果</FONT></P> 53 </DIV> 54 <DIV 55 style="POSITION: absolute;font-weight:bold;" 56 id=Circle9> 57 <P><FONT color=#008000 size=4>＊</FONT></P> 58 </DIV> 59 <DIV 60 style="POSITION: absolute;font-weight:bold;" 61 id=Circle10> 62 <P><FONT color=#8080ff size=4>怎</FONT></P> 63 </DIV> 64 <DIV 65 style="POSITION: absolute;font-weight:bold;" 66 id=Circle11> 67 <P><FONT color=#8080ff size=4>么</FONT></P> 68 </DIV> 69 <DIV 70 style="POSITION: absolute;font-weight:bold;" 71 id=Circle12> 72 <P><FONT color=#8080ff size=4>爱</FONT></P> 73 </DIV> 74 <DIV 75 style="POSITION: absolute;font-weight:bold;" 76 id=Circle13> 77 <P><FONT color=#8080ff size=4>你</FONT></P> 78 </DIV> 79 <DIV 80 style="POSITION: absolute;font-weight:bold;" 81 id=Circle14> 82 <P><FONT color=#8080ff size=4>都</FONT></P> 83 </DIV> 84 <DIV 85 style="POSITION: absolute;font-weight:bold;" 86 id=Circle15> 87 <P><FONT color=#8080ff size=4>不</FONT></P> 88 </DIV> 89 <DIV 90 style="POSITION: absolute;font-weight:bold;" 91 id=Circle16> 92 <P><FONT color=#8080ff size=4>嫌</FONT></P> 93 </DIV> 94 <DIV 95 style="POSITION: absolute;font-weight:bold;" 96 id=Circle17> 97 <P><FONT color=#8080ff size=4>多</FONT></P> 98 </DIV> 99 <DIV100 style="POSITION: absolute;font-weight:bold;"101 id=Circle18>102 <P><FONT color=#008000 size=4>＊</FONT></P>103 </DIV>104 <DIV105 style="POSITION: absolute;font-weight:bold;"106 id=Circle19>107 <P><FONT color=#ff0000 size=4>就</FONT></P>108 </DIV>109 <DIV110 style="POSITION: absolute;font-weight:bold;"111 id=Circle20>112 <P><FONT color=#ff0000 size=4>这</FONT></P>113 </DIV>114 <DIV115 style="POSITION: absolute;font-weight:bold;"116 id=Circle21>117 <P><FONT color=#ff0000 size=4>样</FONT></P>118 </DIV>119 <DIV120 style="POSITION: absolute;font-weight:bold;"121 id=Circle22>122 <P><FONT color=#ff0000 size=4>走</FONT></P>123 </DIV>124 <DIV125 style="POSITION: absolute;font-weight:bold;"126 id=Circle23>127 <P><FONT color=#ff0000 size=4>进</FONT></P>128 </DIV>129 <DIV130 style="POSITION: absolute;font-weight:bold;"131 id=Circle24>132 <P><FONT color=#ff0000 size=4>心</FONT></P>133 </DIV>134 <DIV135 style="POSITION: absolute;font-weight:bold;"136 id=Circle25>137 <P><FONT color=#ff0000 size=4>窝</FONT></P>138 </DIV>139 <DIV140 style="POSITION: absolute;font-weight:bold;"141 id=Circle26>142 <P><FONT color=#008000 size=4>＊</FONT></P>143 </DIV>144 145 <script>146 var CenterX=100, CenterY=100, Pi, Inc;147 var Circle = new Array();148 var Pos = new Array();149 var Rx = 2.0,Ry = 1.0;150 151 function doMouseMove(e) {152 var evt = e||window.event;153 var x = evt.clientX || evt.x;154 var y = evt.clientY || evt.y;155 CenterX=x;156 CenterY=y;157 158 }159 160 function doMouseWheel(e){161 var evt = e||window.event;162 if(evt.wheelDelta>0){163 Rx = Rx - 0.1;164 Ry = Ry + 0.1;165 }else{166 Rx = Rx + 0.1;167 Ry = Ry - 0.1;168 }169 }170 171 function setting() {172 for (i = 0; i <= 26; i++)173 Circle[i] = eval("document.getElementById(‘Circle" + i + "‘)" + ".style");174 175 Radius = 160;176 Pi = Math.PI;177 Inc = Pi / 180;178 179 Pos[0] = 0;180 for (i = 1; i < Circle.length; i++)181 Pos[i] = parseFloat(Pos[i - 1] + ((2 * Pi) / Circle.length));182 for (i = 0; i < Pos.length; i++) {183 Pos[i] = Pos[i] + Inc;184 Circle[i].left = Radius * Math.cos(Pos[i]) + CenterX;185 Circle[i].top = Radius * Math.sin(Pos[i]) + CenterY;186 }187 setInterval("Last()", 10);188 }189 190 function Last() {191 for (i = 0; i < Pos.length; i++) {192 Circle[i].visibility = "visible";193 }194 195 for (i = 0; i < Pos.length; i++) {196 Pos[i] = Pos[i] + Inc;197 Circle[i].left = Rx * Radius * Math.cos(Pos[i]) + CenterX;198 Circle[i].top = Ry * Radius * Math.sin(Pos[i]) + CenterY;199 }200 }201 202 document.onmousemove = doMouseMove;203 document.onmousewheel = doMouseWheel;204 </script>205 </body>206 </html>
关于兼容性，在IE和Opera中实现了，但在Chrome中没实现，Firefox和Safari本人没安装，没进行测试。
继续努力中...
文字围绕鼠标旋转并移动（滚轮控制半径）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。