ホームページ >ウェブフロントエンド >jsチュートリアル >图片向上滚动_图象特效

图片向上滚动_图象特效

WBOYオリジナル: 2016-05-16 19:27:40911ブラウズ

<div id="article1" style="width:220; height:150px;">

<img  src="http://www.sjz315.org/images/xxdt/2.jpg"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/3.jpg"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/4.jpg"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/5.jpg"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/6.jpg"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/7.jpg"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/1.jpg"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/11.gif"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/1r.gif"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

<img  src="http://www.sjz315.org/images/xxdt/1t.gif"    style="max-width:90%"  style="max-width:90%" border="0" alt="图片向上滚动_图象特效" >

</div> 
<div id="article2" style="position:absolute;z-index:1;visibility:hidden"></div>

<script> 
articleHeight=150; 
stopscrolla=false; 
article1.scrollTop=0; 
//more javascript from http://www.webjx.com 
with(article1){ 
  style.width=0; 
  style.height=articleHeight; 
  style.overflowX="visible"; 
  style.overflowY="hidden"; 
  noWrap=true; 
  onmouseover=new Function("stopscrolla=true"); 
  onmouseout=new Function("stopscrolla=false"); 
}

preTopa=0; currentTopa=0; stoptimea=0;

function init_srolltext1(){ 
  article2.innerHTML=""; 
  article2.innerHTML+=article1.innerHTML;     
  article1.innerHTML=article2.innerHTML+article2.innerHTML; 
  setInterval("scrollUp1()",50); 
} 
function scrollUp1(){ 
  if(stopscrolla==true) return; 
  currentTopa+=1; 
  if(currentTopa==151) 
  { 
   stoptimea+=1; 
   currentTopa-=1; 
   if(stoptimea==50)  
   { 
    currentTopa=0; 
    stoptimea=0; 
   } 
  } 
  else {    
   preTopa=article1.scrollTop; 
   article1.scrollTop+=1; 
   if(preTopa==article1.scrollTop){ 
     article1.scrollTop=article2.offsetHeight-articleHeight; 
     article1.scrollTop+=1; 
   } 
  }

} 
init_srolltext1(); 
      </script>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：常用参考资料（手册）下载或者链接_javascript技巧次の記事：COOL而实用的动态效果_时间日期

関連記事

続きを見る