網(wǎng)頁特效代碼模板無憂>網(wǎng)頁特效>圖片特效特效代碼>

一組圖片向上滾屏特效_圖片特效特效

一組圖片成批向上滾屏特效，在新浪、QQ網(wǎng)經(jīng)常會看到這種特效。實際上是運用了Iframe嵌入頁面，也就類似于DIV區(qū)域，這個用的時候盡量改成DIV，IFRAME有很多不太好的地方，希望你喜歡。

<html>
<head>
<title>向上滾屏</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   class="fmfvldt"   id="first2" style="position:absolute;width:'+scrollwidth+';left:0;top:1;">') 
document.write(slideimages[0]) 
document.writeln('</div>') 
document.writeln('<div   class="lsja2m7"   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網(wǎng)經(jīng)常會看到這種特效。
</body>
</html>

所屬頻道：圖片特效特效/更新時間：2012-12-16

[收藏][報錯][返回列表]

相關(guān)圖片特效特效：

一組圖片向上滾屏特效_圖片特效特效

圖片特效特效Rss訂閱特效代碼搜索

圖片特效特效推薦

猜你也喜歡看這些