• 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

Copyright Mas Bintang | SJUTA IT