2008年12月25日

Apache2.2+Php5+MySQL+GD+libxslt+jpeg6+libpng+Curl+freetype的安装

tong | 24 六月, 2008 23:03

.先找到 apache php mysql  源码包下载的URL地址
http://www.apache.org
http://www.php.net
http://www.mysql.com


.安装apache
1)解压源码包
   # tar -zxf httpd-2.2.9.tar.gz
   # cd httpd-2.2.9

2)修改worker.c (worker是2.0 中全新的支持多线程和多进程混合模型的MPM)
  
   # vi server/mpm/worker/worker.c

   找到下面几行,并改成如下的数值,其目的是在源码中修改apache可支持的最大线程数和最大客户端数目。

   # define DEFAULT_SERVER_LIMIT 256
   # define MAX_SERVER_LIMIT 40000
   # define DEFAULT_THREAD_LIMIT 256
   # define MAX_THREAD_LIMIT 40000
PS: 如果不用–with-mpm显式指定某种MPM的话,那么prefork就是Unix平台上的缺省MPM.它所采用的方式是预派生子进程的方式,这事实上也就是Apache1.3中所采用的模式。它本身并没有使用到线程,2.0使用它是为了与1.3保持兼容性,另一方面,prefork用单独的子进程来处理不同的请求,进程之间是彼此独立的,这也使得它成为最稳定的MPM.对比prefork,worker是2.0 中全新的支持多线程和多进程混合模型的MPM。由于使用线程来处理请求,所以,可以处理相对海量的请求,而系统资源的开销小于基于进程的服务器。但是,它也使用了多进程,每个进程又生成多个线程,以获得基于进程的服务器的稳定性。笔者认为这种MPM的工作方式将是Apache 2.0以后的发展趋势。 

3) 编译和安装 apr
   # cd srclib/apr
   # ./configure –prefix=/usr/local/apr
   # make
   # make install

4) 编译和安装 apr-util
   # cd srclib/apr-util
   # ./configure –prefix=/usr/local/apr-util –with-apr=/usr/local/apr
   # make
   # make install

5) 更改2Glogs

   # export CFLAGS="-O2 -D_FILE_OFFSET_BITS=64 -D_LARGEFILE_SOURCE -D_LARGEFILE64_SOURCE"

6)配置apache安装信息
   # CHOST="i686-pc-linux-gnu"  \
   # CFLAGS="-march=pentium4 -O3 -pipe -fomit-frame-pointer"  \
   # CXXFLAGS="-march=pentium4 -O3 -pipe -fomit-frame-pointer"
       #./configure  \ (配置源代码树)
       –prefix=/usr/local/apache2 \ (体系无关文件的顶级安装目录PREFIX ,也就Apache的安装目录)
       –enable-mods-shared=all \ (编译所有so文件,去掉不经常用的模块,方便日后升级)
       –enable-so \  (Apache以动态共享对象(DSO)编译,为了能以Apache模块使PHP动态载入)
       –enable-deflate \
       –enable-cache \ (支持缓存)
       –enable-disk-cache \ (支持文件缓存)
       –enable-mem-cache \ (支持记忆缓存)
       –enable-file-cache \ (支持磁盘缓存)
       –enable-proxy \
       –enable-rewrite \ (支持重写规则)
       –enable-charset-lite \
       –enable-ssl \ (编译 ssl模块)
       –enable-suexec –with-suexec-bin=/usr/sbin/suexec
       –with-mpm=worker \ (指定mpm方式)
       –with-apr=/usr/local/apr \
       –with-apr-util=/usr/local/apr-util
       –disable-dav \
       –disable-cgid \ (禁止用一个外部 CGI 守护进程执行CGI脚本)
       –disable-cgi \ (禁止编译 CGI 版本的 PHP)

7)执行make安装
   # gmake && make install

