服务报价 | 域名主机 | 网络营销 | 软件工具| [加入收藏]
 热线电话: #
当前位置: 主页 > php教程 > wordpress教程 >

wordpress悬浮小工具源码

时间:2016-10-14 20:15来源:未知 作者:最模板编辑 点击:
wordpress悬浮小工具的开发方式,即让小工具滚动到超出窗口,增加显示一个悬浮的模块,让超出之后的侧边栏,多出一个悬浮跟随窗口滚动的小工具。 这个效果在网上有很多人放出了源
wordpress悬浮小工具的开发方式,即让小工具滚动到超出窗口,增加显示一个悬浮的模块,让超出之后的侧边栏,多出一个悬浮跟随窗口滚动的小工具。
这个效果在网上有很多人放出了源码,我们在测试时,也参考了其中的一些,但是可惜的是,这些源码在兼容性和显示方式,悬浮等方式并不是特别的理想,所以我们的前端工程师自己写了一段jquery代码,,比较灵活的实现了这一功能。
建立一个超出窗口跟随的悬浮小工具
首先,我们需要建立一个自定义的小工具,自定义小工具不是新鲜事,我们提供一个自定义小工具的源代码供您参考:cat_posts-news-fix
下载这段源码,复制到functions.php,或者在functions.php中添加链接到这个文件   加入以下代码
include_once("cat_posts-news-fix.php");
这样,你会发现在后台会出现一个“悬浮侧边图文分类模块”,这个小工具可以自定义文章的分类和显示的数量,你可以修改其中79到81行中的loop  即 “ while ”到“ endwhile”中的代码,加入特色图片、截断文字等,需要你自己去修改。
如果你的小工具有统一的css样式,这个小工具则会显示你的样式,你还需要将悬浮的代码加入你的css文件夹,默认的文件夹是   style.css   将以下css添加进入css文件夹最后一行。
#fix{ display:none; position:fixed; top:0;_position:absolute;_bottom:auto;_top:expression(eval(document.documentElement.scrollTop)); }
 
这样,小工具就能够悬浮了,你可以自己修改一下sidebar(小工具默认的id) 的ul、li和div.widget的样式。
下面我们将我们写的一段jquery代码放进你的js文件夹,如果没有,可以将以下代码放进footer.php的最后:
<script type="text/javascript">
if($(window).scrollTop() >= ($("#sidebar").offset().top + $(".right_mian").height())){
$("#fix").fadeIn("300");
}
else{
$("#fix").fadeOut("300");
}</script>
上面的代码很好理解   我们来梳理一下:
外层的html结构:  div .right_mian 是右侧栏目的最顶级div    ,div#sidebar在.right_mian里面,#sidebar是用来放置小工具的 ,我们添加进去的自定义小工具div#fix就是在这里面
第一句代码   如果窗口的滚动的高度    大于等于  小工具栏目的顶部距离整个网站顶部的距离   加上  右侧顶级div的高度     悬浮的小工具淡入显示   如果不是则淡出显示
这样,不管小工具添加多少,高度有多少,只要小工具的底部超出了窗口,悬浮的模块就能出现,并且跟随窗口滚动了。
如果你需要开发一个这样的小工具,可以参考这篇文章以及这篇文章附带的文件和源码,如果你不是一个开发者,可以使用插件来完成这个功能 :wordpress悬浮小工具插件
希望本文对你有所帮助!
(责任编辑:最模板)
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
栏目列表
热点内容