页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 图象特效 → 正文内容

图片向上滚动

发布：dxy 字体：[增加减小] 类型：转载

点击运行可以看到效果:

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

<img src=http://www.sjz315.org/images/xxdt/2.jpg width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/3.jpg width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/4.jpg width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/5.jpg width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/6.jpg width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/7.jpg width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/1.jpg width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/11.gif width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/1r.gif width=220 height=150 border=0>

<img src=http://www.sjz315.org/images/xxdt/1t.gif width=220 height=150 border=0>

</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 全选提示:你可先修改部分代码,再按运行]

Tags：图片向上滚动

浏览次数：载入中... 打印本文关闭本文返回首页

0

上一篇文章：奇妙的Javascript图片放大镜
下一篇文章：动感超强的JS图片轮换特效

·在百度中搜索关于“图片向上滚动”相关内容
·在谷歌中搜索关于“图片向上滚动”相关内容

文章评论

共有位脚本之家网友发表了评论我来说两句

同类文章

最近更新

热点排行