免費論壇 繁體 | 簡體
Sclub交友聊天~加入聊天室當版主
分享

首页N格免安装、不调用flash版

本文来自:★flash之路-flash技术交流★ 转帖请注明出处! 作者:flashroad 您是第1867个浏览者

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
flashroad友情提示:
“点评”不是“回帖”!
【版权】
http://icode.258club.com/thread-46-1-1.html

【说明】
sclub官方提供了 首页N格(缓存版) 的安装和使用,你必须去sclub后台【注意:不是discuz后台】申请安装该插件,然后经过超长时间的等待,才可以在discuz后台【就是我们经常说的后台】配置使用。

本教程就是免除插件安装的,直接按照下面的步骤做,就可以轻松搞定了。
本N格只是将 缓存版的 flash调用图片轮播进行了替换,不需要使用flash,如此一来,在手机端也可以看到图片轮播了
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.

友情提示:单击下列任意一个表情,即可瞬间自动回复本帖!

好贴......
郁闷......
开心......
擦汗......
鄙视......
狂怒
谢谢
爱你呦
拜托了
嗯嗯
OMG
求关注
伤心......
无奈.....
无奈.....
无奈.....
无奈.....
无奈.....
哈哈哈
NO
OK
what
我来了

最近访问本帖者列表:

天使小小
访问时间:2020-04-09 10:05
阿么
访问时间:2019-05-03 04:17
皓皓兒
访问时间:2018-11-01 22:58
flashroad
访问时间:2018-09-25 15:02
无界
访问时间:2018-09-02 00:45

打赏

取消

感谢您的支持,我会继续努力的!

扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by 爱秀代码,分享从这里开始,精彩与您同在

点评
B Color Smilies

您还可以输入:个字符
X

X

一、导入数据调用文件



将这个xml格式的附件下载,然后进入自己论坛的后台,依次单击:

工具>数据调用>导入

将这个xml文件导入即可
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
附件: 您需要登录才可以下载或查看附件。没有帐号?注册

获得 大天使卡 一张

卡片说明:flashroad照顾了失踪的小狗,主人付出了7金钱以作感谢

卡片效果:+7

点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

