管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

跟随鼠标旋转的文字

　　

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%20%20%0D%0Aif%20(document.all)%20%7B%20%20%0D%0AyourLogo%20%3D%20%22%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6%E6%AC%A2%E8%BF%8E%E6%82%A8%E7%9A%84%E5%85%89%E4%B8%B4%22%3B%20%20%0D%0AlogoFont%20%3D%20%22%E5%AE%8B%E4%BD%93%22%3B%20%20%0D%0AlogoColor%20%3D%20%22000000%22%3B%20%20%0D%0AyourLogo%20%3D%20yourLogo.split('')%3B%20%20%0D%0AL%20%3D%20yourLogo.length%3B%20%20%0D%0ATrigSplit%20%3D%20360%20%2F%20L%3B%20%20%0D%0ASz%20%3D%20new%20Array()%20%20%0D%0AlogoWidth%20%3D%20100%3B%20%20%0D%0AlogoHeight%20%3D%20-30%3B%20%20%0D%0Aypos%20%3D%200%3B%20%20%0D%0Axpos%20%3D%200%3B%20%20%0D%0Astep%20%3D%200.03%3B%20%20%0D%0AcurrStep%20%3D%200%3B%20%20%0D%0Adocument.write('%3Cdiv%20id%3D%22outer%22%20style%3D%22position%3Aabsolute%3Btop%3A0px%3Bleft%3A0px%22%3E%3Cdiv%20style%3D%22position%3Arelative%22%3E')%3B%20%20%0D%0Afor%20(i%20%3D%200%3B%20i%20%3C%20L%3B%20i%2B%2B)%20%7B%20%20%0D%0Adocument.write('%3Cdiv%20id%3D%22ie%22%20style%3D%22position%3Aabsolute%3Btop%3A0px%3Bleft%3A0px%3B'%20%20%0D%0A%2B'width%3A10px%3Bheight%3A10px%3Bfont-family%3A'%2BlogoFont%2B'%3Bfont-size%3A12px%3B'%20%20%0D%0A%2B'color%3A'%2BlogoColor%2B'%3Btext-align%3Acenter%22%3E'%2ByourLogo%5Bi%5D%2B'%3C%2Fdiv%3E')%3B%20%20%0D%0A%7D%20%20%0D%0Adocument.write('%3C%2Fdiv%3E%3C%2Fdiv%3E')%3B%20%20%0D%0Afunction%20Mouse()%20%7B%20%20%0D%0Aypos%20%3D%20event.y%3B%20%20%0D%0Axpos%20%3D%20event.x%20-%205%3B%20%20%0D%0A%7D%20%20%0D%0Adocument.onmousemove%3DMouse%3B%20%20%0D%0Afunction%20animateLogo()%20%7B%20%20%0D%0Aouter.style.pixelTop%20%3D%20document.body.scrollTop%3B%20%20%0D%0Afor%20(i%20%3D%200%3B%20i%20%3C%20L%3B%20i%2B%2B)%20%7B%20%20%0D%0Aie%5Bi%5D.style.top%20%3D%20ypos%20%2B%20logoHeight%20*%20Math.sin(currStep%20%2B%20i%20*%20TrigSplit%20*%20Math.PI%20%2F%20180)%3B%20%20%0D%0Aie%5Bi%5D.style.left%20%3D%20xpos%20%2B%20logoWidth%20*%20Math.cos(currStep%20%2B%20i%20*%20TrigSplit%20*%20Math.PI%20%2F%20180)%3B%20%20%0D%0ASz%5Bi%5D%20%3D%20ie%5Bi%5D.style.pixelTop%20-%20ypos%3B%20%20%0D%0Aif%20(Sz%5Bi%5D%20%3C%205)%20Sz%5Bi%5D%20%3D%205%3B%20%20%0D%0Aie%5Bi%5D.style.fontSize%20%3D%20Sz%5Bi%5D%20%2F%201.7%3B%20%20%0D%0A%7D%20%20%0D%0AcurrStep%20-%3D%20step%3B%20%20%0D%0AsetTimeout('animateLogo()'%2C%2020)%3B%20%20%0D%0A%7D%20%20%0D%0Awindow.onload%20%3D%20animateLogo%3B%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