8) 优化apache配置选项
    (1) 修改httpd.conf
   # vi /usr/local/apache2/conf/httpd.conf
   1> 找到 Listen 80   
        改为 Listen xxx.xxx.xxx.xxx:80 (服务器ip)

       找到 DocumentRoot   "/usr/local/apache2.2/htdocs"       
       <Directory "/usr/local/apache2.2/htdocs">
       设置你的 WEB 服务器的根目录 如 DocumentRoot "/home/myweb"
      
        找到 DirectoryIndex index.html
        改为 DirectoryIndex index.html index.htm index.php

        找到 AddType application/x-gzip .gz .tgz 在其下添加如下内容让apache支持PHP:
        AddType application/x-httpd-php .php
        AddType application/x-httpd-php-source .phps
 
    2>
一般说来,可以不需要的模块包括:
    #LoadModule env_module libexec/mod_env.so
    #LoadModule negotiation_module libexec/mod_negotiation.so
    #LoadModule status_module libexec/mod_status.so
    #server side include已经过时了
    #LoadModule includes_module libexec/mod_include.so
    #不需要将没有缺省index文件的目录下所有文件列出
    #LoadModule autoindex_module libexec/mod_autoindex.so
    #尽量不使用CGI:一直是Apache安全问题最多的地方
    #LoadModule cgi_module libexec/mod_cgi.so
    #LoadModule asis_module libexec/mod_asis.so
    #LoadModule imap_module libexec/mod_imap.so
    #LoadModule action_module libexec/mod_actions.so
    #不使用安全认证可以大大提高访问速度
    #LoadModule access_module libexec/mod_access.so
    #LoadModule auth_module libexec/mod_auth.so
    #LoadModule setenvif_module libexec/mod_setenvif.so

    可用可不用的有:
    #比如:需要在~/username/下调试php   
    LoadModule userdir_module libexec/mod_userdir.so
    #比如:需要将以前的URL进行转向或者需要使用CGI scrīpt-alias
    LoadModule alias_module libexec/mod_alias.so

    最好保留的有:
    #用于定制log格式
    LoadModule config_log_module libexec/mod_log_config.so
    #用于增加文件应用的关联
    LoadModule mime_module libexec/mod_mime.so
    #用于缺省index文件:index.php等
    LoadModule dir_module libexec/mod_dir.so

    必须保留的有:
    LoadModule authz_host_module modules/mod_authz_host.so

    3> 找到:
        #Include conf/extra/httpd-mpm.conf
        #Include conf/extra/httpd-info.conf
        #Include conf/extra/httpd-vhosts.conf  (虚拟主机配置文件存放目录.)    
        #Include conf/extra/httpd-default.conf    
        去掉前面的“#”号,取消注释。
        注意:以上 4 个扩展配置文件中的设置请按照相关原则进行合理配置!

        再加上 Include conf/extra/mod_cache.conf (配置mod_cache模块)

   (2)修改MPM(多道处理器)参数
    # vi conf/extra/httpd-mpm.conf
    1>找到如下选项,并改成对应的数值

<IfModule mpm_prefork_module>
    ServerLimit        2000   
    StartServers         10
    MinSpareServers      10
    MaxSpareServers      15
    MaxClients         2000
    MaxRequestsPerChild   10000
</IfModule>

<IfModule mpm_worker_module>
      ServerLimit           64
      ThreadLimit          128
      StartServers           8
      MaxClients          8192
      MinSpareThreads       64
      MaxSpareThreads       256
      ThreadsPerChild       128
      MaxRequestsPerChild    0
</IfModule>

   2>修改apache2.2子进程所有者
    # vi /usr/local/apache2.2/conf/httpd.conf
    找到:
    User daemon
    Group daemon
    把daemon改为nobody:
    User nobody
    Group nobody

    (3) #vi conf/extra/httpd-default.conf
    找到如下选项,并改成对应的数值:
    Timeout 15
    KeepAlive Off
    MaxKeepAliveRequests 50
    KeepAliveTimeout 5
    UseCanonicalName Off
    AccessFileName .htaccess
    ServerTokens Prod 
    ServerSignature Off 
    HostnameLookups Off

    (4)语法检查及建立软链接

    运行语法检查命令检查语法,出现错误后继续调整。
    # /usr/local/apache2/bin/apachectl -t
    没有错误后在 /usr/local/bin/ 目录下建立软链接
    # cd /usr/local/bin
    # ln -fs /usr/local/apache2/bin/httpd httpd 

      查看apache已编译模块:
     # /usr/local/apache2/bin/apachectl -l