二、新建i_js1模板

  1. /*
  2. 常用页面效果,基于jquery,所有obj对象可用jquery选择器
  3. Author: cosa
  4. Creation Date: 2008-12-23
  5. Updated Date:  2009-1-7
  6. */
  7. /*
  8. ==slightbox==
  9. 属性{对象|关闭对象|不透明度[为0时不显示背景]|关闭延迟}
  10. */
  11. function slightbox(obj,oclose,opacity,ctime){       
  12.         var _this = this;
  13.         _this.d = jQuery(obj);
  14.         var mkdiv

  15.         _this.cenvelop = function(){       
  16.                 if(opacity){
  17.                         mkdiv = document.createElement("div");
  18.                         jQuery(mkdiv).css({position:"absolute",zIndex:"9998",left:"0",top:"0",right:"0",width:"100%",background:"#000000"});
  19.                         jQuery("body").append(jQuery(mkdiv));
  20.                         jQuery(mkdiv).css("opacity",opacity);
  21.                 }
  22.                 _this._resize();
  23.         }
  24.        
  25.         _this._resize = function(){
  26.                 jQuery(mkdiv).css("height",Math.max(document.documentElement.scrollHeight,document.documentElement.clientHeight) + "px");
  27.                 jQuery(mkdiv).css("width",document.documentElement.clientWidth + "px");
  28.                 var _x = Math.round((document.documentElement.clientWidth-this.d.width())/2);
  29.                 var _y = Math.round((document.documentElement.clientHeight-this.d.height())/2);
  30.                 _this.d.css({"position":"absolute","zIndex":"9999","left":_x+"px","top":_y+"px"});
  31.         }
  32.        
  33.         _this.closed = function(){
  34.                 jQuery(mkdiv).remove();
  35.                 _this.d.remove();
  36.                 return false;
  37.         }
  38.        
  39.         var sctop = 0;
  40.        
  41.         jQuery(window).resize(function(){
  42.                 _this._resize();
  43.         });
  44.        
  45.         var top = (document.documentElement.clientHeight-this.d.height())/2;
  46.        
  47.         jQuery(window).scroll(function(){
  48.                 jQuery(obj).css("top",document.documentElement.scrollTop - sctop + top + "px");       
  49.                 sctop = document.documentElement.scrollTop;
  50.                 top = parseInt(jQuery(obj).css("top"));
  51.         });
  52.        
  53.         if(ctime){
  54.                 setTimeout(_this.closed, ctime)       
  55.         }
  56.        
  57.         jQuery(oclose).click(function(){_this.closed();})
  58.        
  59.         _this.cenvelop();
  60. }
  61. /*

  62. /*
  63. ==轮播{对象|对象属性}==
  64. 对象属性{宽度|高度|文字大小|自动切换时间}
  65. */
  66. function dk_slideplayer(object,config){
  67.         this.obj = object;
  68.         this.config = config ? config : {width:"300px",height:"200px",fontsize:"12px",right:"10px",bottom:"10px",time:"5000"};
  69.         this.pause = false;
  70.         var _this = this;
  71.         if(!this.config.right){
  72.                 this.config.right = "0px"
  73.         }
  74.         if(!this.config.bottom){
  75.                 this.config.bottom = "1px"
  76.         }
  77.         if(this.config.fontsize == "12px" || !this.config.fontsize){
  78.                 this.size = "12px";
  79.                 this.height = "21px";
  80.                 this.right = "6px";
  81.                 this.bottom = "10px";
  82.         }else if(this.config.fontsize == "14px"){
  83.                 this.size = "14px";
  84.                 this.height = "50px";
  85.                 this.right = "6px";
  86.                 this.bottom = "15px";
  87.         }
  88.         this.count = jQuery(this.obj + " li").size();
  89.         this.n =0;
  90.         this.j =0;
  91.         var t;
  92.         this.factory = function(){
  93.                 jQuery(this.obj).css({position:"relative",zIndex:"0",margin:"0",padding:"0",width:this.config.width,height:this.config.height,overflow:"hidden"})
  94.                 jQuery(this.obj).prepend("<div style='position:absolute;z-index:20;right:"+this.config.right+";bottom:"+this.config.bottom+"'></div>");
  95.                 jQuery(this.obj + " li").css({width:"100%",height:"100%",overflow:"hidden"}).each(function(i){jQuery(_this.obj + " div").append("<a>"+(i+1)+"</a>")});

  96.                 jQuery(this.obj + " img").css({border:"none",width:"100%",height:"100%"})

  97.                 this.resetclass(this.obj + " div a",0);

  98.                 jQuery(this.obj + " p").each(function(i){                       
  99.                         jQuery(this).parent().append(jQuery(this).clone(true));
  100.                         jQuery(this).html("");
  101.                         jQuery(this).css({position:"absolute",margin:"0",padding:"0",zIndex:"1",top:"0",left:"0",height:_this.height,width:"100%",background:"#0080FF",opacity:"0.4",overflow:"hidden"})
  102.                         jQuery(this).next().css({position:"absolute",margin:"0",padding:"0",zIndex:"2",top:"0",left:"0",height:_this.height,lineHeight:_this.height,textIndent:"5px",width:"100%",textDecoration:"none",fontSize:_this.size,color:"#FFFFFF",background:"none",zIndex:"1",opacity:"1",overflow:"hidden"})
  103.                         if(i!= 0){jQuery(this).hide().next().hide()}
  104.                 });

  105.                 this.slide();
  106.                 this.addhover();
  107.                 t = setInterval(this.autoplay,this.config.time);
  108.         }
  109.        
  110.         this.slide = function(){
  111.                 jQuery(this.obj + " div a").mouseover(function(){
  112.                         _this.j = jQuery(this).text() - 1;
  113.                         _this.n = _this.j;
  114.                         if (_this.j >= _this.count){return;}
  115.                         jQuery(_this.obj + " li").hide();
  116.                         jQuery(_this.obj + " p").hide();
  117.                         jQuery(_this.obj + " li").eq(_this.j).fadeIn("slow");
  118.                         jQuery(_this.obj + " li").eq(_this.j).find("p").show();
  119.                         _this.resetclass(_this.obj + " div a",_this.j);
  120.                 });
  121.         }

  122.         this.addhover = function(){
  123.                 jQuery(this.obj).hover(function(){clearInterval(t);}, function(){t = setInterval(_this.autoplay,_this.config.time)});
  124.         }
  125.        
  126.         this.autoplay = function(){
  127.                 _this.n = _this.n >= (_this.count - 1) ? 0 : ++_this.n;
  128.                 jQuery(_this.obj + " div a").eq(_this.n).trigger('mouseover');
  129.         }
  130.        
  131.         this.resetclass =function(obj,i){
  132.                 jQuery(obj).css({float:"left",marginRight:"1px",width:"22px",height:"15px",lineHeight:"15px",textAlign:"center",fontWeight:"800",fontSize:"12px",color:"#FFFFFF",background:"#999",cursor:"pointer",opacity:"0.8"});
  133.                 jQuery(obj).eq(i).css({color:"#FFFFFF",background:"#0080FF",textDecoration:"none",width:"32px"});
  134.         }

  135.         this.factory();
  136. }
  137. /*
  138. 选项卡|显示隐藏层
  139. 选项卡属性设置: {mobj:"#m1",mchild:"li",mclass:"tds",eobj:"#m2",echild:"div",first:"1"};
  140.               mobj: 触发鼠标事件
  141. */
  142. function optioncard(config){
  143.         this.config         = config;
  144.         var _this = this;
  145.        
  146.         this.resetall = function(i){
  147.                 if(!this.config.mchild && !this.config.echild){
  148.                         if(i==0){
  149.                                 jQuery(_this.config.mobj).removeClass(_this.config.mclass);
  150.                                 jQuery(_this.config.eobj).hide();
  151.                                 return;
  152.                         }
  153.                         if(i==1){
  154.                                 jQuery(_this.config.mobj).addClass(_this.config.mclass);
  155.                                 jQuery(_this.config.eobj).show();
  156.                                 return;
  157.                         }
  158.                 }else{
  159.                         jQuery(this.config.mobj).find(this.config.mchild).removeClass(this.config.mclass);
  160.                         jQuery(this.config.eobj).find(this.config.echild).hide();
  161.                         jQuery(this.config.mobj).find(this.config.mchild).eq(i).addClass(this.config.mclass);
  162.                         jQuery(this.config.eobj).find(this.config.echild).hide().eq(i).show();
  163.                 }
  164.         }

  165.         if(this.config.mchild && this.config.echild){
  166.                 if(!this.config.first) this.config.first = 1;
  167.                 this.resetall(this.config.first-1);
  168.                 jQuery(this.config.mobj).find(this.config.mchild).each(function(i){
  169.                         jQuery(this).mouseover(function(){
  170.                                 _this.resetall(i);
  171.                         })       
  172.                 })
  173.         }else{
  174.                 jQuery(this.config.mobj).hover(function(){_this.resetall(1)},function(){_this.resetall(0)});
  175.                 jQuery(this.config.eobj).hover(function(){_this.resetall(1)},function(){_this.resetall(0)});
  176.         }       
  177. }
