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

8 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. 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
  6. Là một cửa hàng thương hiệu – an toàn. có nhiều năm kinh nghiệm trong các lĩnh vực tổn phí. Đa Minh Tân luôn đặt “Lời ích người sử dụng khi vay tiền lên hàng đầu”. Sau khoáng đãng năm phát triễn nghiên cứu giúp. thừa nhận diện được sự phiền phức cùng cách thức rượm rà khi vay tiền ngay hiện tại. bắt buộc Đa Minh Tân nêu ra phương pháp new mê say có khuynh hướng bắt đầu Vay tiền mặt – sở hữu tiền cấp tốc trong ngày.

    1. phương thức vay đơn thuần nhất lúc này
    nên làm giấy tờ ko nên giám định không ngăn nắp. bởi tài xế hoặc Hộ khẩu sẽ vay được tiền.
    2. Thời gian giải ngân tiền mặt nhanh nhất hiện thời
    ký thông qua đại dương sơ trong 15 – 30 phút. Giải ngân tiền bên sau 1/2 tiếng – cho 2h giả dụ khiến bản thảo trước 21H tối. chúng tôi cam kết giải quyết trong ngày. Ko để tồn sang hôm sau.
    3. Vay toền online miễn sao chúng ta có mạng internet
    mọi lúc các địa điểm. cẩn thận website. ảnh viện đang cùng với chuyên viên tham vấn nhiều năm kinh nghiệm trợ giúp chúng ta. chúng ta không luôn phải đi xa mong chờ. Chỉ nhu yếu nhấc máy cùng Gọi. sẽ vay được tiền.
    4. chẳng phải tài sản đảm bảo, không phải minh chứng các khoản thu nhập
    Chỉ tất yêu phương thức mộc mạc cũng như trên. chúng tôi không phải ai bảo lãnh khoản vay cho bạn. quan trọng vô cùng yên tâm chưa làm cho phiền tổ ấm bạn.

    vay tien nhanh, vay tiền nhanh, vay tiền online, vay tien online, vay tien, vay tiền, vay tien, vay tín chấp, vay tin chap, vay tiền nhanh nhất, vay tien nhanh online, vay tiền nhanh online, vay tiền online nhanh, vvay tien online nhanh,
    vay tien nhanh nhat,

    Trả lờiXóa
  7. "Buy products related to medical textbooks for doctors and see what customers say ... But there is the online version that is very good, and eliminate that problem
    medical book pdf
    medical book free pdf
    free download medical
    medical book pdf
    free medical book pdf"

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