9)启动WEB服务器
   #/usr/local/apache2/bin/apachectl start

   查看自己的站点是否正常 http://www.mysite.com 也可用IP
   (用# /usr/local/apache2/bin/apachectl stop 停止apache)
   (用# /usr/local/apache2/bin/apachectl restart 重启apache)

·配置Apache模块
1.配置mod_cache模块
    # cd /usr/local/apache2/conf/extra  
    # vi mod_cache.conf

<IfModule mod_cache>
CacheForceCompletion 100
CacheDefaultExpire 3600
CacheMaxExpire 86400
CacheLastModifiedFactor 0.1

<IfModule mod_disk_cache>
CacheRoot /
CacheSize 256
CacheEnable disk /
CacheDirLevels 5
CacheDirLength 3
</IfModule>

<IfModule mod_mem_cache>
CacheEnable mem /
MCacheSize 4096
MCacheMaxObjectCount 100
MCacheMinObjectSize 1
MCacheMaxObjectSize 2048
</IfModule>
</IfModule>

 

参数的解释:
mod_cache:
CacheEnable: 启动 mod_cache,其后接两个参数。第一个参数指定快取的种类,应设为 mem (记忆体快取) 或 disk (磁碟快取) 之其一;第二个参数指定使用快取的 URI 路径,如果对整个网站 (或虚拟主机) 进行快取,简单指定为根目录(/) 即可。
CacheForceCompletion: 这个值指定当 HTTP request 被取消时,内容的产生动作要完成的百分比;预设是 60(%)。
CacheDefaultExpire: 指定快取的预设过期秒数;预设值是一小时 (3600)。
CacheMaxExpire: 指定快取最大的过期秒数;预设值是一天 (86400)。
CacheLastModifiedFactor: 用来从回应里 Last Modified 资讯算出 expire date。
计算方式是:
expire period (过期时距) = 最后更新后至今的时间间距 * CacheLastModifiedFactor

expire date = 目前时间 + expire period
不过无论如何,过期时间不能超过 CacheMaxExpire 的设定值。

现在。如果用squid对该服务器进行反向代理的话,就可以通过cache 实现web的加速了


.安装MYSQL
1)Install
   # tar -zxf mysql-standard-5.0.15-linux-i686.tar.gz
   # cp -r mysql-standard-5.0.15-linux-i686 /usr/local/mysql

2)修改配置
   # vi /usr/local/mysql/support-files/my-medium.cnf 在后面加上
   max_connections = 1000
   log-slow-queries
   long_query_time = 5
  (注:
      max_connections  为允许的最大连接数
      log-slow-queries 打开低速查询日志
      long_query_time 低速查询的秒数(运行一句sql达到此时间记录在日志里)
  )

  然后COPY 它为 /etc/my.cnf 文件
  #cp /usr/local/mysql/support-files/my-medium.cnf /etc/my.cnf

3)添加mysql用户及用户组
   # groupadd mysql
   # useradd -g mysql mysql

4)修改mysql目录权限
   # chown -R root /usr/local/mysql
   # chgrp -R mysql /usr/local/mysql
   # chown -R mysql /usr/local/mysql/data

5)生成mysql系统数据库
   # /usr/local/mysql/scripts/mysql_install_db –user=mysql&

6)启动mysql服务
   # /usr/local/mysql/bin/mysqld_safe –user=mysql&
   如出现 Starting mysqld daemon with databases from /usr/local/mysql/data   代表正常启动mysql服务了, 按Ctrl + C 跳出

重启mysql: /etc/rc.d/init.d/mysqld restart

7)修改 mysql 的 root 密码
   # /usr/local/mysql/bin/mysqladmin -u root -p password 123456
   回车出现 Enter password: 最开始密码默认为空 继续回车即可 123456 即为你的新密码

