图片滑动显示分类信息【前卫音乐作品】

演示地址：http://www.qianwe.com/forum-45-1.html


具体功能介绍如下：
1、鼠标移动至图片，图片自动滑动隐藏显示分类信息的一些内容【主要的功能】
2、与程序的JS完全兼容
3、可自行修改滑动位置

---

使用方法：
1、打开forumdisplay_list.html，查找<ul class="ml mlt mtw cl">，从<ul class="ml mlt mtw cl">到</ul>这段代码删除，从把附件中的(主题列表需要替换的代码)复制到删除代码处，实现替换，
2、打开header.htm,查找以下代码：

1. <script type="text/javascript" src="{$_G[setting][jspath]}forum.js?{VERHASH}"></script>

复制代码

加下面加入以下代码：

1. <script src="{$_G[setting][jspath]}jquery-1.4.4.min.js?{VERHASH}" type="text/javascript"></script>
   
2.         <script language="javascript" >        var jq = jQuery.noConflict();</script>

复制代码

3、将以下附件中的CSS倒入你的当前模板文件中的common.css下(有的模板是extend_common.css)
4、将下面的Js代码插入到foter.html文件中(也可以插件头部文件，插入位置只要不包含DIV块和IF语句即可)

1. <script type="text/javascript">
   
2.                         jq(document).ready(function(){
   
3.                                 jq('.boxgrid.thecombo').hover(function(){
   
4.                                         jq(".cover", this).stop().animate({top:'156px', left:'218px'},{queue:false,duration:300});
   
5.                                 }, function() {
   
6.                                         jq(".cover", this).stop().animate({top:'0px', left:'0px'},{queue:false,duration:300});
   
7.                                 });
   
8.                         
   
9.                         });
   
10.                 </script>

复制代码

备注：其中的top和left的宽度是用来控制滑动的效果，你也可以改为 left:156px和bottom:218px，大家可以试着去改下！效果肯定不一样！
5、上传所附件里的图片到你目前模板文件的图片文件夹中（此处只用了置顶、精华、热门、最新）
6、上传JS文件夹里的JQ到/static/js下
7、进入后台对此版块进行分类信息设置，版块的主题列表显示模板中有变量，否则滑动的效果出来里面是没有分类信息的，必须设置为默认分类信息分类显示，在全部下面，是显示不出分类信息字段的、不开启主题分类信息显示，滑动效果显示不出分类信息.
8、更新缓存即可
使用提醒：此修改只是在原程序的图片版块中引入JQ代码，添加了分类信息调用代码，实现滑动显示分类信息字段效果，大家在使用过程中，请先备份所修改的文件，第7点很重要，大家也可以自己美化，发挥自己的想像力吧！
文件已经更新，里面有JQ代码能解决滑动效果不出来，请按使用说明重新做将第6点做一下。

顶上去 都来看看吧

继续顶上去，都来看看

有没有演示。。。。。。。。。。。。。。。。。。。。

bobofashion 发表于 2012-8-20 14:13
有没有演示。。。。。。。。。。。。。。。。。。。。

www.qianwe.com

继续顶上去，都来看看

漂亮，欢迎大家来看看- www.ggbm.cn 贵港便民网

看起来不错 支持下

很不错啊 支持