• Home
  • Contact

Kênh tư vấn

  • Beranda
  • Profil
  • Jurnal
    • 2000
    • 2001
    • 2002
      • 21 April
      • 22 April
      • 23 April
        • Senin
        • Selasa
        • Rabu
        • Kamis
      • 24 April
      • 25 April
    • 2003
    • 2004
  • Komentar
  • Kontak
Beranda » Thủ thuật Blog » Code tạo hiệu ứng Sao rơi theo trỏ chuột

Code tạo hiệu ứng Sao rơi theo trỏ chuột


Untitled


Giới thiệu: Rà chuột tới đâu, sao rơi lung linh tới đó. Một hiệu ứng có đã khá lâu nhưng dùng vẫn rất đẹp. Đây là hiệu ứng mình rất thích. 

Khuyết điểm duy nhất là không được mượt lắm trên IE. Thêm nữa là: sẽ làm giãn bề rộng hay chiều cao blog nếu ta rà chuột ra biên, hay mép blog.

Theo: http://kenhdaihoc.com/forum/showthread.php?t=2080

CÁCH THỰC HIỆN 

1. Đăng nhập Blogger Dashboard (Bảng điều khiển) 
2. Chọn: Design (Thiết kế) > Edit HTML (Chỉnh sữa HTML) 
3. Không cần đánh dấu chọn ô: Expand Widget Templates (Mở rộng mẫu tiện ích)

4. Chèn script 

Bước 1: Tìm thẻ đóng </head>

- Thêm vào trước nó đoạn mã sau:

<!-- Sao tuyết rơi theo trỏ chuột -->
<script type='text/javascript'>
// <![CDATA[

var colour="#EF6B7B"; // Mã màu sao rơi
var sparkles=80;
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();

window.onload=function() { if (document.getElementById) {

var i, rats, rlef, rdow;

for (var i=0; i<sparkles; i++) {

var rats=createDiv(3, 3);

rats.style.visibility="hidden";

document.body.appendChild(tiny[i]=rats);

starv[i]=0;

tinyv[i]=0;

var rats=createDiv(5, 5);

rats.style.backgroundColor="transparent";

rats.style.visibility="hidden";

var rlef=createDiv(1, 5);

var rdow=createDiv(5, 1);

rats.appendChild(rlef);

rats.appendChild(rdow);

rlef.style.top="2px";

rlef.style.left="0px";

rdow.style.top="0px";

rdow.style.left="2px";

document.body.appendChild(star[i]=rats);}set_width();

sparkle();}}

function sparkle() {var c;

if (x!=ox || y!=oy) {

ox=x;oy=y;

for (c=0; c<sparkles; c++) if (!starv[c]) {

star[c].style.left=(starx[c]=x)+"px";

star[c].style.top=(stary[c]=y)+"px";

star[c].style.clip="rect(0px, 5px, 5px, 0px)";

star[c].style.visibility="visible";

starv[c]=50;

break;}}for (c=0; c<sparkles; c++) {

if (starv[c]) update_star(c);

if (tinyv[c]) update_tiny(c);}

setTimeout("sparkle()", 40);}function update_star(i) {

if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";

if (starv[i]) {

stary[i]+=1+Math.random()*3;

if (stary[i]<shigh+sdown) {

star[i].style.top=stary[i]+"px";

starx[i]+=(i%5-2)/5;

star[i].style.left=starx[i]+"px";}else {

star[i].style.visibility="hidden";

starv[i]=0;

return;}}else {tinyv[i]=50;

tiny[i].style.top=(tinyy[i]=stary[i])+"px";

tiny[i].style.left=(tinyx[i]=starx[i])+"px";

tiny[i].style.width="2px";

tiny[i].style.height="2px";

star[i].style.visibility="hidden";

tiny[i].style.visibility="visible"}}

function update_tiny(i) {

if (--tinyv[i]==25) {

tiny[i].style.width="1px";

tiny[i].style.height="1px";}

if (tinyv[i]) {

tinyy[i]+=1+Math.random()*3;

if (tinyy[i]<shigh+sdown) {

tiny[i].style.top=tinyy[i]+"px";

tinyx[i]+=(i%5-2)/5;

tiny[i].style.left=tinyx[i]+"px";}else {

tiny[i].style.visibility="hidden";

tinyv[i]=0;

return;}}else tiny[i].style.visibility="hidden";}

document.onmousemove=mouse;

function mouse(e) {

set_scroll();

y=(e)?e.pageY:event.y+sdown;

x=(e)?e.pageX:event.x+sleft;}

