ธันวาคม 15, 2019, 03:57:57 PM *
ยินดีต้อนรับคุณ, บุคคลไม่รู้ว่าใคร กรุณา เข้าสู่ระบบ หรือ ลงทะเบียน

เข้าสู่ระบบด้วยชื่อผู้ใช้ รหัสผ่าน และระยะเวลาในเซสชั่น
หน้า: [1]   ลงล่าง
  พิมพ์  
เทคนิคทำเอฟเฟกต์โหลดหน้าจอรันภาพขึ้นมาทีละบล๊อก  (อ่าน 1961 ครั้ง)
ไร้คอนเซปต์ ******* ออฟไลน์ ออฟไลน์ เพศ: ชาย พลังสะสม: 18055
กุมภาพันธ์ 26, 2007, 10:16:42 PM
ผลงาน: 1730
อาร์ตทูบี
Administrator
ไร้คอนเซปต์
*******

ผลงาน: 1730
ออฟไลน์ ออฟไลน์

เพศ: ชาย
พลังสะสม: 18055


เว็บไซต์
« เมื่อ: กุมภาพันธ์ 26, 2007, 10:16:42 PM »
 link ดูตัวอย่างตรงนี้ครับ
http://poj.be2hand.com/article/awaybox_sample.html



ทำเอฟเฟกต์โหลดหน้าจอรันภาพขึ้นมาทีละบล๊อก 
เพิ่มลูกเล่นเล็กๆ เวลาคลิกเปิดหน้าเว็บครับ  สำหรับบทความนี้จะเป็นการทำให้เวลาคลิกเปิดหน้าเว็บ ให้รันภาพเป็นบล๊อกขึ้นมาทีละบล๊อกจนครบหน้าจอ
ที่มาของทิปดีๆ thaimisc ครับ เพื่อนๆลองเข้าไปหาความรู้เพิ่มเติมได้ที่เว็บ thaimisc.com

1.นำโค้ดส่วนนี้ไปใส่ไว้ใน <head>....</head> ครับ
โค๊ด:
<style>
<!--
.intro{
position:absolute;
left:0;
top:0;
layer-background-color:green;
background-color:green;
border:0.1px solid green;
z-index:10;
}
-->
</style>

2.นำโค้ดส่วนนี้ไปใส่ไว้ใน <body>....</body> ครับ
โค๊ด:
<div id="p1" class="intro"></div>
<div id="p2" class="intro"></div>
<div id="p3" class="intro"></div>
<div id="p4" class="intro"></div>
<div id="p5" class="intro"></div>
<div id="p6" class="intro"></div>
<div id="p7" class="intro"></div>
<div id="p8" class="intro"></div>
<div id="p9" class="intro"></div>
<div id="p10" class="intro"></div>
<div id="p11" class="intro"></div>
<div id="p12" class="intro"></div>
<div id="p13" class="intro"></div>
<div id="p14" class="intro"></div>
<div id="p15" class="intro"></div>
<div id="p16" class="intro"></div>
<div id="p17" class="intro"></div>
<div id="p18" class="intro"></div>
<div id="p19" class="intro"></div>
<div id="p20" class="intro"></div>
<div id="p21" class="intro"></div>
<div id="p22" class="intro"></div>
<div id="p23" class="intro"></div>
<div id="p24" class="intro"></div>
<div id="p25" class="intro"></div>
<script>

/*
Boxing-away Script- By Dynamic Drive (www.dynamicdrive.com)
For full source code, 100's more free DHTML scripts, and TOS,
visit http://www.dynamicdrive.com
*/


var espeed=300
var counter=1
var temp=new Array()
var temp2=new Array()

var ns4=document.layers?1:0
var ie4=document.all?1:0
var ns6=document.getElementById&&!document.all?1:0


////////Code for Netscape NS 4+////
if (ns4){
for (i=1;i<=25;i++){
temp[i]=eval("document.p"+i+".clip")
temp2[i]=eval("document.p"+i)
temp[i].width=window.innerWidth/5
temp[i].height=window.innerHeight/5
}

for (i=1;i<=5;i++)
temp2[i].left=(i-1)*temp[i].width

for (i=6;i<=10;i++){
temp2[i].left=(i-6)*temp[i].width
temp2[i].top=temp[i].height
}

for (i=11;i<=15;i++){
temp2[i].left=(i-11)*temp[i].width
temp2[i].top=2*temp[i].height
}

for (i=16;i<=20;i++){
temp2[i].left=(i-16)*temp[i].width
temp2[i].top=3*temp[i].height
}

for (i=21;i<=25;i++){
temp2[i].left=(i-21)*temp[i].width
temp2[i].top=4*temp[i].height
}

}

