一组图片+文字向上滚屏特效代码

代码简介:

一组图片成批向上滚屏特效,在新浪、QQ网经常会看到这种特效。实际上是运用了Iframe嵌入页面,也就类似于DIV区域,这个用的时候尽量改成DIV,IFRAME有很多不太好的地方,希望你喜欢。

代码内容:

View Code
<html>
<head>
<title>一组图片+文字向上滚屏特效代码 - www.webdm.cn</title>

<SCRIPT language=JavaScript>
var dde_para = new Array();
var dde_aa = new Array();
var dde_url = document.location.href;
var dde_pp = dde_url.split("#")[1];
var jspfile = 1;
var para = null;

//滚动页面的宽
var scrollwidth = 705;

//滚动页面的高
var scrollheight = 120;

if(dde_pp!=null&& dde_pp.length>0){
dde_para
= dde_pp.split("&");}
for(i=0; dde_para!=null&& i<dde_para.length;i++){
dde_aa
= dde_para[i].split("=");
eval(
"var "+dde_aa[0] +"='"+dde_aa[1]+"'");}
var car_num = 5;
var i=1;
//默认滚动时间10秒
var pausebetweenimages=800 * 8;
var slideimages=new Array();
//滚动页面1的URL
slideimages[0]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0

marginheight=0 framespacing=0 frameborder=0 scrolling=no width=
"+scrollwidth+" height="+scrollheight+"

src='http://news.qq.com/photon/08photojdlm1.htm'></iframe>
";
//滚动页面2的URL
slideimages[1]="<iframe border=0 vspace=0 hspace=0 bgcolor=#888888 Name=union163com align=center marginwidth=0

marginheight=0 framespacing=0 frameborder=0 scrolling=no width=
"+scrollwidth+" height="+scrollheight+"

src='http://news.qq.com/photon/08photojdlm2.htm'></iframe>
";
function move1(whichdiv){
tdiv
=eval(whichdiv)
if (tdiv.style.pixelTop>0 && tdiv.style.pixelTop<=car_num){
tdiv.style.pixelTop
=0
setTimeout(
"move1(tdiv)",pausebetweenimages)
setTimeout(
"move2(second2)",pausebetweenimages)
return}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){
tdiv.style.pixelTop
-=car_num
setTimeout(
"move1(tdiv)",50)}
else{
tdiv.style.pixelTop
=scrollheight
tdiv.innerHTML
=slideimages[0]
if (i==slideimages.length-1)
i
=0
else i++}}
function move2(whichdiv){
tdiv2
=eval(whichdiv)
if (tdiv2.style.pixelTop>0 && tdiv2.style.pixelTop<=car_num){
tdiv2.style.pixelTop
=0
setTimeout(
"move2(tdiv2)",pausebetweenimages)
setTimeout(
"move1(first2)",pausebetweenimages)
return}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){
tdiv2.style.pixelTop
-=car_num
setTimeout(
"move2(second2)",50)}
else{
tdiv2.style.pixelTop
=scrollheight
tdiv2.innerHTML
=slideimages[1]
if (i==slideimages.length-1)
i
=0
else i++}}
function conmouse(){car_num=0;}
function cmouseout(){car_num=5;}
function startscroll(){
if (document.all){
move1(first2)
second2.style.top
=scrollheight
}
else if (document.layers){
move1(document.main.document.first)
document.main.document.second.top
=scrollheight+5
document.main.document.second.visibility
='show'}}
//-->
</SCRIPT>
<ILAYER id=main height=" && #123;scrollheight};"
width
=" && #123;scrollwidth};">
<LAYER name="first" left="0"
top
="1" width=" && #123;scrollwidth};" id=first>
<SCRIPT language=JavaScript1.2>
if (document.layers)
document.write(slideimages[
0])
</SCRIPT>
</LAYER>
<LAYER id=second width=" && #123;scrollwidth};" top="0" left="0"
visibility
="hide">
<SCRIPT language=JavaScript1.2>
if (document.layers)
document.write(slideimages[
1])
</SCRIPT>
</LAYER>
</ILAYER>
<script language=JavaScript1.2>
if (document.all){
document.writeln(
'<span id="main2" style="position:relative;width:'+scrollwidth+';height:'+scrollheight

+';overflow:hiden;background-color:#ffffff">')
document.writeln(
'<div onMouseOver="conmouse()" onMouseOut="cmouseout()"

style="position:absolute;width:
'+scrollwidth+';height:'+scrollheight+';clip:rect(0 '+scrollwidth+' '+scrollheight+'

0);left:0;top:0">
')
document.writeln(
'<div id="first2" style="position:absolute;width:'+scrollwidth+';left:0;top:1;">')
document.write(slideimages[
0])
document.writeln(
'</div>')
document.writeln(
'<div id="second2" style="position:absolute;width:'+scrollwidth+';left:0;top:0">')
document.write(slideimages[
1])
document.writeln(
'</div>')
document.writeln(
'</div>')
document.writeln(
'</span>')}
startscroll();
</script>
</head>
<body>
在新浪、QQ网经常会看到这种特效。
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!

</p>

 

代码来自:http://www.webdm.cn/webcode/f2d731fc-5bd2-4d0b-a6ff-509c16d426e0.html

posted @ 2011-12-31 11:51  网页代码站  阅读(573)  评论(0编辑  收藏  举报