§ ITPOW >> 文档 >> XHTML

利用锚点控制翻页

作者:林小志 来源:linxz's BLOG 日期:2009-7-28

今天呱呱发了一个网址给我看,大概效果就是类似幻灯片的效果。当时我的第一反映这个是不是用锚点做的啊呢,以前在网上看过用锚点做的这类的效果。

脑袋里出现这个反映后,一直有“锚点”这 2 个字浮动着,不肯从我脑子里出去,我的脑袋本来就不大,怎么装得下呢,反正现在暂时没任务,就自己做一个,让“锚点”从自己的小脑袋中离开。

这个也不说什么大概的思路啊什么的,只是利用锚点跳到页面中的某一个位置而已。如果页面内容太多的话,我估计效果不好,所以这个还是用来娱乐一下算了。

结构

<div class="wrapper">
    <div class="content">
        <div class="box" id="a1">
            <h2>锚点控制内容</h2>
            <p>第一屏</p>
            <p>网上有很多这样的教程,我这个只是娱乐而已</p>
        </div>
        <div class="box" id="a2">
            <h2>锚点控制内容</h2>
            <p>第二屏</p>
        </div>
        <div class="box" id="a3">
            <h2>锚点控制内容</h2>
            <p>第三屏</p>
        </div>
        <div class="box" id="a4">
            <h2>锚点控制内容</h2>
            <p>第四屏</p>
        </div>
        <div class="box" id="a5">
            <h2>锚点控制内容</h2>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
            <p>第五屏</p>
        </div>
    </div>
    <div class="pager">
        <a href="#a1" title="">1</a>
        <a href="#a2" title="">2</a>
        <a href="#a3" title="">3</a>
        <a href="#a4" title="">4</a>
        <a href="#a5" title="">5</a>
    </div>
</div>

样式

* {margin:0;padding:0;}
body {font:normal 12px/1.5em Verdana,Lucida, Arial, Helvetica, "宋体",sans-serif;background:#FCFCFC;}
.wrapper {width:200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;border:1px solid #333333;background:#CCCCCC;}
    .content {width:180px;height:160px;margin:10px auto 0;overflow:hidden;border:1px solid #999999;background:#FFFFFF;}
        .box {float:left;width:160px;height:150px;margin-bottom:10px;padding:10px;overflow:auto;}
    .pager {width:180px;height:20px;margin:5px auto;text-align:right;}
        .pager a {padding:2px 4px;text-decoration:none;background:#FF0000;color:#FFFFFF;}
        .pager a:hover {background:#FFFFFF;outline:#FF0000 1px solid;color:#000000;}

演示

http://www.linxz.cn/demo/anchor-hold/anchor-hold.html

(我在 IE 6、Firefox 3.5、Chrome 2.0 中查看了演示,效果相同。ITPOW编辑注)

相关文章