html5上下滑动“翻页”实现，是真正的翻页_随笔

HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

<!DOCTYPE html>

<title>HTML5手机页面触屏滑动上下翻页特效</title>

</head>

</div>

</div>

</section>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</section>

</body></html>

2、css代码：

@charset "utf-8"

.ad_foot li { margin:0 auto 1emfont-size:1.8empadding:15pxbackground:#FFF}

.ad_foot li a {display:block}

.ad_foot li .l {width:75pxheight:75pxfloat:leftoverflow:hidden}

.ad_foot li .l img {width:75pxwidth:75px}

.ad_foot li .r {width:78%float:leftmargin-left:30pxcolor:#666overflow:hidden}

.ad_foot li .r p {color:#999font-size:1.2em}

.ad_foot li .r span {font-size:0.8em}

.ad_foot li .r i {font-style:normal}

.lazy-img, .lazy-finish{background-color:#f0eded}

.page-list{font-size:20pxfont-family: "Microsoft yahei"padding-left:17pxpadding-top:30pxheight:35pxborder-bottom:1px solid #b5b5b5display:none}

.ad_foot{padding:15px 15px 0 15px}

/*声音播放按钮*/

#song_img {width:293pxheight:41pxdisplay:blockposition:absoluteright:4.1emtop:1.6emfont-size:1.7emtext-align:centerline-height:41pxcolor:#FFFbackground:url(../img/music_c3.png) no-repeat 0 0}

/*底部推荐*/

.ad_list{margin-top:2em}.ad_list li {width:46%background:nonepadding:0float:leftmargin-bottom: 1em}

.ad_list li.r {float:right}.ad_list li a img {width:100%height:auto}

.ad_foot h3 {width:100%height:48pxline-height:48pxbackground:#F9F5EC}

.ad_foot h3 a {display:inline-blockcolor:#444width:50%text-align:centerfont-size:1.5emheight:48pxborder-bottom:2px solid #FF9240}

.ad_foot h3 a.active {color:#FFFbackground:#FF9240}

.magazine_1 li {

width:100%

margin-bottom: 1em

font-size: 1.8em

padding: 15px

background: #FFF}

.magazine_1 li a {display:block}

.magazine_1 li .l {width: 75px

height: 75px

float: left

overflow: hidden}

.magazine_1 li .l img {width:75pxheight:75px}

.magazine_1 li .r {width: 78%

float: left

margin-left: 30px

color: #666

overflow: hidden}

.magazine_1 li .r p {

color: #999

font-size: 1.2em

.magazine_1 li .r span {font-size:0.8em}

.ad_foot li .r i {font-style:normal}

3、运行效果如下：

静态网页制作起来相当麻烦。。你必须对应到相应的链接才行。。你可以试试静态网页中的

FRAMESET标签。。分成2-3个框架。。最上面的框架做导航。。下面做次导航右下做浏览你网页内容的。。这样划拨一样就不会显得那么麻烦了。。不过工作量还是相当大的。你也可以在主页加入一些JAVASCRIPT那样这个网页就固定添加一个脚本。进入其他子页也同样有，可以实现网页的美化和更加方便。。

PHP的

<?php

include_once("../../config/config.php")

$conn = mysql_connect ($DBhost, $DBuser, $DBpaswd) or die("fail to connect to db")

mysql_select_db($DBname) or die("fail to select db")

$str = $_GET['page']

if($str <1)

{

$str = "1"

}

$page = intval($str)//which page

$msg_count = mysql_query("select count(id) as rscont from message")

$rs_count = 0

while($ro = mysql_fetch_object($msg_count))

{

$rs_count = $ro->rscont

}//total data

$pagesize=5//total page

$sql="select * from message order by con_time DESC limit ".($page-1) * $pagesize.",".$pagesize.""

mysql_query("set names 'utf8'")

$result=mysql_query ($sql) or die("fail to query")

$pagecount=0

if(($rs_count/$pagesize)!=0)

{

$pagecount=intval($rs_count/$pagesize)+1

}

else

{

$pagecount=$rs_count/$pagesize

}

if($page<1)

{

$page=1

}

else

{

if($page>$pagecount)

{

$page=$pagecount

}

if (mysql_num_rows($result)>0){

$msg_no = 1//message number. TBD,num should be plus after change page

while($row=mysql_fetch_object($result)){

<span class="content-name">By: <?php echo "$row->username" ?></span>

<span class="content-time">Create at: <?php echo "$row->con_time" ?></span>

</div>

<table width="100%"><tr><td>Title: <span id="msg_title_"><?php echo "$row->con_title" ?></span></td>

<a name="msg_updates_<?php echo "$row->id" ?>" style="display:none" href="message_update.php?id=<?php echo "$row->id" ?>">[update]</a>

<a name="msg_deletes" style="display:none" href="message_delete.php?id=<?php echo "$row->id" ?>">[delete]</a>

</td></tr></table>

<hr>

</div>

<div class="DivNotification"><?php echo "$row->content"?></div>

</div>

<span class="content-name">Admin replay:<br/></span><span id="reply-content"><?php echo "$row->reply" ?></span>

</div>

<?php

$msg_no++

}

else

{

<span>There is no message in this page!</span>

<?php

}

//show update button and delete button

include "message_buttons.php"

Current page[<?php echo $page."/".$pagecount ?>]

<a href="message_index.php?page=1">[First page]</a>

</div>

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/7407407.html

html5上下滑动“翻页”实现，是真正的翻页

发表评论

评论列表（0条）