Thứ Hai, 20 tháng 2, 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

7 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
  6. Giám đốc cáng đáng Nghiên cứu CBRE tại Singapore và khu vực Đông Nam Á, Desmond Sim nhận định: “Hiện vẫn còn phổ thông rào cản và tránh vận tải hàng ra Bắc Kạn mà các nước trong khối ASEAN cần phải vượt qua”. trước hết là khả năng điều hành yếu kém của van tai hang ra Thanh Hoa, nguồn cung sôi động có thể dẫn đến biến động giá thuê mặt bằng vận chuyển hàng về Bắc Giang.

    Điều này sẽ gây bê trệ hoặc thậm chí ngăn cản việc mở mang của các nhà bán sỉ. Thứ hai là việc thiếu nguồn lao động có tay nghề cao cũng là thách thức, có thể gây chướng ngại trong việc van tai hang di Ha Noi, van chuyen hang hoa di Bac Ninhvận chuyển hàng hoá đi Cao Bằngvận tải hàng đi Điện Biên Phủ và mở rộng của những nhà sản xuất công nghiệp có giá trị cao.

    Thứ ba là sự chênh lệch lớn về chuyên môn vận chuyển hàng hoá bắc nam giữa những nước thành viên cũng tránh các tác động hăng hái của buộc phải tự do hóa lao động ASEAN.

    Cảm ơn bạn phổ quát nhé.

    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é!