.安装PHP
1)安装GD库(让PHP支持GIF,PNG,JPEG)
   首先下载 jpeg6,libpng,freetype 并安装模块
   wget http://www.ijg.org/files/jpegsrc.v6b.tar.gz
   wget http://nchc.dl.sourceforge.net/sourc…g-1.2.8.tar.gz
   wget http://keihanna.dl.sourceforge.net/s…-2.1.10.tar.gz
   wget http://www.boutell.com/gd/http/gd-2.0.33.tar.gz

    gd-2.0.33.tar.gz  http://www.boutell.com/gd/

    jpegsrc.v6b.tar.gz   http://www.ijg.org/

    libpng-1.2.7.tar.tar  http://www.libpng.org/pub/png/libpng.html

    zlib-1.2.2.tar.gz  http://www.zlib.net/

    freetype-2.1.9.tar.gz  http://www.freetype.org/

 1.装zlib

   # tar -zxvf zlib-1.2.2.tar.gz
   # cd zlib-1.2.2
   # ./configure –prefix=/usr/local/zlib
   # make 
   # make install

  2.安装 jpeg6
   建立目录
   # mkdir /usr/local/jpeg6
   # mkdir /usr/local/jpeg6/bin
   # mkdir /usr/local/jpeg6/lib
   # mkdir /usr/local/jpeg6/include
   # mkdir /usr/local/jpeg6/man
   # mkdir /usr/local/jpeg6/man/man1
   # cd /usr/local/src
   # tar -zxf jpegsrc.v6b.tar.gz
   # cd jpeg-6b
   # ./configure –prefix=/usr/local/jpeg6/ –enable-shared –enable-static
   # make
   # make install

  3.安装libpng
   # cd /usr/local/src
   # tar -zxf libpng-1.2.8.tar.gz
   # cd libpng-1.2.8
   # cp scripts/makefile.std makefile
   #./configure –prefix=/usr/local/libpng
   # make
   # make install

  4.安装 freetype
   # cd /usr/local/src
   # tar -zxf freetype-2.1.10.tar.gz
   # cd freetype-2.1.10
   # ./configure –prefix=/usr/local/freetype
   # make
   # make install

  5.安装最新的GD库
   # cd /usr/local/src
   # tar -zxf gd-2.0.33.tar.gz
   # cd gd-2.0.33
   # ./configure –prefix=/usr/local/gd2 –with-jpeg=/usr/local/jpeg6/ –with-png –with-zlib –with-freetype=/usr/local/freetype/
   # make 
   # make install

  6.安装最新的Curl库
   # cd /usr/local/src
   # wget http://curl.haxx.se/download/curl-7.15.0.tar.gz
   # tar -zxf curl-7.15.0.tar.gz
   # ./configure –prefix=/usr/local/curl
   # make 
   # make install

