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]
(1)Code làm hoa, rơi trang
Ngày Tết đến rối, để trang trí website thêm phần hấp dẫn, muốn có bơng hoa mai, hoa đào bay bay Tôi xin hướng dẫn bạn cách chèn code hoa, rơi vào trang cách dễ dàng
Trước tiên làm vài hoa (hay lá) không đẹp phù hợp ý thích PM photoshop sau tạo ảnh động cho hoa (lá) lưu lại dạng file gif (Trong Photoshop Chọn File – Seve for web & device – Save )
Sau upload ảnh gif lên thư viện violet lên hosting lấy link ảnh chèn vào đoạn mã code js Save lại với đuôi js (ở đặt tên hoadao.js)
Cuối cùng, upload lên hosting Vậy hồn thành phần tạo code Chỉ cịn lại việc đưa lên website để ngắm thơi
Chúc bạn năm 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 đâ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 < ) { 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 + ) / ( numFlakes + );
do { snFlkTemp = Math.round( ( numFlakes - ) * Math.random() ); } while( typeof( ycoords[snFlkTemp] ) == 'number' );
(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 / ) ) + ( ( scrWidth / ( ( numFlakes + ) * ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( * 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;
}
(3)còn code chautuan làm thầy cô copi dán thử vào khối chức xem
<script type="text/javascript" src=