同一页面用滑动门特效实现不同列表页样式
发布时间:2020-03-22 21:45:27
作者:筱航科技
来源:本站
浏览量(147)
点赞(197)
摘要:筱航科技教你同一页面用滑动门特效实现不同列表页样式,在此展示了三种常用的列表效果即:图片列表/文字列表/图文混合展示互相一键切换,点击页面按钮即可进行切换,前端无冗余代码,通过PHP进行判断即可!
本示例展示了三种常用的列表效果
即:图片列表/文字列表/图文混合展示互相一键切换
点击页面按钮即可进行切换,前端无冗余代码,通过PHP进行判断即可
具体代码如下,根据自己情况和写的代码进行删减即可,默认展示的是图文混合列表
注意echo时如果最外面用的单引号,那么代码里面最好不要出现单引号,双引号也是一样的
<h3 class="order"> 列表效果:<a href="?id=pics" <?php $id=$_GET['id']; if($id === "pics") {echo 'class=active';} else {}?>>图片列表</a> <a href="?id=text" <?php $id=$_GET['id']; if($id === "text") {echo 'class=active';} else {}?>>文字列表</a> <a href="?id=media" <?php $id=$_GET['id']; if($id === "media") {echo 'class=active';} else {}?>>图文展示</a> </h3> <?php $id=$_GET['id']; if($id === "pics") { echo '<!-- HOT文章 --> <div class="recommend" style="margin: 0 0 10px 0;"> <ul class="rec-ul"> {pboot:list scode={sort:scode} num=16 order=date page=1 isico=1} {pboot:if([list:visits]>200)} <li> <a href="[list:link]" title="[list:title]"> <div class="rec-box rec-hot-box"> <div class="img-box"> <img src="[list:ico]" alt="[list:title]"> <span>[list:visits] 浏览</span> </div> </div> </a> </li> {else} <li> <a href="[list:link]" title="[list:title]"> <div class="rec-box"> <div class="img-box"> <img src="[list:ico]" alt="[list:title]"> <span>[list:visits] 浏览</span> <span style="top: 8px;">[list:date style=Y-m-d]</span> </div> </div> </a> </li> {/pboot:if} {/pboot:list} </ul> </div>'; } elseif($id === "text") { echo '<ul> {pboot:list scode={sort:scode} num=8 order=sorting page=1} <li class="note-li"> <a href="[list:link]" title="[list:title]"> <div class="flex-column"> <div class="text-box"> <h4>[list:title]</h4> <p class="intro">[list:content drophtml=1 dropblank=1 lencn=120]</p> <p><span><i class="fa fa-clock-o" aria-hidden="true"></i> [list:date style=Y-m-d]</span><span><i class="fa fa-eye" aria-hidden="true"></i> [list:visits] 浏览</span><span><i class="fa fa-thumbs-up" aria-hidden="true"></i> [list:likes] 点赞</span></p> </div> </div> </a> </li> {/pboot:list} </ul>'; } elseif($id === "media") { echo '<ul> {pboot:list scode={sort:scode} num=8 order=sorting page=1} <li class="note-li"> <a href="[list:link]" title="[list:title]"> <div class="flex-column"> {pboot:if([list:isico]==1)} <div class="img-box"> <img src="[list:ico]" alt="[list:title]"> </div> {/pboot:if} <div class="text-box"> <h4>[list:title]</h4> <p class="intro hidden-sm">[list:content drophtml=1 dropblank=1 lencn=120]</p> <p><span><i class="fa fa-clock-o" aria-hidden="true"></i> [list:date style=Y-m-d]</span><span><i class="fa fa-eye" aria-hidden="true"></i> [list:visits] 浏览</span><span><i class="fa fa-thumbs-up" aria-hidden="true"></i> [list:likes] 点赞</span></p> </div> </div> </a> </li> {/pboot:list} </ul>'; } else { echo '<ul> {pboot:list scode={sort:scode} num=8 order=sorting page=1} <li class="note-li"> <a href="[list:link]" title="[list:title]"> <div class="flex-column"> {pboot:if([list:isico]==1)} <div class="img-box"> <img src="[list:ico]" alt="[list:title]"> </div> {/pboot:if} <div class="text-box"> <h4>[list:title]</h4> <p class="intro hidden-sm">[list:content drophtml=1 dropblank=1 lencn=120]</p> <p><span><i class="fa fa-clock-o" aria-hidden="true"></i> [list:date style=Y-m-d]</span><span><i class="fa fa-eye" aria-hidden="true"></i> [list:visits] 浏览</span><span><i class="fa fa-thumbs-up" aria-hidden="true"></i> [list:likes] 点赞</span></p> </div> </div> </a> </li> {/pboot:list} </ul>'; } ?>
筱航科技主营业务: 长春网站建设 - 长春网站制作 -长春网站设计 -长春网站开发 -长春网站优化 -长春网站SEO - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城
扫一扫,关注我们
声明:本文由【筱航科技】编辑上传发布,转载此文章须经作者同意,并请附上出处【筱航科技】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。
197