<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="keywords" content="Javascript,Javascript,Javascript,Javascript,Javascript">
<!-- 以下代码是设定此页的超链接样式 -->
<style type="text/css"><!-- A:link {text-decoration: none; color:#000000}
A:visited {text-decoration: none; color: #000000}
A:active {text-decoration: none; color: #FF0000}
A:hover {text-decoration: underline; color: FF0000}
body{font-size=9pt}
TH{FONT-SIZE: 9pt}
TD{ FONT-SIZE: 9pt}
-->
</style>
<style>
<!--
.intro{
position:absolute;
left:0;
top:0;
layer-background-color:red;
background-color:red;
border:0.1px solid red
}
-->
</style>
<title>页面特效--屏幕式左右拉开</title>
</head>
<body bgcolor="#FFFFFF">
<div id="i1" class="intro"></div><div id="i2" class="intro"></div>
<script language="JavaScript1.2">
//尝试改变速度，数值大速度快。
var speed=20
var temp=new Array()
var temp2=new Array()
if (document.layers){
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 (document.all){
var clipright=document.body.clientWidth/2,clipleft=0
for (i=1;i<=2;i++){
temp[i]=eval("document.all.i"+i+".style")
temp[i].width=document.body.clientWidth/2
temp[i].height=document.body.offsetHeight
temp[i].left=(i-1)*parseInt(temp[i].width)
}
}
function openit(){
window.scrollTo(0,0)
if (document.layers){
temp[1].right-=speed
temp[2].left+=speed
if (temp[2].left>window.innerWidth/2)
clearInterval(stopit)
}
else if (document.all){
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)
}
}
function gogo(){
stopit=setInterval("openit()",100)
}
gogo()
</script>
<table border="1" width="100%" cellpadding="0">
<tr>
<td width="12%" valign="top" align="center"><p align="right">名称：</td>
<td width="67%" valign="top">
<p align="center">页面特效--屏幕式左右拉开</p>
</td>
</tr>
<tr>
<td width="12%" valign="top" align="center"><p align="right">实例：
</p>
</td>
<td width="67%" valign="top">进入本页面时看到的效果</td>
</tr>
<tr>
<td width="12%" valign="top" align="right">教程：</td>
<td width="67%" valign="top"><br>
第一步：将下面代码加入<head></head>之间
<p><style><br>
<!--<br>
.intro{<br>
position:absolute;<br>
left:0;<br>
top:0;<br>
layer-background-color:red;<br>
background-color:red;<br>
border:0.1px solid red<br>
}<br>
--><br>
</style></p>
<p>第二步：将下面代码紧接在<body>语句后面</p>
<p><div id="i1" class="intro"></div><div id="i2" class="intro"></div><br>
<script language="JavaScript1.2"><br>
//尝试改变速度，数值大速度快。<br>
var speed=20<br>
var temp=new Array()<br>
var temp2=new Array()<br>
if (document.layers){<br>
for (i=1;i<=2;i++){<br>
temp[i]=eval("document.i"+i+".clip")<br>
temp2[i]=eval("document.i"+i)<br>
temp[i].width=window.innerWidth/2<br>
temp[i].height=window.innerHeight<br>
temp2[i].left=(i-1)*temp[i].width<br>
}<br>
}<br>
else if (document.all){<br>
var clipright=document.body.clientWidth/2,clipleft=0<br>
for (i=1;i<=2;i++){<br>
temp[i]=eval("document.all.i"+i+".style")<br>
temp[i].width=document.body.clientWidth/2<br>
temp[i].height=document.body.offsetHeight<br>
temp[i].left=(i-1)*parseInt(temp[i].width)<br>
}<br>
}<br>
<br>
<br>
function openit(){<br>
window.scrollTo(0,0)<br>
if (document.layers){<br>
temp[1].right-=speed<br>
temp[2].left+=speed<br>
if (temp[2].left>window.innerWidth/2)<br>
clearInterval(stopit)<br>
}<br>
else if (document.all){<br>
clipright-=speed<br>
temp[1].clip="rect(0 "+clipright+" auto 0)"<br>
clipleft+=speed<br>
temp[2].clip="rect(0 auto auto "+clipleft+")"<br>
if (clipright<=0)<br>
clearInterval(stopit)<br>
}<br>
}<br>
<br>
function gogo(){<br>
stopit=setInterval("openit()",100)<br>
}<br>
gogo()<br>
<br>
</script><br>
</p>
<p> </p>
</td>
</tr>
<tr>
<td width="12%" valign="top" align="right">说明：</td>
<td width="67%" valign="top">其中色彩，速度的数值可以自己修改。</td>
</tr>
</table>
</body>
</html>
IE8以下适用 |
收藏本站