2)安装PHP
  1.下载并安装libxml2
   # cd /root/soft
   # wget http://ftp.gnome.org/pub/GNOME/sourc…-2.6.19.tar.gz 
   (http://ftp.gnome.org/pub/GNOME/sources/)
   # tar -zxf libxml2-2.6.19.tar.gz
   # cd libxml2-2.6.19
   # ./configure –prefix=/usr/local/libxml2
   # make; make install

  2.安装 libxslt
   # cd /root/soft
   # wget http://ftp.gnome.org/pub/GNOME/sourc…-1.1.15.tar.gz
   # tar -zxf libxslt-1.1.15.tar.gz
   # cd libxslt-1.1.15
   # ./configure –prefix=/usr/local/libxslt –with-libxml-prefix=/usr/local/libxml2
   # make; make install

  3.开始安装PHP5
   # tar -zxf php-5.2.5.tar.gz \
   # cd php-5.2.5 \
   # ./configure –prefix=/usr/local/php5 \
   # –with-apxs2=/usr/local/apache2/bin/apxs \
   # –with-mysql=/usr/local/mysql \
   # –with-curl=/usr/local/curl \
   # –with-libxml-dir=/usr/local/libxml2 \
   # –with-xsl=/usr/local/libxslt \
   # –with-expat-dir=/usr/lib \ (忽略)
   # –with-iconv \ (支持iconv库)
   # –with-gd=/usr/local/gd2 \
   # –with-jpeg-dir=/usr/local/jpeg6 \
   # –with-zlib-dir=/usr/local/zlib \ (指定zlib模块位置)
   # –with-png-dir=/usr/local/libpng \
   # –with-freetype-dir=/usr/local/freetype \
   # –enable-mbstring \ (支持mbstring模块)
   # –enable-maintainer-zts  \ (apache mpm以worker方式)
   # –enable-ftp \
   # –enable-soap \
   # –enable-xslt \  (忽略)
   # –disable-ipv6 \
   # –disable-cgi  \
   # –disable-cli           #禁掉ipv6,禁掉cli模式,提升速度和安全性.
   # make
   # make install

   必选项
      –prefix=/usr/local/php5
      –with-apxs2=/usr/local/apache2.2/bin/apxs
      –with-mysql=/usr/local/mysql/
      –with-libxml-dir=/usr/local/libxml2
  
   GD库的配置选项
      –with-gd=/usr/local/gd2/
      –with-jpeg-dir=/usr/local/jpeg6/
      –with-png-dir
      –with-zlib-dir=/usr/lib
      –with-freetype-dir=/usr/local/freetype

   可选项  
      –with-curl=/usr/local/curl                                           支持CURL库
      –enable-ftp                                                             打开FTP库函数支持
      –enable-soap –with-xsl=/usr/local/libxslt –enable-xslt   让PHP支持SOAP

配置 php.ini
      cp php.ini-dist  /usr/local/lib/php.ini


.配置 httpd.conf 让apache支持PHP
   # vi /usr/local/apache/conf/httpd.conf
      找到 AddType application/x-gzip .gz .tgz 在其下添加如下内容:
      AddType application/x-httpd-php .php
      AddType application/x-httpd-php-source .phps

   重启apache
     # /usr/local/apache/bin/apachectl restart
     在你Web目录里建一内容为  PHP文件, 输入URL地址查看PHP配置是否正确

2007年03月09日
相信不少朋友在网上看到过类似于html?id=123&author=evance或者links.net这种文件后缀名。 然后就会奇怪了: 1.html为什么可以像asp,php一样传一堆变量? 2..net这种是什么程序语言的名文件?现在我就IIS和Apache分别来演示一下,如何修改文件后缀名映射 A.IIS-主站下目录将check.asp映射成为check.evance

  1. 打开IIS
  2. 打开“默认网站”的属性对话框并切换到“主目录”选项卡:
  3. 点击“配置”按钮,打开“应用程序配置”
  4. 点击“添加”按钮,打开“添加/编辑应用程序扩展名映射”,在“可执行文件”里填写(不填引号):“C:\WINDOWS\system32\inetsrv\asp.dll”;在“扩展名”里填写(不填引号):“asp”; 在动作栏里,选中“限制为”,并填写(不填引号):“GET,HEAD,POST,TRACE”,一路“确定”
  5. 在浏览器执行:http://localhost/check.evance

B.Apache-我们为主站下目录将info.php文件映射成为info.evance文件

  1. 用文本编辑器打开Apache配置文件conf/httpd.conf,找到 AddType application/x-httpd-php .php,在它下面添加一行: AddType application/x-httpd-php .evance
  2. 执行info.evance文件:

文:Evance

2007年02月06日

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
此句代码.
body中这样写:
<body style=style="overflow-x:hidden;overflow-y:scroll">

能隐藏IFRAME的滚动条吗?
我知道的三种方法:
1. 设置iframe scrolling="no"
2. 被包含页body应用overflow:hidden
3. 被包含页的body标签加scroll="no"

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
给 body 添加如下样式

引用
body { overflow-x : hidden ; }

但是如果页面引用了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
 的话(在页面第一行)以上代码无效。

  搜索了一下找到了解决办法

引用
html{overflow-x : hidden ; height : 100% ; margin : 0 ; padding : 0 ; }
body{ height : 99% ; margin : 0 ; border : 0 ; padding : .5% ; overflow-x : hidden ; }
2007年01月31日

修改地址后的参数:

<script>
function getNewUrl(oldurl,paramname,pvalue){
    var reg = new RegExp("(\\?|&)"+ paramname +"=([^&]*)(&|$)","gi");
    var t=oldurl.match(reg)[0];
    var retxt=t.substring(0,t.indexOf("=")+1)+pvalue;
    if(t.charAt(t.length-1)==’&’) retxt+="&";
    return oldurl.replace(reg,retxt);
 }
 alert(getNewUrl("http://servername/virturlpath/index.asp?p1=123&p2=aa&p3=hh&p4=1","p4","cxz"));
</script>

获取地址参数:

<script>
function aa(source, name)
{
  var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");
 
  if (reg.test(source)) return RegExp.$2; return "";
};
alert(aa("http://community.csdn.net/Expert/topic/4223/4223277.xml?temp=6.502932E-02", "temp"))
</script>

 <script languege=javascript>
<!–
 function getQuery(name)
{
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r!=null) return unescape(r[2]); return null;
}
function checkinput()
{
if(getQuery("sex")!=”)
window.form1.sex.value=getQuery("sex");
else
alert("上页问题没有回答!");

if(getQuery("age")!=”)
window.form1.age.value=getQuery("age");
else
alert("上页问题没有回答!");

if(getQuery("fromsite")!=”)
window.form1.fromsite.value=getQuery("fromsite");

if(getQuery("actonweb")!=”)
window.form1.actonweb.value=getQuery("actonweb");
else
alert("上页问题没有回答!");

if(getQuery("lovegame")!=”)
window.form1.lovegame.value=getQuery("lovegame");
else
alert("上页问题没有回答!");

}
–>
   </script>