　　这是一段跟随鼠标旋转的文字，我希望字体在旋转的时候，每一个字的颜色都互不相同。不知道应该如何实现呢？

　　

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20LANGUAGE%3D%22JavaScript%22%3E%20%20%0D%0Aif%20(document.all)%20%7B%20%20%0D%0AyourLogo%20%3D%20%22%E4%B8%83%E5%BA%A6%E7%A9%BA%E9%97%B4%E6%AC%A2%E8%BF%8E%E6%82%A8%E7%9A%84%E5%85%89%E4%B8%B4%22%3B%20%20%0D%0AlogoFont%20%3D%20%22%E5%AE%8B%E4%BD%93%22%3B%20%20%0D%0AlogoColor%20%3D%20%5B%22F0F8FF%22%2C%22FAEBD7%22%2C%2200FFFF%22%2C%227FFFD4%22%2C%22F0FFFF%22%2C%22F5F5DC%22%2C%22FFE4C4%22%2C%22000000%22%2C%22FFEBCD%22%2C%220000FF%22%2C%228A2BE2%22%2C%22A52A2A%22%2C%22DEB887%22%2C%225F9EA0%22%2C%227FFF00%22%2C%22D2691E%22%2C%22FF7F50%22%2C%226495ED%22%2C%22FFF8DC%22%2C%22DC143C%22%2C%2200FFFF%22%2C%2200008B%22%2C%22008B8B%22%2C%22B8860B%22%2C%22A9A9A9%22%2C%22006400%22%2C%22BDB76B%22%2C%228B008B%22%2C%22556B2F%22%2C%22FF8C00%22%2C%229932CC%22%2C%228B0000%22%2C%22E9967A%22%2C%228FBC8B%22%2C%22483D8B%22%2C%222F4F4F%22%2C%2200CED1%22%2C%229400D3%22%2C%22FF1493%22%2C%2200BFFF%22%2C%22696969%22%2C%221E90FF%22%2C%22B22222%22%2C%22FFFAF0%22%2C%22228B22%22%2C%22FF00FF%22%2C%22DCDCDC%22%2C%22F8F8FF%22%2C%22FFD700%22%2C%22DAA520%22%2C%22808080%22%2C%22008000%22%2C%22ADFF2F%22%2C%22F0FFF0%22%2C%22FF69B4%22%2C%22CD5C5C%22%2C%224B0082%22%2C%22FFFFF0%22%2C%22F0E68C%22%2C%22E6E6FA%22%2C%22FFF0F5%22%2C%227CFC00%22%2C%22FFFACD%22%2C%22ADD8E6%22%2C%22F08080%22%2C%22E0FFFF%22%2C%22FAFAD2%22%2C%2290EE90%22%2C%22D3D3D3%22%2C%22FFB6C1%22%2C%22FFA07A%22%2C%2220B2AA%22%2C%2287CEFA%22%2C%22778899%22%2C%22B0C4DE%22%2C%22FFFFE0%22%2C%2200FF00%22%2C%2232CD32%22%2C%22FAF0E6%22%2C%22FF00FF%22%2C%22800000%22%2C%2266CDAA%22%2C%220000CD%22%2C%22BA55D3%22%2C%229370DB%22%2C%223CB371%22%2C%227B68EE%22%2C%2200FA9A%22%2C%2248D1CC%22%2C%22C71585%22%2C%22191970%22%2C%22F5FFFA%22%2C%22FFE4E1%22%2C%22FFE4B5%22%2C%22FFDEAD%22%2C%22000080%22%2C%22FDF5E6%22%2C%22808000%22%2C%226B8E23%22%2C%22FFA500%22%2C%22FF4500%22%2C%22DA70D6%22%2C%22EEE8AA%22%2C%2298FB98%22%2C%22AFEEEE%22%2C%22DB7093%22%2C%22FFEFD5%22%2C%22FFDAB9%22%2C%22CD853F%22%2C%22FFC0CB%22%2C%22DDA0DD%22%2C%22B0E0E6%22%2C%22800080%22%2C%22FF0000%22%2C%22BC8F8F%22%2C%224169E1%22%2C%228B4513%22%2C%22FA8072%22%2C%22F4A460%22%2C%222E8B57%22%2C%22FFF5EE%22%2C%22A0522D%22%2C%22C0C0C0%22%2C%2287CEEB%22%2C%226A5ACD%22%2C%22708090%22%2C%22FFFAFA%22%2C%2200FF7F%22%2C%224682B4%22%2C%22D2B48C%22%2C%22008080%22%2C%22D8BFD8%22%2C%22FF6347%22%2C%2240E0D0%22%2C%22EE82EE%22%2C%22F5DEB3%22%2C%22F5F5F5%22%2C%22FFFF00%22%2C%229ACD32%22%5D%3B%20%20%0D%0AyourLogo%20%3D%20yourLogo.split('')%3B%20%20%0D%0AL%20%3D%20yourLogo.length%3B%20%20%0D%0ATrigSplit%20%3D%20360%20%2F%20L%3B%20%20%0D%0ASz%20%3D%20new%20Array()%20%20%0D%0AlogoWidth%20%3D%20100%3B%20%20%0D%0AlogoHeight%20%3D%20-30%3B%20%20%0D%0Aypos%20%3D%200%3B%20%20%0D%0Axpos%20%3D%200%3B%20%20%0D%0Astep%20%3D%200.03%3B%20%20%0D%0AcurrStep%20%3D%200%3B%20%20%0D%0Adocument.write('%3Cdiv%20id%3D%22outer%22%20style%3D%22position%3Aabsolute%3Btop%3A0px%3Bleft%3A0px%22%3E%3Cdiv%20style%3D%22position%3Arelative%22%3E')%3B%20%20%0D%0Afor%20(i%20%3D%200%3B%20i%20%3C%20L%3B%20i%2B%2B)%20%7B%20%20%0D%0Adocument.write('%3Cdiv%20id%3D%22ie%22%20style%3D%22position%3Aabsolute%3Btop%3A0px%3Bleft%3A0px%3B'%20%20%0D%0A%2B'width%3A10px%3Bheight%3A10px%3Bfont-family%3A'%2BlogoFont%2B'%3Bfont-size%3A12px%3B'%20%20%0D%0A%2B'color%3A'%2BlogoColor%5BMath.floor(Math.random()*logoColor.length)%5D%2B'%3Btext-align%3Acenter%22%3E'%2ByourLogo%5Bi%5D%2B'%3C%2Fdiv%3E')%3B%20%20%0D%0A%7D%20%20%0D%0Adocument.write('%3C%2Fdiv%3E%3C%2Fdiv%3E')%3B%20%20%0D%0Afunction%20Mouse()%20%7B%20%20%0D%0Aypos%20%3D%20event.y%3B%20%20%0D%0Axpos%20%3D%20event.x%20-%205%3B%20%20%0D%0A%7D%20%20%0D%0Adocument.onmousemove%3DMouse%3B%20%20%0D%0Afunction%20animateLogo()%20%7B%20%20%0D%0Aouter.style.pixelTop%20%3D%20document.body.scrollTop%3B%20%20%0D%0Afor%20(i%20%3D%200%3B%20i%20%3C%20L%3B%20i%2B%2B)%20%7B%20%20%0D%0Aie%5Bi%5D.style.top%20%3D%20ypos%20%2B%20logoHeight%20*%20Math.sin(currStep%20%2B%20i%20*%20TrigSplit%20*%20Math.PI%20%2F%20180)%3B%20%20%0D%0Aie%5Bi%5D.style.left%20%3D%20xpos%20%2B%20logoWidth%20*%20Math.cos(currStep%20%2B%20i%20*%20TrigSplit%20*%20Math.PI%20%2F%20180)%3B%20%20%0D%0ASz%5Bi%5D%20%3D%20ie%5Bi%5D.style.pixelTop%20-%20ypos%3B%20%20%0D%0Aif%20(Sz%5Bi%5D%20%3C%205)%20Sz%5Bi%5D%20%3D%205%3B%20%20%0D%0Aie%5Bi%5D.style.fontSize%20%3D%20Sz%5Bi%5D%20%2F%201.7%3B%20%20%0D%0A%7D%20%20%0D%0AcurrStep%20-%3D%20step%3B%20%20%0D%0AsetTimeout('animateLogo()'%2C%2020)%3B%20%20%0D%0A%7D%20%20%0D%0Awindow.onload%20%3D%20animateLogo%3B%20%20%0D%0A%7D%20%20%0D%0A%3C%2Fscript%3E">

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程