首页  |  精品网站  |  原创作品秀   |  艺术设计  |  网络学院  |  信息中心  |  站内搜索  |  求职招聘  |  建站资源  |  服装网站  |  编程开发 |  设计论坛 
  平面设计 画册 VI欣赏 包装 CG-插画   酷站 个人网页 商业网站   Alexa排名 CSS 建站资源 下载专区 JS特效 品牌服装 服装院校   专题欣赏 SEO 图标欣赏
域名注册 虚拟主机 广州网站建设 广州网页设计 IDC赞助 设计资源下载 虚拟主机 域名注册 品牌网站建设 服装品牌网站建设 广告服务 网站推广 娱乐
当前位置:首 页 >> 网络学院 >> Dreamweaver ※ FrontPage >> 实现表格横向滚动效果

实现表格横向滚动效果

来源:http://www.cnwebshow.com 作者:网页设计秀 被读235次

中资源
转载请注明出处-中国设计秀-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>

转载请注明出处-中国设计秀-cnwebshow.com



投稿 】【对本文进行评论】 【字体: 】【发布于2005-10-13 21:49】

相关专题:暂无相关专题

上一篇:CSS层叠样式表 (基础篇)   下一篇: Dreamweaver制作网页幻灯片效果
 认证LOGO下载
     
Copyright © 2005-2007 中国设计秀_网页设计教程_优秀网页设计欣赏_平面设计欣赏 All Right Reserved.
做最专业的设计服务网站,秀出自我,秀出精彩!中国设计秀,秀---无处不在!!
QQ:54292427  8208442 MSN:kingvisual#hotmail.com 交流群:9107036 3848215 8850631
粤ICP备05067046号 RSS