function erasecontainerns(){
window.scrollTo(0,0)
var whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
if (temp2[whichcontainer].visibility!="hide")
temp2[whichcontainer].visibility="hide"
else{
while (temp2[whichcontainer].visibility=="hide"){
whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
}
temp2[whichcontainer].visibility="hide"
}

if (counter==25)
clearInterval(beginerase)

counter++
espeed-=10

}


////////End code for NS 4+////////


///////////Code for IE 4+ and NS6/////////

if (ie4||ns6){
var containerwidth=ns6?parseInt(window.innerWidth)/5-3 : parseInt(document.body.clientWidth/5)
var containerheight=ns6?parseInt(window.innerHeight)/5-2 : parseInt(document.body.offsetHeight/5)

for (i=1;i<=25;i++){
temp[i]=ns6?document.getElementById("p"+i).style : eval("document.all.p"+i+".style")
temp[i].width=containerwidth
temp[i].height=containerheight
}

for (i=1;i<=5;i++)
temp[i].left=(i-1)*containerwidth

for (i=6;i<=10;i++){
temp[i].left=(i-6)*containerwidth
temp[i].top=containerheight
}

for (i=11;i<=15;i++){
temp[i].left=(i-11)*containerwidth
temp[i].top=2*containerheight
}

for (i=16;i<=20;i++){
temp[i].left=(i-16)*containerwidth
temp[i].top=3*containerheight
}

for (i=21;i<=25;i++){
temp[i].left=(i-21)*containerwidth
temp[i].top=4*containerheight
}
}

function erasecontainerie(){
window.scrollTo(0,0)
var whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
if (temp[whichcontainer].visibility!="hidden")
temp[whichcontainer].visibility="hidden"
else{
while (temp[whichcontainer].visibility=="hidden"){
whichcontainer=Math.round(Math.random()*25)
if (whichcontainer==0)
whichcontainer=1
}
temp[whichcontainer].visibility="hidden"
}

if (counter==25){
clearInterval(beginerase)
if (ns6){
for (i=1;i<26;i++)
temp[i].display="none"
}
}
counter++
espeed-=10

}

/////////End IE 4+ code////////

if (ns4)
beginerase=setInterval("erasecontainerns()",espeed)
else if (ie4||ns6){
beginerase=setInterval("erasecontainerie()",espeed)
}


</script>

 
 



รับจดโดเมน รับฝาก-ดูแลเว็บไซต์ ทำเว็บ เขียนโปรแกรม โฆษณา Google Adwords
พูดคุยเป็นการส่วนตัวคลิ๊กเลยครับ


ขั้น 3 : ซุปเปอร์สตาร์ *** ออฟไลน์ ออฟไลน์ พลังสะสม: 175
มีนาคม 14, 2007, 03:56:49 PM
ผลงาน: 14
Mk-Work
แฟนคลับ
ขั้น 3 : ซุปเปอร์สตาร์
***

ผลงาน: 14
ออฟไลน์ ออฟไลน์

พลังสะสม: 175

« ตอบ #1 เมื่อ: มีนาคม 14, 2007, 03:56:49 PM »
แล้วถ้าจะเปลี่ยนสีจะทำไงหรอค่ะ หรือว่าอยากจะให้เป็นรูปแล้วค่อยๆๆหายไปที่ละบล็อคแบบนี้จะทำไงหรอค่ะ
aji1420
มีนาคม 14, 2007, 07:18:22 PM
ผลงาน: 0
aji1420
บุคคลไม่รู้ว่าใคร
« ตอบ #2 เมื่อ: มีนาคม 14, 2007, 07:18:22 PM »
<div id="p1" class="intro"></div>
medic
เมษายน 06, 2007, 06:28:45 PM
ผลงาน: 0
medic
บุคคลไม่รู้ว่าใคร
« ตอบ #3 เมื่อ: เมษายน 06, 2007, 06:28:45 PM »
ขอบคุณครับ เก่งจังครับ  ยกนิ้วให้เลย
หน้า: [1]   ขึ้นบน
  พิมพ์  
 
กระโดดไป:  

Powered by MySQL Powered by PHP Valid XHTML 1.0! Valid CSS!