• Страница 1 из 1
  • 1
Эффект открытия страницы в виде "шторки"
Дмитрий Дата: Понедельник, 27.08.2012, 22:22 | Сообщение # 1 | Сообщить о нерабочей теме


Аватар для Дмитрий

Примеры:

1)http://gigabytes2.clan.su/index....0-4

2)http://gigabytes2.clan.su/index....0-6

Вот сам код:

Код
<body><style>       
<!--       
.intro{       
position:absolute;       
left:0;       
top:0;       
layer-background-color:black;       
background-color:black;       
border:0.1px solid black;       
z-index:9;       
}       
-->       
</style>       
<div id="i1" class="intro"></div><div id="i2" class="intro"></div>       
<script language="JavaScript1.2">       

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

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

var speed=20       
var temp=new Array()       
var temp2=new Array()       
if (ns4){       
for (i=1;i<=2;i++){       
temp[i]=eval("document.i"+i+".clip")       
temp2[i]=eval("document.i"+i)       
temp[i].width=window.innerWidth/2       
temp[i].height=window.innerHeight       
temp2[i].left=(i-1)*temp[i].width       
}       
}       
else if (ie4||ns6){       
var clipright=ns6?window.innerWidth/2*0.98:document.body.clientWidth/2,clipleft=0       
for (i=1;i<=2;i++){       
temp[i]=ns6?document.getElementById("i"+i).style:eval("document.all.i"+i+".style")       
temp[i].width=ns6?window.innerWidth/2*0.98:document.body.clientWidth/2       
temp[i].height=ns6?window.innerHeight-1: document.body.offsetHeight       
temp[i].left=(i-1)*parseInt(temp[i].width)       
}       
}       

function openit(){       
window.scrollTo(0,0)       
if (ns4){       
temp[1].right-=speed       
temp[2].left+=speed       
if (temp[2].left>window.innerWidth/2)       
clearInterval(stopit)       
}       
else if (ie4||ns6){       
clipright-=speed       
temp[1].clip="rect(0 "+clipright+" auto 0)"       
clipleft+=speed       
temp[2].clip="rect(0 auto auto "+clipleft+")"       
if (clipright<=0){       
clearInterval(stopit)       
if (ns6){       
temp[1].display="none"       
temp[2].display="none"       
}       
}       
}       
}       

function gogo(){       
stopit=setInterval("openit()",100)       
}       
gogo()       

</script><body>


Вы можете менять цвета сами, в данном коде установлен красный цвет, ниже я приведу пример с черным цветом!

Код
<body><style>       
<!--       
.intro{       
position:absolute;       
left:0;       
top:0;       
layer-background-color:red;       
background-color:red;       
border:0.1px solid red;       
z-index:9;       
}       
-->       
</style>       
<div id="i1" class="intro"></div><div id="i2" class="intro"></div>       
<script language="JavaScript1.2">       

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

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

var speed=20       
var temp=new Array()       
var temp2=new Array()       
if (ns4){       
for (i=1;i<=2;i++){       
temp[i]=eval("document.i"+i+".clip")       
temp2[i]=eval("document.i"+i)       
temp[i].width=window.innerWidth/2       
temp[i].height=window.innerHeight       
temp2[i].left=(i-1)*temp[i].width       
}       
}       
else if (ie4||ns6){       
var clipright=ns6?window.innerWidth/2*0.98:document.body.clientWidth/2,clipleft=0       
for (i=1;i<=2;i++){       
temp[i]=ns6?document.getElementById("i"+i).style:eval("document.all.i"+i+".style")       
temp[i].width=ns6?window.innerWidth/2*0.98:document.body.clientWidth/2       
temp[i].height=ns6?window.innerHeight-1: document.body.offsetHeight       
temp[i].left=(i-1)*parseInt(temp[i].width)       
}       
}       

function openit(){       
window.scrollTo(0,0)       
if (ns4){       
temp[1].right-=speed       
temp[2].left+=speed       
if (temp[2].left>window.innerWidth/2)       
clearInterval(stopit)       
}       
else if (ie4||ns6){       
clipright-=speed       
temp[1].clip="rect(0 "+clipright+" auto 0)"       
clipleft+=speed       
temp[2].clip="rect(0 auto auto "+clipleft+")"       
if (clipright<=0){       
clearInterval(stopit)       
if (ns6){       
temp[1].display="none"       
temp[2].display="none"       
}       
}       
}       
}       

function gogo(){       
stopit=setInterval("openit()",100)       
}       
gogo()       

</script><body>


Так теперь разберемся.

    
Код
layer-background-color:red; >>>> меняем на свой цвет     
background-color:red;     >>>> меняем на свой цвет     
border:0.1px solid red;     >>>> меняем на свой цвет
    

Вот и все!


From Russia With Love!
  • Страница 1 из 1
  • 1
Поиск: