18th

11.08

Javascript脚本:scrollTo()方法实现滚动效果

No CommentJavascript脚本cngothic

Javascript脚本:scrollTo()方法实现滚动效果
scrollTo()方法:意思是滚动到指定坐标。
scrollBy()方法:意思是滚动到指定像素。
一篇介绍：scrollBy()方法
与scrollBy()意思上有些区别但直到的效果还是一样的。
看scrollTo()方法示例：

  1. <html>
  2.     <head><title>使用scrollTo()方法滚动文档内容 /title>
  3.     <script language="JavaScript">
  4.         <!--
  5.         winObj=window.open("http://www.cngothic.com","mypic",
  6.        "width=250,height=192,resizable=no");  // 打开一个新窗口，显示一个包含图像的HTML页面
  7.         winObj.moveTo(0, 0); //将新窗口移动到屏幕的左上角
  8.         winObj.focus();  //让新窗口显示在其他窗口前面
  9.         var pixelpos=0;  //记录图像的当前显示位置（x坐标）
  10.         var ImgWidth=640;  //设置图像宽度
  11.         var pixelstep = 1;  //设置文档内容滚动速度
  12.         var timeout;
  13.         function startScroll(){
  14.           if (pixelpos <= (ImgWidth - 250)){  //当文档内容未滚动到窗口边界时
  15.              pixelpos += pixelstep; 
  16.              winObj.scrollTo(pixelpos,0);   //将文档滚动到x方向新的位置
  17.           }
  18.           else{  //当文档内容滚动到窗口边界时，将当前图像显示位置置0，重新显示图像
  19.             pixelpos=0;
  20.           }
  21.           timeout=setTimeout("startScroll()",2);  //每隔20毫秒调用一次本函数
  22.        }
  23.        function stopHere(){
  24.           clearTimeout(timeout);  // 通过停止计时器来终止文档内容滚动
  25.        }
  26.        function closeWindow(){  //关闭新创建的窗口
  27.           winObj.close(); 
  28.        }
  29.        //  -->
  30.     </script>
  31.     </head>
  32.     <body bgColor="lightgreen">
  33.     <font face="宋体" size=4 >
  34.     <b><br><center>
  35.     滚动新打开窗口的内容
  36.     <form>
  37.        <input type="button"
  38.           value="开始滚动"
  39.           onClick="startScroll();">
  40.        <input type="button"
  41.           value="停止滚动"
  42.           onClick="stopHere();">
  43.     </form>
  44.     <font size=-1>
  45.     <p>当希望关闭新打开窗口时，请单击下面的链接 <br>
  46.     <a href="javascript:closeWindow()">关闭新打开窗口 </a></h3>
  47.     </body>
  48.     </html>

, ,