拖拽翻页(ThrowPage)详解 cool
作者:蓝色理想 来源:蓝色理想 发布时间:2009-12-02 09:54:00
标签:翻页,拖拽,css
今年4月,我在宿舍憋出一个拖拽翻页效果
原本是为自己的博客网站设计的,周二产生的灵感,周三周四逃课两天算坐标,周五回家,到傍晚才算写出了第一版,发布之后没想到评价还不错,此后太多人问我这个效果应该怎么修改,才能用到自己的网站上,所以现在发这个帖子详细解释一下这个效果的原理
在此正式将此效果命名为 ThrowPage ,而且我肯定会继续完善这个效果,并发布封装好的代码,方便大家调用,可能一个月后,也可能一年后,In Me God Trust
本文将按结构层、表现层、行为层三层分开的顺序来写:
运行代码框
结构层
要把一个目录的内容按页展开,该怎么写呢?也许是这样,至少我就是这么写的
<div id="menu">
<div class="page">
<ul>
<li><span>09-11-25</span><a>恋曲1980</a></li>
<li><span>09-11-25</span><a>恋曲1990</a></li>
<li><span>09-11-25</span><a>恋曲2000</a></li>
<li><span>09-11-25</span><a>母亲</a></li>
</ul>
<span class="tip">1/2页 拖拽翻页</span>
</div>
<div class="page">
<ul>
<li><span>09-11-25</span><a>伴侣</a></li>
<li><span>09-11-25</span><a>思念</a></li>
<li><span>09-11-25</span><a>童年</a></li>
<li><span>09-11-25</span><a>牧童</a></li>
</ul>
<span class="tip">2/2页 拖拽翻页</span>
</div>
</div>
<ul> 是每一页的列表,图中的浅灰色色部分
<li> 是列表中的一条,图中的珊瑚色部分
<span class="tip"> 是不应该出现在xhtml 中的,应该由 js 添加,它是每一页下面的索引标识,图中的深灰色部分
<div class="page"> 是目录中的页,图中的白色部分
<div id="menu"> 是包含了所有页的目录,图中的亮蓝色部分。当然,如果页面中除了这个效果外没有其他东西的话,这个标签也可以不写,那么所有 <div class="page"> 的父标签就是 <body>
或许你会说,目录也应该是 <ul>,所以应该这么写
<ul id="menu">
<li class="page">
<ul>
<li><span>09-11-25</span><a>恋曲1980</a></li>
<li><span>09-11-25</span><a>恋曲1990</a></li>
<li><span>09-11-25</span><a>恋曲2000</a></li>
<li><span>09-11-25</span><a>母亲</a></li>
</ul>
<span class="tip">1/2页 拖拽翻页</span>
</li>
<ul class="page">
<ul>
<li><span>09-11-25</span><a>伴侣</a></li>
<li><span>09-11-25</span><a>思念</a></li>
<li><span>09-11-25</span><a>童年</a></li>
<li><span>09-11-25</span><a>牧童</a></li>
</ul>
<span class="tip">2/2页 拖拽翻页</span>
</li>
</li>
这样确实更符合语意,不过问题马上就来了
0
投稿
猜你喜欢
- 注意,在改变数值之前锁定应用,确保一段时间里只有一个客户执行该语句。<SCRIPT LANGUAGE="VBScr
- 神经网络只是由两个或多个线性网络层叠加,并不能学到新的东西,简单地堆叠网络层,不经过非线性激活函数激活,学到的仍然是线性关系。但是加入激活函
- 一、为何人工智能(AI)首选Python?读完这篇文章你就知道了。我们看谷歌的TensorFlow基本上所有的代码都是C++和Python,
- 1.错误错误1:parsing time “xx”: xxx out of range错误2:par
- 导语昨天看到有留言竟然说我是月更博主,我明明更新地这么勤快(心虚.jpg)。看吧,昨天刚更新过,今天又来更新了。今天还是带大家写个小游戏吧,
- 数字运算=:用于给变量赋值type(x):查看数据所属类型isinstance(x, A_tuple):判断数据是否为预期类型+:两个数相加
- 虽然你可以使用一个类似的技术以拒绝过大的文件(通过检查$uploadedfile_size变量),但是通常这不是一个好主意。在得到这个变量之
- 1.re.match()re.match()的概念是从头匹配一个符合规则的字符串,从起始位置开始匹配,匹配成功返回一个对象,未匹配成功返回N
- 最近在看python脚本语言,脚本语言是一种解释性的语言,不需要编译,可以直接用,由解释器来负责解释。python语言很强大,而且写起来很简
- 使用cv2对视频进行切割import cv2def clip_video(source_video, target_video, start
- 最近在做一个小案例的时候遇到了Math.max.apply这么一个用法,之前很少遇到过感觉挺有趣的,就记录一下。1Math.max语法: M
- 关于 Python requests ,在使用中,总结了一些小技巧把,记录下。1:保持请求之间的Cookies,我们可以这样做。
- Oracle 的正规表达式的实施是以各种 SQL 函数和一个 WHERE 子句操作符的形式出现的。如果您不熟悉正规表达式,那么这篇文章可以让
- Python的版本有很多,很多第三方库也有很多不同的版本,不同的版本也可能是互不兼容的,在本机运行不同的项目,可能需要不同的环境。为了不和本
- 写在前面作为一名找不到工作的爬虫菜鸡人士来说,登陆这一块肯定是个比较大的难题。 从今天开始准备一点点对大型网站进行逐个登陆破解。加
- 哈喽,今天给大家分享一篇Django+Celery实现动态配置定时任务,因为最近也是无意间看到一位大佬关于这块的文章,然后自己觉得不错,也想
- 本文实例为大家分享了vue组件watch属性的具体代码,供大家参考,具体内容如下<!doctype html><html&
- 本文实例讲述了Python基于递归算法实现的走迷宫问题。分享给大家供大家参考,具体如下:什么是递归?简单地理解就是函数调用自身的过程就称之为
- 1.zip用法简介在python 3.x系列中,zip方法返回的为一个zip object可迭代对象。class zip(object):&
- 本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下是什么网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接