手动控制图片上下滚动js特效

稿源：互联网 2022-07-30 21:47:41 点击： 11043 撤稿纠错

图片上下滚动js脚本，也可以通过点击按钮来滚动图片。

以下讨论的是和控制滚动相关的手动控制图片上下滚动js特效教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
<title>网页特效 js实现手动控制图片上下滚动特效 站长特效网欢迎您。</title>
<style>
*{margin:0;padding:0;border:0;list-style:none;}
body{font:12px Verdana, Geneva, sans-serif;line-height:18px;color:#333;}
a{text-decoration:none;color:#004285;font-size:14px;font-weight:bold;}
a:hover{text-decoration:underline;color:#C33;}
.www_zzjs_net{border:1px solid #dedede;width:282px;margin-bottom:5px;position:relative;background:#fff;}
#qy a{font-size:12px;}
h5 span a{font-size:12px;font-weight:normal;color:#333;}
h5{padding:0 10px;font-size:14px;height:30px;line-height:30px;background:url() left center repeat-x;border-bottom:1px solid #dedede;}
span{float:right;}
</style>
<style>
#btm_zzjs{position:absolute;right:0;top:60px;width:12px;height:43px;background:url(/img/2010041716281352947.gif) no-repeat;overflow:hidden;}
#btm_zzjs a{display:block;height:22px;}
#btm_zzjs a#zzjs_up:hover{background:url(/img/2010041716281352947.gif) -13px top no-repeat;}
#btm_zzjs a#zzjs_dw:hover{background:url(/img/2010041716281352947.gif) -26px -22px no-repeat;}
</style>
</head>
<body>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div class="www_zzjs_net">
  <h5><span><a href="http://zzjs.net">更多>></a></span>站长特效网专题</h5>
  <div id="qy" style="width:256px;margin:7px 10px 5px;height:94px;overflow:hidden" onMouseOver="qiScrollAmount=0"
onmouseout="qiScrollAmount=2">
    <ul>
      <li id="tab1">
        <table border='0' cellspacing='0' cellpadding='0' width='256px'>
          <tr>
            <td  height='70'><a href="http://www.zzjs.net/"><img  src="/img/20100528063928578.jpg" /></a></td>
          </tr>
          <tr>
            <td  height='24'><span><a href="http://www.zzjs.net/">进入专题</a></span>
              <p><a href="http://www.zzjs.net/">站长特效网一号信息</a></p></td>
          </tr>
          
          <tr>
            <td  height='70'><a href="http://www.zzjs.net/?cat=5"><img  src="/img/2010052806394186.jpg" /></a></td>
          </tr>
          <tr>
            <td  height='24'><span><a href="http://www.zzjs.net/?p=33">进入专题</a></span>
              <p><a href="http://www.zzjs.net/">站长特效网二号信息</a></p></td>
          </tr>
          
          <tr>
            <td  height='70'><a href="http://www.zzjs.net/?p=888.html"><img  src="/img/2010052806394186.jpg" /></a></td>
          </tr>
          <tr>
            <td  height='24'><span><a href="http://www.zzjs.net/?p=888.html">进入专题</a></span>
              <p><a href="http://www.zzjs.net/?p=888.html">站长特效网三号信息</a></p></td>
          </tr>
        </table>
      </li>
      <li id="tab2"></li>
    </ul>
  </div>
  <div id="btm_zzjs"><a id="zzjs_up" onclick="zzjs_up()" href="javascript:;" target="_self"></a><a id="zzjs_dw" onclick="zzjs_dw()" href="javascript:;" target="_self"></a></div>
<script>
var qoMarquee = document.getElementById("qy"); //滚动对象
var tab1 = document.getElementById("tab1");
var tab2 = document.getElementById("tab2");
var qiLineHeight = 94;//单行高度，像素IE
var qiLineCount = 0; //实际行数
var qiScrollAmount = 2; //每次滚动高度，像素（速度）
var speed1=3000;//每次停留时间
var speed2=1;//滚动速度
var num=qoMarquee.getElementsByTagName('img').length;//总数
tab2.innerHTML=tab1.innerHTML;
var alink=document.getElementById('btm_zzjs').getElementsByTagName('a');
for(var i=0;i<alink.length;i++){
 alink[i].onfocus=function(){this.blur();}
}
function run() {
 if(qoMarquee.scrollTop==num*qiLineHeight){qoMarquee.scrollTop=0;window.setTimeout( "run()", speed2 );}//重置并接着滚动
 else{
  qoMarquee.scrollTop +=qiScrollAmount;
  if ( qoMarquee.scrollTop % qiLineHeight == 0 ) {window.setTimeout( "run()", speed1 );}//如果满格等待N秒
  else {window.setTimeout( "run()", speed2 );}//正常滚动
 }
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
function zzjs_up(){
  qiScrollAmount = 0;
  var amount=1;
  if(qoMarquee.scrollTop==num*qiLineHeight) qoMarquee.scrollTop=0;
  qoMarquee.scrollTop +=amount;
  if ( qoMarquee.scrollTop % qiLineHeight == 0 ) {amount=0;window.setTimeout( "qiScrollAmount = 2", speed1 );}
  else window.setTimeout( "zzjs_up()", 1 );
}
function zzjs_dw(){
  qiScrollAmount = 0;
  var amount=1;
  if(qoMarquee.scrollTop==0) qoMarquee.scrollTop=num*qiLineHeight;
  qoMarquee.scrollTop -=amount;
  if ( qoMarquee.scrollTop % qiLineHeight == 0 ) {amount=0;window.setTimeout( "qiScrollAmount = 2", speed1 );}
  else window.setTimeout( "zzjs_dw()", 1 );
}//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。
window.setTimeout( "run()", speed1 );
</script>
</div>
</body>
</html>

关于手动控制图片上下滚动js特效的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010090964547.shtml方便下次再访问哦。

·上一篇： 文本框获取下拉菜单值js脚本
·下一篇： 漂亮title信息显示效果

手动控制图片上下滚动js特效

文章分类LIST >>返回首页

最新游戏

最新新闻