最新更新 sitemap 设计搜素
网页设计
国外网站 韩国网站 个人主页 手提袋设计 CSS 网页特效 平面设计 网站设计 Flash CMS技巧 服装网站 php教程 photoshop 画册 服务器选用 数据库 Office
网上家居 虚拟主机 域名注册 云主机 网页设计 客服QQ:8208442

实现表格横向滚动效果

日期:10-13    来源:http://www.cnwebshow.com|    作者:网页设计秀

实现这个效果可有三个页面组成:

观看滚动表格页面可以IFRAME套用两个文件:这两个文件分别是:
一个文件是滚动的内容,另一个是实现滚动效果的JAVASCRIPT代码。

1.首先我先讲一下用IFRAME套用另两个页面的文件主要内容:
套用另两个文件代码是:
--------------------------------------------

<iframe frameborder=no height=50 marginheight=0 marginwidth=0 name=move scrolling=no src="表格页面.htm" width="100%"></iframe>
 <iframe frameborder=no height=0 marginheight=0 marginwidth=0 name=move scrolling=no src="JAVASCRIPT代码页面.htm" width=0></iframe>

注:可以在IFrame外套用用表格来规定显示的大小,或者直接在IFRAME的WIDTH里写明IFRAME的大小

--------------------------------------------


2.我再讲一下需要“滚动的内容——表格页面”的页面:
滚动页面文件就是一般的HTML<table><tr><td></td></tr></table>表格组成,我想不用多说了


3.第三个是最重要的实现滚动效果的“JAVASCRIPT代码页面”:
JavaScript代码是:
--------------------------------------------

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>横向滚动JAVAScript代码页面</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>

<SCRIPT language=JavaScript>
<!--//
 var x = 0; //起始位置
 var y = 0;
 var limdex = 1160; //一个周期的图片总宽度,过了这个宽度即跳现下一周期,这个数来自 028a.htm
 var dest = 0;
 var distance = 0;
 var step = 0;
 var destination = 0;
 var on = true;
function scrollit(destination) {
 step = 2;
 dest = destination;
 if (x<dest & x < limdex){
  while (x<dest) {
   step += (step / 2);
   x += step;
   parent.frames[0].scroll(x,0);
  } 
  if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
  x = dest;
 }
 if (x > dest)  {
  while (x>dest) {
   step += (step / 2);
   if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
   else break;
  }
  if(dest >= 0) { parent.frames[0].scroll(dest,0); }
  x = dest;
 }
 if (x<1) { parent.frames[0].scroll(1,0); x=1 }
 if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
 x = dest;
}

function scrollnow() {
                if (on){
                if (x < limdex & x >= 0 ) {             
                                parent.frames[0].scroll(x,0);
                        x = x + 1;
                        setTimeout('scrollnow()', 8);
                }
                else if (x < 0) {
                        x = limdex;
                        scrollnow();
                }
            else {
                x=0;
                scrollnow();
                }
                }
}
function stopscroll() {
        if (on){
        on = false;
        }
        else {
        on = true;
        scrollnow();
        }
}
function startscroll() { on = true; scrollnow(); }
function stop_start() {
 if (on){ on = false;}else { on = true;scrollnow();}
}
scrollnow();
//-->
</SCRIPT>

<META content="MSHTML 5.00.3813.800" name=GENERATOR></HEAD>
<BODY></BODY></HTML>