设为首页收藏本站

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
DZ起点网_免费Discuz视频教程»首页 › Discuz互助平台 › Discuz交流（有问必答） › 让这个效果在discuz显示出来？
返回列表 发新帖
查看: 10439|回复: 5

让这个效果在discuz显示出来？

 火 [复制链接]
txxg
发表于 2014-6-20 00:26:59 | 显示全部楼层 |阅读模式
效果图.png 请问老师 这个效果图如何让他在DISCUZ中显示出来，他的JS代码我该放到那个文件里去，在自定义HTML代码里我如何调用他们，并让他们显示出来，这个变量$是替换该脚本程序文件夹，JS文件夹里面那个js程序？麻烦老师了。
效果图, discuz, 文件夹, 程序, 如何

jiaoben181298.rar

979.6 KB, 下载次数:

相关帖子
回复

使用道具 举报

admin
发表于 2014-6-20 16:04:39 | 显示全部楼层
将以下代码加入到DIY模板里面去
  1. <style type="text/css">
  2. /* 初始化CSS */
  3. html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }
  4. fieldset, img { border:none; }
  5. address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }
  6. ul, ol { list-style:none; }
  7. input { padding-top:0; padding-left:0; padding-bottom:0; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box }
  8. select, input { vertical-align:middle; }
  9. select, input, textarea { font-size:12px; margin:0; }
  10. table { border-collapse:collapse; }
  11. body { background:#fff; color:#333; padding:5px 0; font:12px/20px "宋体"; }
  12. .clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }
  13. .clearfix { zoom:1; }
  14. .clearit { clear:both; height:0; font-size:0; overflow:hidden; }
  15. a { color:#056ea1; text-decoration:none; }
  16. a:visited { color:#056ea1; }
  17. a:hover, a:active, a:focus { color:#f00; text-decoration:underline; }
  18. a.linkRed:link, a.linkRed:visited { color:#f00!important; }/* 红色 */
  19. a.linkRed:hover { color:#c00!important; }
  20. a.linkRed01:link, a.linkRed01:visited { color:red!important }
  21. a.linkRed01:hover { color:red!important }
  22. /* 焦点图 */
  23. .focus{overflow:hidden; zoom:1; min-width:950px; background:url(img/video_0921_04.png) repeat-x}
  24. .focus_body{background:url(img/video_0921_05.png) no-repeat center top}
  25. .scroll{ width:950px; margin:0 auto; position:relative; padding-top:16px;}
  26. .scroll .t, .arr_left, .arr_right,.scroll_txt{position:absolute;}
  27. .arr_left{ width:45px; height:70px; cursor:pointer; line-height:400px; overflow:hidden; left:0; top:135px;background:url(img/video_0921_arrow_left.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='img/video_0921_arrow_left.png');_background:none;}
  28. .arr_right{ width:45px; height:70px; cursor:pointer; line-height:400px; overflow:hidden; right:0; top:135px;background:url(img/video_0921_arrow_right.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='img/video_0921_arrow_right.png');_background:none;}
  29. .scroll .t{width:145px; height:36px; cursor:pointer;overflow:hidden; left:-10px; top:16px;background:url(img/video_1220_zyc_dsj_logo.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='img/video_1220_zyc_dsj_logo.png');_background:none;}
  30. .scroll .box{float:left; width:944px;}
  31. .scroll_cont{ border:solid 3px #fff; width:944px; height:342px}
  32. .numList{ vertical-align:middle; text-align:center; padding:8px; }
  33. .numList span{display: inline-block; width:25px; height:0; padding-top:8px; border:solid 1px #5e5e5e; margin-right:5px; background:#0f0f0f; cursor:pointer; line-height:0; font-size:0}
  34. .numList span.selected{border:solid 1px #333; background:#fff}
  35. .scroll_txt{ left:660px; top:11px;}
  36. .scroll_txt .txtbg{ position:absolute;width:257px; height:390px;left:0; top:0;background:url(img/video_0921_txtbg.png) no-repeat; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=scale, src='img/video_0921_txtbg.png');_background:none;}
  37. .scroll_txt .txtcontent{ position:absolute;left:34px; top:60px; color:#ccc; width:210px}
  38. .scroll_txt .txtcontent h2{ font-size:20px; color:#ccc; font-family:黑体; line-height:24px; padding:0 0 5px;}
  39. .scroll_txt .txtcontent p{ padding:5px 0;}
  40. .scroll_txt .txtcontent p span{ color:#2d84be;}
  41. .scroll_txt .txtcontent .btn{ text-align:center; padding:10px}
  42. .scroll_txt .txtcontent .btn a{ background:url(img/video_0921_02.png) no-repeat 0 -250px; width:94px; height:25px; display:block; margin:0 auto; cursor:pointer; line-height:400px; overflow:hidden}
  43. .txtcontent h2 a { color:#ccc;}
  44. .txtcontent h2 a:hover { color:#fff; text-decoration:none;}
  45. .txtcontent h2 a:visited { color:#ccc;}
  46. .playList{ float:right;width:308px; overflow:hidden;}
  47. .playList li{ width:290px; height:80px; padding-left:18px; background:url(img/video_0815_01.png) no-repeat}
  48. .playList li.active{ background-position:0 -80px}
  49. .playList li h3{ color:#333; font-size:16px; font-family:"微软雅黑", "黑体"; line-height:30px;}
  50. .playList li a, .playList li a:visited, .playList li a:hover{color:#333}
  51. .playList li p{ color:#898989; padding-right:9px}
  52. .playList li.active a, .playList li.active a:visited, .playList li.active a:hover, .playList li.active p{ color:#fff;}

  54. </style>


  57. <div class="focus">
  58.    <div class="focus_body">
  59.     <!--焦点图 begin -->
  60.         <div class="scroll">

  62.       <a href="javascript:void(0);" class="arr_left" id="FS_arr_left_01">左移动</a>
  63.       <a href="javascript:void(0);" class="arr_right" id="FS_arr_right_01">右移动</a>
  64.       <div class="scroll_cont" id="FS_Cont_01">
  65.           [loop]
  66.      <div class="box">
  67.               <a href="{url}" target="_blank"><img alt="{title}" src="images/U6764P167T518D1F20340DT20140307122230.jpg" /></a>
  68.      </div>
  69.           [/loop]
  70.        

  72.       </div>
  73.       <div id="FS_numList_01" class="numList"></div>
  74.       <div class="scroll_txt">
  75.         [index=1]
  76.         <div id="txt01" class="scroll_info" style="display:block">
  77.             <div class="txtbg"></div>
  78.             <div class="txtcontent">
  79.                 <h2><a href="{url}" target="_blank">{title}</a></h2>
  80.             <p>{title}</p>
  81.             <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
  82.             <div class="btn"><a href="{url}" target="_blank">播放</a></div>
  83.            </div>
  84.     </div>
  85.         [/index]

  87.         [index=2]
  88.         <div id="txt02" class="scroll_info" style="display:none">
  89.            <div class="txtbg"></div>
  90.             <div class="txtcontent">
  91.                 <h2><a href="{url}" target="_blank">{title}</a></h2>
  92.             <p>{title}</p>
  93.             <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
  94.             <div class="btn"><a href="{url}" target="_blank">播放</a></div>
  95.            </div>
  96.     </div>
  97.                 [/index]
  98. [index=3]
  99.         <div id="txt03" class="scroll_info" style="display:none">
  100.                  <div class="txtbg"></div>
  101.             <div class="txtcontent">
  102.                 <h2><a href="{url}" target="_blank">{title}</a></h2>
  103.             <p>{title}</p>
  104.             <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
  105.             <div class="btn"><a href="{url}" target="_blank">播放</a></div>
  106.            </div>
  107.     </div>
  108.                 [/index]

  110.         [index=4]
  111.         <div id="txt04" class="scroll_info" style="display:none">
  112.                <div class="txtbg"></div>
  113.             <div class="txtcontent">
  114.                 <h2><a href="{url}" target="_blank">{title}</a></h2>
  115.             <p>{title}</p>
  116.             <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
  117.             <div class="btn"><a href="{url}" target="_blank">播放</a></div>
  118.            </div>
  119.     </div>
  120.                 [/index]   
  121. [index=5]
  122.         <div id="txt05" class="scroll_info" style="display:none">
  123.                 <div class="txtbg"></div>
  124.             <div class="txtcontent">
  125.                 <h2><a href="{url}" target="_blank">{title}</a></h2>
  126.             <p>{title}</p>
  127.             <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
  128.             <div class="btn"><a href="{url}" target="_blank">播放</a></div>
  129.            </div>
  130.     </div>
  131.                 [/index]
  132. [index=6]
  133.         <div id="txt06" class="scroll_info" style="display:none">
  134.                 <div class="txtbg"></div>
  135.             <div class="txtcontent">
  136.                 <h2><a href="{url}" target="_blank">{title}</a></h2>
  137.             <p>{title}</p>
  138.             <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
  139.             <div class="btn"><a href="{url}" target="_blank">播放</a></div>
  140.            </div>
  141.     </div>
  142.                 [/index]
  143. [index=7]
  144.         <div id="txt07" class="scroll_info" style="display:none">
  145.                  <div class="txtbg"></div>
  146.             <div class="txtcontent">
  147.                 <h2><a href="{url}" target="_blank">{title}</a></h2>
  148.             <p>{title}</p>
  149.             <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
  150.             <div class="btn"><a href="{url}" target="_blank">播放</a></div>
  151.            </div>
  152.     </div>
  153.                 [/index]
  154. [index=8]
  155.         <div id="txt08" class="scroll_info" style="display:none">
  156.                  <div class="txtbg"></div>
  157.             <div class="txtcontent">
  158.                 <h2><a href="{url}" target="_blank">{title}</a></h2>
  159.             <p>{title}</p>
  160.             <p class="des"><a href="{url}" target="_blank">[详细]</a></p>
  161.             <div class="btn"><a href="{url}" target="_blank">播放</a></div>
  162.            </div>
  163.     </div>
  164.                 [/index]

  166.       </div>
  167.      </div>
  168.         <script type="text/javascript" src="js/jquery.js"></script>
  169.         <script type="text/javascript" src="js/zzsc.js"></script>
  170.     <script language="javascript" type="text/javascript">
  171.                           <!--//--><![CDATA[//><!--
  172.                           jQuery.noConflict();
  173.                          var jq=jQuery;
  174.                           var focusScroll_01 = new ScrollPic();
  175.                           focusScroll_01.scrollContId   = "FS_Cont_01"; //内容容器ID
  176.                           focusScroll_01.arrLeftId      = "FS_arr_left_01";//左箭头ID
  177.                           focusScroll_01.arrRightId     = "FS_arr_right_01"; //右箭头ID

  179.                           focusScroll_01.dotListId      = "FS_numList_01";//点列表ID
  180.                           focusScroll_01.dotClassName   = "";//点className
  181.                           focusScroll_01.dotOnClassName        = "selected";//当前点className
  182.                           focusScroll_01.listType                = "number";//列表类型(number:数字，其它为空)
  183.                           focusScroll_01.listEvent      = "onmouseover"; //切换事件

  185.                           focusScroll_01.frameWidth     = 944;//显示框宽度
  186.                           focusScroll_01.pageWidth      = 944; //翻页宽度
  187.                           focusScroll_01.upright        = false; //垂直滚动
  188.                           focusScroll_01.speed          = 10; //移动速度(单位毫秒，越小越快)
  189.                           focusScroll_01.space          = 50; //每次移动像素(单位px，越大越快)
  190.                           focusScroll_01.autoPlay       = true; //自动播放
  191.                           focusScroll_01.autoPlayTime   = 5; //自动播放间隔时间(秒)
  192.                           focusScroll_01.circularly     = true;
  193.                           focusScroll_01.initialize(); //初始化
  194.                           focusScroll_01.onpagechange = function(){
  195.                             jq(".scroll_info").hide();
  196.                             jq("#txt0"+(focusScroll_01.pageIndex+1)).show();
  197.                           };

  199.                           //--><!]]>
  200.                 </script>

  202.     <!--焦点图 end -->
  203.     </div>
  204.    </div>
复制代码

下载压缩包文件，解压后的JS文件上传到网站根目录！
js.zip (17.87 KB, 下载次数: )

效果就实现了！
回复

使用道具 举报

txxg
 楼主| 发表于 2014-6-20 21:06:33 | 显示全部楼层
老师是不是放在自定义HTML框架里面？
q1.jpg
回复

使用道具 举报

txxg
 楼主| 发表于 2014-6-20 21:36:42 | 显示全部楼层
老师效果是显示出来了 但是他只在右下角，显示只出了一半该附件图片。
11.png
回复

使用道具 举报

txxg
 楼主| 发表于 2014-6-20 23:40:35 | 显示全部楼层
您给的东西我在一年前都已经学完了
回复

使用道具 举报

admin
发表于 2014-6-21 08:06:22 | 显示全部楼层
txxg 发表于 2014-6-20 13:06
老师是不是放在自定义HTML框架里面？

不是 ，
步骤如下

DIY

框架

帖子模块


更改模块模板


就可以了
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|Discuz代码分析|Discuz目录结构|DZ起点网 ( 蜀ICP备13000518号-15 )

GMT+8, 2024-12-24 21:25 , Processed in 0.060544 second(s), 24 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表