Share code javascript và css hiệu ứng cho chuột

Hiệu ứng cho chuột cực đẹp bằng css và javascript, share code hiệu ứng cho chuột

Hiệu ứng chữ chạy quang chuột
Đầu tiên vào file css chèn code sau :

/* Vòng tròn tiêu đề quanh chuột */
#outerCircleText {
/*Các tùy chọn*/
font-style: Regular;
/* Regular, Italic, Bold, Bold Italic */
font-weight: Regular;
/* Regular, Italic, Bold, Bold Italic */
font-family: Lucida Handwriting;
/* verdana, arial, Batang, Lucida Handwriting */
color: #FF0066;
/* Tùy chọn thêm */
/* Bắt buột - không được chỉnh sửa */
position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;}
#outerCircleText div {position: relative;}
#outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;}
/* End Required */
/* End Circle Text Styles */

/* Vòng tròn tiêu đề quanh chuột */ #outerCircleText { /*Các tùy chọn*/ font-style: Regular; /* Regular, Italic, Bold, Bold Italic */ font-weight: Regular; /* Regular, Italic, Bold, Bold Italic */ font-family: Lucida Handwriting; /* verdana, arial, Batang, Lucida Handwriting */ color: #FF0066; /* Tùy chọn thêm */ /* Bắt buột - không được chỉnh sửa */ position: absolute;top: 0;left: 0;z-index: 3000;cursor: default;} #outerCircleText div {position: relative;} #outerCircleText div div {position: absolute;top: 0;left: 0;text-align: center;} /* End Required */ /* End Circle Text Styles */
Sau đó bạn tạo một file javascript tùy ý và dãn code sau:
;(function(){ // Văn bản chạy quanh chuột) var msg = "Thantienvxp"; // Kích thước văn bản hiển thị var size = 16; // Thiết lập hiệu ứng riêng (0 đến 3) var circleY = 0.75; var circleX = 2; var letter_spacing = 5; //khoảng cách giữa các từ var diameter = 5; // Tốc độ quay theo chiều kim đồng hồ(số thập phân) var rotation = 0.5; // Tốc độ di chuyển (không phải số âm) var speed = 0.9; //Phần bạn không nên sửa chữa// if (!window.addEventListener && !window.attachEvent || !document.createElement) return; msg = msg.split(''); var n = msg.length - 1, a = Math.round(size * diameter * 0.208333), currStep = 20, ymouse = a * circleY + 20, xmouse = a * circleX + 20, y = [], x = [], Y = [], X = [], o = document.createElement('div'), oi = document.createElement('div'), b = document.compatMode && document.compatMode != "BackCompat"? document.documentElement : document.body, mouse = function(e){ e = e || window.event; ymouse = !isNaN(e.pageY)? e.pageY : e.clientY; // y-position xmouse = !isNaN(e.pageX)? e.pageX : e.clientX; // x-position }, makecircle = function(){ // rotation/positioning if(init.nopy){ o.style.top = (b || document.body).scrollTop + 'px'; o.style.left = (b || document.body).scrollLeft + 'px'; }; currStep -= rotation; for (var d, i = n; i > -1; --i){ // makes the circle d = document.getElementById('iemsg' + i).style; d.top = Math.round(y[i] + a * Math.sin((currStep + i) / letter_spacing) * circleY - 15) + 'px'; d.left = Math.round(x[i] + a * Math.cos((currStep + i) / letter_spacing) * circleX) + 'px'; }; }, drag = function(){ // makes the resistance y[0] = Y[0] += (ymouse - Y[0]) * speed; x[0] = X[0] += (xmouse - 20 - X[0]) * speed; for (var i = n; i > 0; --i){ y[i] = Y[i] += (y[i-1] - Y[i]) * speed; x[i] = X[i] += (x[i-1] - X[i]) * speed; }; makecircle(); }, init = function(){ // appends message divs, & sets initial values for positioning arrays if(!isNaN(window.pageYOffset)){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; } else init.nopy = true; for (var d, i = n; i > -1; --i){ d = document.createElement('div'); d.id = 'iemsg' + i; d.style.height = d.style.width = a + 'px'; d.appendChild(document.createTextNode(msg[i])); oi.appendChild(d); y[i] = x[i] = Y[i] = X[i] = 0; }; o.appendChild(oi); document.body.appendChild(o); setInterval(drag, 25); }, ascroll = function(){ ymouse += window.pageYOffset; xmouse += window.pageXOffset; window.removeEventListener('scroll', ascroll, false); }; o.id = 'outerCircleText'; o.style.fontSize = size + 'px'; if (window.addEventListener){ window.addEventListener('load', init, false); document.addEventListener('mouseover', mouse, false); document.addEventListener('mousemove', mouse, false); if (/Apple/.test(navigator.vendor)) window.addEventListener('scroll', ascroll, false); } else if (window.attachEvent){ window.attachEvent('onload', init); document.attachEvent('onmousemove', mouse); }; })();
Nếu muốn hiện hiệu ứng thì bạn kết nối file js của bạn với wap với lệnh sau:
<script type="text/javascript" charset="UTF-8" laguage="JavaScript" src="Link file js của bạn " ></script>

Tạo hiệu ứng chuột với css
Để tạo hiệu ứng chuột với css bạn copy code sau:

body a:hover { text-decoration: underline; color:red; background-position: bottom bottom; cursor : url("http://thantienvxp.xtgem.com/img/cursor/link_1.png"), progress; } textarea { cursor: url("http://thantienvxp.xtgem.com/img/cursor/link_1.png"), progress; } select { border-width: 2 2 2 2px; color: #000000; padding: 1 1 1 1px; cursor: url("http://thantienvxp.xtgem.com/img/cursor/link_1.png"), progress; } option { cursor: url("http://thantienvxp.xtgem.com/img/cursor/link_1.png"), progress; } option:focus,option:hover { cursor: url("http://thantienvxp.xtgem.com/img/cursor/link_1.png"), progress; } input[type="submit"]:hover {cursor: url("http://thantienvxp.xtgem.com/img/cursor/link_1.png"), progress; } html { cursor: url("http://thantienvxp.xtgem.com/img/cursor/bt.png"), progress;}

Hoặc bạn cũng có thể copy code css sau:

{ text-decoration: underline; color:red; background-position: bottom bottom; cursor : url("http://thantienvxp.xtgem.com/img/cursor/link.cur"), progress; } textarea { cursor: url("http://thantienvxp.xtgem.com/img/cursor/link.cur"), progress; } select { border-width: 2 2 2 2px; color: #000000; padding: 1 1 1 1px; cursor: url("http://thantienvxp.xtgem.com/img/cursor/link.cur"), progress; } option { cursor: url("http://thantienvxp.xtgem.com/img/cursor/link.cur"), progress; } option:focus,option:hover { cursor: url("http://thantienvxp.xtgem.com/img/cursor/link.cur"), progress; } input[type="submit"]:hover {cursor: url("http://thantienvxp.xtgem.com/img/cursor/link.cur"), progress; } html { cursor: url("http://thantienvxp.xtgem.com/img/cursor/chuot.cur"), progress;}

Một lưu ý nhỏ là các hiệu ứng chuột chỉ phù hợp với máy tính và smartphone có hỗ trợ thôi nha!