2007年01月22日

工作原理和使用方法

.htaccess文件(或者"分布式配置文件")提供了针对目录改变配置的方法, 即,在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录。

 使用.htaccess文件的场合

一般情况下,不应该使用.htaccess文件,除非你对主服务器配置文件没有存取权限。 有一种很常见的误解,认为用户认证只能通过.htaccess文件实现,但并不是这样, 把用户认证写在主服务器配置中是完全可行的,而且是一种很好的方法。

在内容提供者需要针对目录改变服务器的配置而对服务器系统没有root权限时,则应该使用.htaccess文件。如果服务器管理员不愿意频繁修改配置,则可以允许用户通过.htaccess文件自己修改配置,尤其是ISP在一个机器上 宿主多个用户站点,而又希望用户可以自己改变配置的情况下。

虽然如此,一般都应该尽可能地避免使用.htaccess文件。 任何希望放在.htaccess文件中的配置,都可以放在主服务器的<Directory>段中,而且更高效。

避免使用.htaccess文件有两个主要原因。

首先是性能。 如果AllowOverride允许使用.htaccess文件,则,Apache需要在每个目录中查找.htaccess文件,因此,无论是否真正用到, 允许使用.htaccess文件都会导致性能的下降。另外,每次请求一个页面时,都需要读取.htaccess文件。

还有,Apache必须在所有更高级的目录中查找.htaccess文件, 使所有有效的指令都起作用,所以, 如果有对/www/htdocs/example中页面的请求,Apache必须查找以下文件:

/.htaccess
/www/.htaccess
/www/htdocs/.htaccess
/www/htdocs/example/.htaccess

而且,对此目录以外的每个文件访问,还有4个附加的文件系统访问,即使这些文件都不存在。 (注意,这可能仅仅发生在 / 允许使用.htaccess文件的情况下,虽然这种情况并不多。)