function set_scroll() {

if (typeof(self.pageYOffset)=="number") {

sdown=self.pageYOffset;

sleft=self.pageXOffset;}

else if (document.body.scrollTop || document.body.scrollLeft) {

sdown=document.body.scrollTop;

sleft=document.body.scrollLeft;}

else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {

sleft=document.documentElement.scrollLeft;

sdown=document.documentElement.scrollTop;}else {sdown=0;sleft=0;}}

window.onresize=set_width;

function set_width() {

if (typeof(self.innerWidth)=="number") {

swide=self.innerWidth;

shigh=self.innerHeight;}

else if (document.documentElement && document.documentElement.clientWidth) {

swide=document.documentElement.clientWidth;

shigh=document.documentElement.clientHeight;}else if (document.body.clientWidth) {

swide=document.body.clientWidth;

shigh=document.body.clientHeight;}}

function createDiv(height, width) {

var div=document.createElement("div");

div.style.position="absolute";

div.style.height=height+"px";

div.style.width=width+"px";

div.style.overflow="hidden";

div.style.backgroundColor=colour;

return (div);}
// ]]>
</script>



Bước 2: Save template. (Lưu mẫu)


Theo: http://kenhdaihoc.com/forum/showthread.php?t=2080
Unknown
Add Comment
Thủ thuật Blog
Thứ Năm, 8 tháng 12, 2011
Tweet
Code tạo hiệu ứng Sao rơi theo trỏ chuột Kênh tư vấn
Published: 2011-12-08T17:43:00-08:00
Title:Code tạo hiệu ứng Sao rơi theo trỏ chuột
Rating: 5 On 22 reviews

Related Articles

Không có nhận xét nào:

Đăng nhận xét

Newer Older Home

Entri Populer

  • Popular Posts
    Khoá luyện thi đại học đảm bảo 2012
    Kết thúc khóa học 2012 trên h0cm@i.vn hiện tại mình đang giữ Khoá luyện thi đại học đảm bảo môn hóa 2012 trên  h0cm@i.vn . Nhưng sẻ không sh...
  • Popular Posts
    Thêm,sửa,xóa,chấp nhận,hủy,thoát trong C# có CSDL
    ĐỀ BÀI Người ta muốn ứng dụng tin học để quản lý nhân sự của 1 doanh nghiệp. Là một lập trình viên, anh (chị) hãy thực hiện các yêu cầu sau ...
  • Popular Posts
    Tổng hợp Thủ thuật blogspot
    Để Blog của bạn đẹp hơn và chuyên nghiệp hơn mình xin giới thiệu các bạn 1 kho theme  cũng như thủ thuật mà mình sưu tầm từ khắp nơi... các ...
  • Popular Posts
    Lazyload Jquery làm mượt ảnh và ảnh sẽ load nhanh hơn
    Giới thiệu:  Kéo tới đâu ảnh mới bắt đầu load tới đó, giảm thời gian tải ảnh. Mặc định blog khi load, sẽ load tất cả các ảnh và thành phần c...
  • Popular Posts
    19 điều cần học để khôn [ Nên đọc ]
    1. Nếu nhắn tin cho người ta mà lâu không thấy người ta trả lời, đừng nhắn nữa.. không có sự chờ đợi thấp hèn đến thế. 2. Nếu không có ai bê...
  • Popular Posts
    Ảnh bìa Facebook Timeline đẹp nhất [P1]
    Ảnh bìa timeline đẹp, ảnh bìa facebook đẹp, ảnh bìa facebook độc đáo, cover đẹp cho facebook,cover đẹp cho timeline, hình cover đẹp, ảnh cov...
  • Ẩn widget tại trang chủ hay trang riêng biệt
    Giới thiệu:  Thủ thuật cho phép ẩn widget (tiện ích) tại trang chủ, trang nhãn, trang lưu trữ, hay một trang riêng biệt nào đó. Tùy theo nhu...
  • Code chèn nền Flash (hoa rơi, tuyết rơi,…) cho blogspot
    Giới thiệu:  Với đoạn code này, blog bạn sẽ có thêm một lớp nền Flash phủ lên bề mặt blog, hoặc nằm ẩn dưới nền blog chính. Chức năng chủ yế...
  • Popular Posts
    Tạo dáng cho trỏ chuột với hình ảnh bất kỳcho blogspot
    Giới thiệu: Hiệu ứng JavaScript này cho phép bạn tạo dáng cho con trỏ chuột trên trang web. Điểm đặc biệt của là nó cho phép bạn sử dụng hìn...
  • Popular Posts
    Hướng dẩn tạo Form comment đẹp cho Blogspot
    Giới thiệu:  Như đã biết, form comment mặc định của Blogspot rất đơn điệu và không có nhiều tùy chỉnh. Do vậy, thủ thuật sau sẽ giúp bạn làm...
Copyright Mas Bintang | SJUTA IT