复制
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.

获得 花仙子卡 一张

卡片说明:flashroad照顾了失踪的小狗,主人付出了6金钱以作感谢

卡片效果:+6

点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

三、新建jq库

这里,你有两种选择,请任选其一。不要同时都选择!

选择一:
已经在自己的论坛内安装了jq库的朋友,请无视本楼
===================================================
选择二:
没有安装过jq库的朋友,你有两种选择【请单选,不要两个都选】:
【1】建议你安装jq库,因为这个东西需要经常使用:,打开下帖安装即可:
http://flashroad.joinbbs.net/thread-970-1-1.html
注意,只看上贴的2楼! 3楼不用管【除非你需要用章鱼之家的jq库,那就只看3楼,不要看2楼】
`````````````````````````````````````````````
【2】如果你不想安装jq库,请新建一个i_js2的模板,内容就是jq库的所有代码,你可以打开这个网址:
http://flashroad.joinbbs.net/templates/default/jquery.htm
将里面的所有代码复制、粘贴到这个i_js2的模板内即可
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

四、新建i_xshow 模板

说明,这个新建的模板内需要添加下面的内容
代码中的2、3两行,需要将default修改为自己风格对应的名字
第3行中的templates/default/i_js2.htm就是楼上的jq库。 如果你安装了jq库,请去掉整个第3行
  1. <script type="text/javascript" src="images/xshow/title.js"></script>
  2. <script type="text/javascript" src="templates/default/i_js1.htm" ></script>
  3. <script type="text/javascript" src="templates/default/i_js2.htm" ></script>

  4. <style type="text/css">
  5. .xshow{width:99.9%;margin:0 auto 4px;padding:5px 0 2px 0;background:{WRAPBG};border:{WRAPBORDER} solid {WRAPBORDERCOLOR};}
  6. .xshow table {background:{WRAPBG};text-align:left;border:none;}
  7. .xshow .header td{text-align:center;height:31px;border-bottom:3px solid {COMMONBORDER};}
  8. .xshow .border{border-right:1px solid {COMMONBORDER};}
  9. .xshow .txt_con td{padding:5px;}
  10. .xshow .txt td{padding:0;vertical-align:top;}
  11. .xshow .txt div{width:100%;height:20px;background:url('images/xshow/listbg.gif') repeat-x;overflow:hidden;}
  12. .xshow .txt span{float:right;}
  13. .xshow .fiveline{border-top:1px solid {COMMONBORDER};padding: 0 5px;}
  14. .xshow .fiveline img{width:48px;heigth:48px;margin:2px 8px 0 0;border:1px solid {COMMONBORDER};}
  15. .xshow li {list-style: none;}
  16. </style>

  17. <div class="xshow">
  18.   <table cellspacing="0" cellpadding="0" width="99%" align="center">
  19.      <tr class="header">
  20.       <td class="border"><h3>精彩图片</h3></td>
  21.       <td class="border"><h3>最新帖子</h3></td>
  22.       <td class="border"><h3>最新回复</h3></td>
  23.       <td class="border"><h3>精华帖子</h3></td>
  24.       <td><h3>会员排行</h3></td>
  25.     </tr>
  26.     <tr class="txt_con">
  27. <td width="28%" class="border">
  28. <div class="tlb-disma" id="tbca_01">
  29. {eval request('仿火狼_精彩图片');}
  30. <script type="text/javascript">new dk_slideplayer("#tbca_01",{width:"100%",height:"213px",fontsize:"12px",time:"5000"});</script>
  31. </div>
  32. </td>
  33. <td width="20%" class="border">
  34.         <table cellpadding="0" cellspacing="0" class="txt">
  35.           <tr>
  36.             <td><img src="images/xshow/list.gif" alt="" /></td>
  37.             <td width="100%">
  38. {eval request('i_最新主题');}
  39.             </td>
  40.           </tr>
  41.         </table>
  42.       </td>
  43. <td width="20%" class="border">
  44.         <table cellpadding="0" cellspacing="0" class="txt">
  45.           <tr>
  46.             <td><img src="images/xshow/list.gif" alt="" /></td>
  47.             <td width="100%">
  48. {eval request('i_最新回复');}
  49.             </td>
  50.           </tr>
  51.         </table>
  52.       </td>
  53. <td width="20%" class="border">
  54.         <table cellpadding="0" cellspacing="0" class="txt">
  55.           <tr>
  56.             <td><img src="images/xshow/list.gif" alt="" /></td>
  57.             <td width="100%">
  58. {eval request('i_精华帖子');}
  59.             </td>
  60.           </tr>
  61.         </table>
  62.       </td>
  63.       <td>
  64.         <table cellpadding="0" cellspacing="0" class="txt">
  65.           <tr>
  66.             <td><img src="images/xshow/list.gif" alt="" /></td>
  67.             <td width="100%">
  68. {eval request('i_金币飙升榜');}
  69.             </td>
  70.           </tr>
  71.         </table>
  72.       </td>
  73.     </tr>
  74.   </table>
  75. {eval request('i_新会员');}
  76. </div>
复制
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

五、修改discuz模版

找到
$pluginhooks[index_header]

在它的下边加
{template i_xshow}

就可以了!


【特别说明】如果你之前安装并使用了sclub官方提供的 首页N格(缓存版) ,填上上面的代码后,就会出现两个N格,此时需要先去掉首页N格(缓存版)
方法是:还是在discuz模版 找到并删除{template xshow}即可
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.

获得 大怪兽卡 一张

卡片说明:flashroad被风吹乱了秀发,花费了8金币请理发师整理了一个酷炫发型

卡片效果:-8

点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

补充说明

如果想自定义显示的版块,请至后台

工具>数据调用>[i]
发现有如下5个项目:

新会员       
最新主题       
最新回复       
精华帖子       
金币飙升榜

点击某一个项目右边的“编辑”
就可以设置了
进入编辑后,你可以设置调用的版块 等信息,非常方便
您所在的用户组只能看到部分内容.
如查看全部内容, 请先登录或者注册.
点评
B Color Smilies

您还可以输入:个字符
X

X

TOP

 

B Color Image Link Quote Code Smilies
高级模式 | 发新话题

您需要登录后才可以回帖 登录|立即注册

快速
返回顶部
返回首页