其次是安全。 如此,会允许用户修改服务器的配置,可能会导致未加限制的修改,请认真考虑是否给予用户这样的特权。但是,如果给予用户较少的特权而不能满足其需要,则会带来额外的技术支持请求,所以,必须明确地告诉用户已经给予他们的权限,说明AllowOverride设置的值, 并引导他们参阅相应的说明,以免日后许多麻烦。

注意,在/www/htdocs/example目录下.htaccess文件中放置指令,与, 在主服务器配置文件中<Directory /www/htdocs/example>段中放置相同指令, 是等效的。:

/www/htdocs/example中的.htaccess:
/www/htdocs/example中.htaccess文件的内容

AddType text/example .exm
httpd.conf文件中的段

<Directory /www/htdocs/example>
AddType text/example .exm
</Directory>

但是,把这个配置放置在服务器配置文件中则更加高效,因为只需要在Apache启动时读取一次, 而不是在有文件请求时每次都读取。

将AllowOverride设置为"none"可以完全禁止使用.htaccess文件。

AllowOverride None

2007年01月12日

图片无缝滚动的完美解决

  想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。

先了解一下对象的几个的属性:
innerHTML:设置或获取位于对象起始和结束标签内的 HTML
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度

好,先看这个向上滚动的代码:

 <base href="http://www.7880.com">
 <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1>
 <img src="images/flash8.gif">
 <img src="images/link/flashempire.gif">
 <img src="images/linklogo/shlogo.gif">
 <img src="images/link/deskcity.gif">
 <img src="images/linklogo/5dmeng.gif">
 <img src="/Upload/2004_Pack/logo.gif">
 <img src="images/link/flashskylogo.gif">
 <img src="images/link/5dlogo88.gif">
 <img src="/Upload/2004_Pack/link.gif">
 </div>
 <div id=demo2></div>
 </div>
   <script>
   var speed=30
   demo2.innerHTML=demo1.innerHTML 
file://克隆demo1为demo2
   function Marquee(){
   if(demo2.offsetTop-demo.scrollTop<=0) 
file://当滚动至demo1与demo2交界时
   demo.scrollTop-=demo1.offsetHeight  
file://demo跳到最顶端
   else{
   demo.scrollTop++
   }
   }
   var MyMar=setInterval(Marquee,speed) 
file://设置定时器
   demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
   demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
   </script>

 向下滚动:

<base href="http://www.7880.com">
  <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff>
  <div id=demo1>
  <img src="images/flash8.gif">
  <img src="images/link/flashempire.gif">
  <img src="images/linklogo/shlogo.gif">
  <img src="images/link/deskcity.gif">
  <img src="images/linklogo/5dmeng.gif">
  <img src="/Upload/2004_Pack/logo.gif">
  <img src="images/link/flashskylogo.gif">
  <img src="images/link/5dlogo88.gif">
  <img src="/Upload/2004_Pack/link.gif">
  </div>
  <div id=demo2></div>
  </div>
    <script>
    var speed=30
    demo2.innerHTML=demo1.innerHTML
    demo.scrollTop=demo.scrollHeight
    function Marquee(){
    if(demo1.offsetTop-demo.scrollTop>=0)
    demo.scrollTop+=demo2.offsetHeight
    else{
    demo.scrollTop–
    }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script>

向左滚动: 

<base href="http://www.7880.com">
  <div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif"><img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif"><img src="/Upload/2004_Pack/link.gif">
<img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
  <script>
  var speed=30
  demo2.innerHTML=demo1.innerHTML
  function Marquee(){
  if(demo2.offsetWidth-demo.scrollLeft<=0)
  demo.scrollLeft-=demo1.offsetWidth
  else{
  demo.scrollLeft++
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() {clearInterval(MyMar)}
  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>
 

向右滚动: 

<base href="http://www.7880.com">
  <div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff>
<table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top>
<img src="images/link/flashempire.gif"><img src="images/linklogo/shlogo.gif">
<img src="images/link/deskcity.gif"><img src="images/linklogo/5dmeng.gif">
<img src="/Upload/2004_Pack/logo.gif"><img src="images/link/flashskylogo.gif">
<img src="images/link/5dlogo88.gif"><img src="/Upload/2004_Pack/link.gif">
<img src="images/flash8.gif"></td><td id=demo2 valign=top></td></tr></table></div>
  <script>
  var speed=30
  demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
  function Marquee(){
  if(demo.scrollLeft<=0)
  demo.scrollLeft+=demo2.offsetWidth
  else{
  demo.scrollLeft–
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() {clearInterval(MyMar)}
  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>

<base href="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>">
   <div id=demo style=overflow:hidden;height:33;width:500;background:#214984;color:#ffffff><table align=left cellpadding=0 cellspace=0 border=0><tr><td id=demo1 valign=top><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"><img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif"></td><td id=demo2 valign=top></td></tr></table></div>
  <script>
  var speed=30
  demo2.innerHTML=demo1.innerHTML
 demo.scrollLeft=demo.scrollWidth
  function Marquee(){
  if(demo.scrollLeft<=0)
  demo.scrollLeft+=demo2.offsetWidth
  else{
  demo.scrollLeft–
  }
  }
  var MyMar=setInterval(Marquee,speed)
  demo.onmouseover=function() {clearInterval(MyMar)}
  demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
  </script>

<base href="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>">
  <div id=demo style=overflow:hidden;height:100;width:90;background:#214984;color:#ffffff><div id=demo1>
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  <img src="<a href="http://www.feiniaoji.com" target="_blank">http://www.feiniaoji.com</a>/images/logo.gif">
  </div>
  <div id=demo2></div>
  </div>
    <script>
    var speed=30
    demo2.innerHTML=demo1.innerHTML
    demo.scrollTop=demo.scrollHeight
    function Marquee(){
    if(demo1.offsetTop-demo.scrollTop>=0)
    demo.scrollTop+=demo2.offsetHeight
    else{
    demo.scrollTop–
    }
    }
    var MyMar=setInterval(Marquee,speed)
    demo.onmouseover=function() {clearInterval(MyMar)}
    demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
    </script>

<div id="marquees"> <!– 这些是字幕的内容,你可以任意定义 –>
<br> <a href="http://www.toto369.net">特效</a>
<br> <a href="http://www.baidu.com/">百度</a>
</div>
<!– 以下是javascript代码 –>
<script language="javascript">
<!–
marqueesHeight=100; //内容区高度
stopscroll=false; //这个变量控制是否停止滚动
with(marquees){
noWrap=true; //这句表内容区不自动换行
style.width=0; //于是我们可以将它的宽度设为0,因为它会被撑大
style.height=marqueesHeight;
style.overflowY="hidden"; //滚动条不可见
onmouseover=new Function("stopscroll=true"); //鼠标经过,停止滚动
onmouseout=new Function("stopscroll=false"); //鼠标离开,开始滚动
}
//这时候,内容区的高度是无法读取了。下面输出一个不可见的层"templayer",稍后将内容复制到里面:
document.write(‘<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>’);
function init(){ //初始化滚动内容
//多次复制原内容到"templayer",直到"templayer"的高度大于内容区高度:
while(templayer.offsetHeight<marqueesHeight){
templayer.innerHTML+=marquees.innerHTML;
} //把"templayer"的内容的“两倍”复制回原内容区:
marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
//设置连续超时,调用"scrollUp()"函数驱动滚动条:
setInterval("scrollUp()",20);
}
document.body.onload=init;
preTop=0; //这个变量用于判断滚动条是否已经到了尽头
function scrollUp(){ //滚动条的驱动函数
if(stopscroll==true) return; //如果变量"stopscroll"为真,则停止滚动
preTop=marquees.scrollTop; //记录滚动前的滚动条位置
marquees.scrollTop+=1; //滚动条向下移动一个像素
//如果滚动条不动了,则向上滚动到和当前画面一样的位置
//当然不仅如此,同样还要向下滚动一个像素(+1):
if(preTop==marquees.scrollTop){
marquees.scrollTop=templayer.offsetHeight-marqueesHeight+1;
}
}
–>
</script>