Thứ Hai, ngày 20 tháng 2 năm 2012

Tạo chữ xoay tròn theo con trỏ chuột

Tình cờ lên mạng, vào blog dunghennessy thấy có một tiền ích rất hay nên mình đã đem về chia sẽ cùng mọi người đây. Với tiện ích này những dòng chữ sẽ xoay tròn theo con trỏ chuột và đi bất cứ nơi nào trên blog khi chuột di chuyển, hiệu ứng này cũng khá mướt.


DEMO                







Đầu tiên, bạn Đăng nhập vào blog >> Chọn Thiết kế >> Thêm tiện ích HTML/Javacript rồi chèn tất cả code dưới đây vào.

<style type="text/css">
/* Circle Text Styles */
#outerCircleText {
/* Optional - DO NOT SET FONT-SIZE HERE, SET IT IN THE SCRIPT */
font-style: italic;
font-weight: bold;
font-family: Times new roman;
color:    
#4AA02C;
/* End Optional */

/* Start Required - Do Not Edit */
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 */
</style>
<script type="text/javascript">
;(function(){

// Your message here (QUOTED STRING)
var msg = "Điền câu bạn muốn hiển thị vào đây";

/* THE REST OF THE EDITABLE VALUES BELOW ARE ALL UNQUOTED NUMBERS */

// Set font's style size for calculating dimensions
// Set to number of desired pixels font size (decimal and negative numbers not allowed)
var size = 15;

// Set both to 1 for plain circle, set one of them to 2 for oval
// Other numbers & decimals can have interesting effects, keep these low (0 to 3)
var circleY = 0.75; var circleX = 2;

// The larger this divisor, the smaller the spaces between letters
// (decimals allowed, not negative numbers)
var letter_spacing = 5;

// The larger this multiplier, the bigger the circle/oval
// (decimals allowed, not negative numbers, some rounding is applied)
var diameter = 10;

// Rotation speed, set it negative if you want it to spin clockwise (decimals allowed)
var rotation = 0.4;

// This is not the rotation speed, its the reaction speed, keep low!
// Set this to 1 or a decimal less than one (decimals allowed, not negative numbers)
var speed = 0.3;

////////////////////// Stop Editing //////////////////////

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);
};

})();
</script>
Bây giờ, bạn có thể thay đổi các dòng lệnh màu đỏ để phù hợp với blog của mình và bấm Lưu lại là xong
Chúc các bạn có "chú chuột Pro" nha

6 nhận xét:

  1. Không xem được DEMO, nó bảo là không được mời.! hjx.

    Trả lờiXóa
  2. Oh, xin lỗi bạn, bây giờ xem được rồi đó nha bạn

    Trả lờiXóa
  3. Cái này làm cho zui thì được chứ để lâu wa nhìn hơi chóng mặt

    Trả lờiXóa
  4. Thủ thuật khá hay, nhưng mình lo nặng blog :(

    Trả lờiXóa
  5. Bạn muốn bán hàng Thái Lan, Hàn Quốc, …Trung Quốc mà chưa tìm được công ty chuyên vận chuyển, gửi hàng từ thái về việt nam , chuyên cung cấp dịch vụ chuyển phát nhanh và vận chuyển hàng hoá 2 chiều Việt Nam Trung Quốc van chuyen hang trung quoc với nhiều năm kinh nghiệm, các đối tác lớn trong nước và quốc tế.
    hiện tại mình cho con bú vậy không biết là cho con bú có nên nhuộm tóc mong các bạn tư vấn giúp. tôi đang có thai được khoảng 3 tuần, vậy bao nhiêu tuần biết trai hay gái chính xác nhất vậy các bạn đang cho con bú có nên dùng kem dưỡng da và sử dụng loại nào là tốt nhất vậy ạ. Dùng thuốc tránh thai hàng ngày như thế nào? là hiệu quả và tốt nhất vậy các mẹ. thương hiệu
    Mattino là một thương hiệu giày dép việt nam xuất khẩu giá rẻ nhất thị trường. Dịch vụ vận chuyển hàng hóa về Đà Nẵng chất lượng uy tín nhất thị trường Việt Nam. hiện nay mình đang cung cấp van chuyen hang di ha noigiá thành phải chăng. mình đang rất cần chỗ cung cấp dịch vụ gửi hàng đi phnompen

    Trả lờiXóa

Mời bạn để lại comment cho bài viết
Nếu có copy bài viết thì bạn nhớ để lại comment thank nhé!