Phiên bản đầy đủ: jsB@nk » Con trỏ » Di chuyển theo chuột » Vòng tròn 3D theo chuột
URL: https://www.javascriptbank.com/spinning-circle-follow-mouse-script.html
Hiệu ứng tạo một vòng tròn luôn xoay quanh theo con trỏ chuột.
Phiên bản đầy đủ: jsB@nk » Con trỏ » Di chuyển theo chuột » Vòng tròn 3D theo chuột
URL: https://www.javascriptbank.com/spinning-circle-follow-mouse-script.html
<script>if ((document.getElementById) && window.addEventListener || window.attachEvent){(function(){//Configure here.var colours = new Array("#ff0000","#00ff00"); //Add as many colours as you like!var numberOfDots = 14;var setTimeOutSpeed = 40; //Timeout speed!var followMouseSpeed = 0.03; //Must be less than 1 & greater than 0!var twistAndSpinSpeed = 0.04; var colourChangeSpeed = 2;//End config.var idx = document.getElementsByTagName('div').length;for (i = 0; i < numberOfDots; i++){document.write('<div id="dvs'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'+'width:1px;height:1px;background-color:'+colours[0]+';font-size:1px"><\/div>');}var h,y,ref;var d = document;var domWw = (typeof window.innerWidth == "number");var domSy = (typeof window.pageYOffset == "number");var pi = 3.1415/180;var buff = 74;var the_dots = [];var ev = 360/numberOfDots;var step2 = 1;var pix = "px";var y = 0;var x = 0;var ry = 0;var rx = 0;var dy = 0;var dx = 0;var sy = 0;var sx = 0;var scy = 0;var scx = 0;var counter1 = idx;var counter2 = 0;var counter3 = 0;var step1 = 0;if (followMouseSpeed <= 0 || followMouseSpeed >= 1){ followMouseSpeed = 0.1;}if (domWw) ref = window;else{ if (d.documentElement && typeof d.documentElement.clientWidth == "number" && d.documentElement.clientWidth != 0) ref = d.documentElement; else{ if (d.body && typeof d.body.clientWidth == "number") ref = d.body; }}function winSize(){var mozBar = ((domWw) && ref.innerWidth != d.documentElement.offsetWidth)?20:0;h = (domWw)?ref.innerHeight:ref.clientHeight; w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;}function scrolled(){if (domWw){ scy = ref.pageYOffset; scx = ref.pageXOffset; }else{ scy = ref.scrollTop; scx = ref.scrollLeft; }}function mouse(e){var msy = (domSy)?window.pageYOffset:0;if (!e) e = window.event; if (typeof e.pageY == "number"){ y = e.pageY - msy; x = e.pageX; } else{ y = e.clientY - msy; x = e.clientX; }}function colourStep(){counter1 += step2;if (counter1 >= numberOfDots+idx){ counter1 = idx; counter2 += step2;}if (counter2 == colours.length){ counter2 = 0;}scrolled();document.getElementById("dvs"+counter1).style.backgroundColor = colours[counter2];}function DoItAll(){ counter3++;step1 -= twistAndSpinSpeed;dy = ry+=(y-ry)*followMouseSpeed;dx = rx+=(x-rx)*followMouseSpeed;if (ry >= h-buff){ ry = h-buff;}if (ry <= buff){ ry = buff;}if (rx >= w-buff){ rx = w-buff;}if (rx <= buff){ rx = buff;}if (counter3 > colourChangeSpeed){ colourStep(); counter3 = 0;}for (i = 0; i < numberOfDots; i++){ the_dots[i].top = ry + 70 * Math.cos(step1 + i * ev * pi) * Math.sin(step1/2) + scy + pix; the_dots[i].left = rx + 70 * Math.sin(step1 + i * ev * pi) * Math.cos(1+step1/2) + scx + pix;}setTimeout(DoItAll,setTimeOutSpeed);}function init(){for (i = 0; i < numberOfDots; i++){ the_dots[i] = document.getElementById("dvs"+(idx+i)).style;}winSize();DoItAll();}if (window.addEventListener){ window.addEventListener("resize",winSize,false); window.addEventListener("load",init,false); document.addEventListener("mousemove",mouse,false);} else if (window.attachEvent){ window.attachEvent("onresize",winSize); window.attachEvent("onload",init); document.attachEvent("onmousemove",mouse);} })();}//End.</script><!-- This script downloaded from www.JavaScriptBank.com Come to view and download over 2000+ free javascript at www.JavaScriptBank.com-->