Sau đó chúng ta upload ảnh gif này lên thư viện violet hoặc lên hosting của mình và lấy link ảnh này chèn vào đoạn mã code js dưới đây và Save lại với đuôi .js (ở đây tôi đặt tên là ho[r]
Trang 1Code làm hoa, lá rơi trong trang.
Ngày Tết đến rối, để trang trí website thêm phần hấp dẫn, ai cũng muốn có những bông hoa mai, hoa đào bay bay Tôi xin hướng dẫn các bạn cách chèn code hoa, là rơi vào trong trang một cách
dễ dàng
Trước tiên chúng ta làm 1 vài bông hoa (hay lá) không nền đẹp phù hợp ý thích bằng PM photoshop sau đó chúng ta tạo ảnh động cho hoa (lá) và lưu lại dạng file gif (Trong Photoshop thì Chọn File – Seve for web & device – Save )
Sau đó chúng ta upload ảnh gif này lên thư viện violet hoặc lên hosting của mình và lấy link ảnh này chèn vào đoạn mã code js dưới đây và Save lại với đuôi js (ở đây tôi đặt tên là hoadao.js)
Cuối cùng, upload nó lên hosting của mình Vậy là hoàn thành phần tạo code
Chỉ còn lại việc đưa nó lên website của mình để ngắm thôi
Chúc các bạn năm mới trang trí nhà cửa thật đẹp để đón Xuân nhé!
Code đưa lên website :
<script type="text/javascript" src="link file.js"></script>
Mã Code file hoadao.js ở dưới đây
var pictureSrc ="http://d2.violet.vn/uploads/resources/601/hoamaidao.gif "; //the location of the snowflakes
var pictureWidth = 40; //the width of the snowflakes
var pictureHeight = 40; //the height of the snowflakes
var numFlakes = 5; //the number of snowflakes
var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms)
var lrFlakes = 10; //the speed that the snowflakes should swing from side to side
if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; }
//draw the snowflakes
for( var x = 0; x < numFlakes; x++ ) {
if( document.layers ) { //releave NS4 bug
document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'"
height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>');
} else {
document.write('<div style="position:absolute;"id="snFlkDiv'+x+'"><img
src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'"
alt="*"border="0"></div>');
}
}
//calculate initial positions (in portions of browser window size)
var xcoords = new Array(), ycoords = new Array(), snFlkTemp;
for( var x = 0; x < numFlakes; x++ ) {
xcoords[x] = ( x + 1 ) / ( numFlakes + 1 );
do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() );
} while( typeof( ycoords[snFlkTemp] ) == 'number' );
ycoords[snFlkTemp] = x / numFlakes;
}
Trang 2//now animate
function flakeFall() {
if( !getRefToDivNest('snFlkDiv0') ) { return; }
var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0;
//find screen settings for all variations doing this every time allows for resizing and scrolling if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else {
if( document.documentElement && (document.documentElement.clientWidth ||
document.documentElement.clientHeight ) ) {
scrWidth = document.documentElement.clientWidth; scrHeight =
document.documentElement.clientHeight; } else {
if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } }
if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else {
if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight
= document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else {
if(document.documentElement && (document.documentElement.scrollLeft ||
document.documentElement.scrollTop ) ) { scrollHeight
=document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } }
}
//move the snowflakes to their new position
for( var x = 0; x < numFlakes; x++ ) {
if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; }
var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; }
if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0;
divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix;
divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes *
ycoords[x]) ) ) ) + scrollWidth ) + oPix;
ycoords[x] += downSpeed;
}
}
//DHTML handlers
function getRefToDivNest(divName) {
if( document.layers ) { return document.layers[divName]; } //NS4
if( document[divName] ) { return document[divName]; } //NS4 also
if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera)
if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4
return false;
}
window.setInterval('flakeFall();',100);
Trang 3còn đây là code chautuan đã làm như ở trên các thầy cô copi dán thử vào khối chức năng nhé xem sao
<script type="text/javascript" src=
"http://users10.jabry.com/chautuanlt/Hoadaomai.js">
</script>