Ảnh trượt từ dưới lên [Lưu Trữ] - HOA HỌC TRÒ (Matnauhoctro)

JavaScriptBank

02-02-2010, 09:44 PM

Ảnh sẽ tự động chạy lên xuống rồi chạy lên trong trang web.... chi tiết (http://www.javascriptbank.com/up-down-floating-image.html/vi//) tại JavaScriptBank.com - 2.000+ free JavaScript codes (http://www.javascriptbank.com/)

http://www.javascriptbank.com/javascript.images/image/up-down-floating-image.jpg (http://www.javascriptbank.com/javascript/image/up-down-floating-image/preview/vi/)
Demo: JavaScript Ảnh trượt từ dưới lên (http://www.javascriptbank.com/up-down-floating-image.html/vi/)
| JavaScript Up-down floating image (http://www.javascriptbank.com/up-down-floating-image.html)

Cách cài đặt

Bước 1: Dùng mã JavaScript để cài đặt hiệu ứng
JavaScript

<SCRIPT>
//detecting browser to dynamically write appropriate DIVs/LAYERs
N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)
S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)
M=(navigator.appName.indexOf('Microsoft')!=-1)

Vis=new Array()
Vis[0]=(M||S) ? "hidden" : "hide"
Vis[1]=(M||S) ? "visible" : "show"

function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""

Styl = (M||S) ? "<DIV" : "<LAYER"

if(M||S){
Styl+=" ID="+divId
Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol
Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd
Styl+="'>"
}

if(N){
Styl+=" ID="+divId
Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol
Styl+=" visibility="+Vis[visb]+" z-index="+zInd
Styl+=">"
}
document.writeln(Styl)
}

function EndDiv(){
(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")
}

function PutIt(ID,dX,dY){
if(N){
document.layers[ID].left=dX
document.layers[ID].top=dY
}
if(M){
document.all[ID].style.left=dX
document.all[ID].style.top=dY
}
if(S){
document.getElementById(ID).style.left=dX
document.getElementById(ID).style.top=dY
}
}

function ShowHide(ID,vs){
if(N){
document.layers[ID].visibility=Vis[vs]
}
if(M){
document.all[ID].style.visibility=Vis[vs]
}
if(S){
document.getElementById(ID).style.visibility=Vis[vs]
}
}

function Xof(ID){
if(N){
return document.layers[ID].left
}
if(M){
return document.all[ID].style.left
}
if(S){
return document.getElementById(ID).style.left
}
}

function Yof(ID){
if(N){
return document.layers[ID].top
}
if(M){
return document.all[ID].style.top
}
if(S){
return document.getElementById(ID).style.top
}
}

function Zind(ID,zz){
if(N){
document.layers[ID].zIndex=zz
}
if(M){
document.all[ID].style.zIndex=zz
}
if(S){
document.getElementById(ID).style.zIndex=zz
}
}

function ChangeCol(ID,colrx){
if(M)document.all[ID].style.background=colrx
if(N)document.layers[ID].bgColor=colrx
if(S)document.getElementById(ID).style.background= colrx
}

function DivWrite(IdName,Str) {
if (N){
document.layers[IdName].document.write(Str)
document.layers[IdName].document.close()
}
if(M) document.all[IdName].innerHTML=Str
if(S) document.getElementById(IdName).innerHTML=Str
}
</SCRIPT>

<SCRIPT>
GetDiv('Top',0,0,100,100,'pink',1,0)
document.write("Top Place")
EndDiv()
GetDiv('Bottom',4000,0,100,100,'pink',1,0)
document.write("Bottom Place")
EndDiv()
d=50
y=0

function Scroll(){
y+=d
if(y>=3800)d=-50
if(y<=0)d=50
window.scroll(0,y)
}

setInterval('Scroll()',50)

</SCRIPT>


Bước 2: Đặt mã HTML bên dưới vào phần BODY
HTML

<BODY background="pic191.jpg">
</BODY>


Bước 3: các file cần tải
Files
pic191.jpg (http://javascriptbank.com/javascript/image/pic191.jpg)

Hiệu ứng cùng chức năng
- Chữ cuộn từ dưới lên (http://www.javascriptbank.com/vertical-marquee.html/vi/)
- Chữ chạy từ dưới lên (http://www.javascriptbank.com/text-animator.html/vi/)
- Liên kết di chuyển từ dưới lên (http://www.javascriptbank.com/climbing-links.html/vi/)
Bạn có thể xem thêm nhiều JavaScript khác về Hình ảnh (http://www.javascriptbank.com/javascript/image/vi/)

Tìm các cặp hình giống nhau
(http://www.javascriptbank.com/concentration-smaller-index.html/vi/) - CD-Rom giáo trình SSDG về Web & Lập trình (http://www.javascriptbank.com/forum/cd-rom-giao-trinh-ssdg-ve-web-lap-trinh-t685.html) - Hiệu ứng di chuyển div bằng javascript (http://www.javascriptbank.com/forum/di-chuyen-tag-div-theo-y-thich-t592.html)