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>

, ,

5th

09.08

Javascript脚本:自动滚屏-setTimeout()-clearTimeout()-scrollBy()

2 CommentsJavascript脚本cngothic

Javascript脚本:自动滚屏效果实例
在阅读文章时.由于文章内容过多.可以使用此方法.可以让网页自动向下滚动来方便阅读.
此篇文章讲到了三个知识点:
setTimeout():在指定的毫秒数后调用函数或计算表达式
clearTimeout():只执行 code 一次.后终止吊.
scrollBy():按照指定的像素值来滚动内容.
看完整JS代码,很简单:

  1. function scrollStar()
  2. {
  3.   if (document.getElementById("checkbox").status == true){
  4.     window.scrollBy(0,1);
  5.     setTimeout("scrollStar()",50);
  6.   }
  7.   else{
  8.     clearTimeout();
  9.   }
  10. }
  11. <input name="" type="checkbox" id="checkbox" value=""  onClick="scrollStar();">

, , , ,