账号通
    

账号  

密码  

7294

查看

13

回复
主题:后台增加 myFocus 焦点图幻灯风格 [收藏主题] 转到:  
悠客 当前离线

213

主题

15

广播

7

粉丝
添加关注
级别:二年级

用户积分:996 分
登录次数:401 次
注册时间:2010/11/8
最后登录:2019/10/28
悠客 发表于:2012/2/22 16:27:00   | 显示全部帖子 查看该作者主题 楼主 
科汛在线网校系统

  相关知识:

  myFocus是一个专注于焦点图/轮换图制作的JS库,它小巧而且是完全独立的JS库,大概是6~7KB左右的大小(min版),用它可以轻松的制作出网上绝大部分常见的焦点图(甚至包括flash焦点图),而且制作出的焦点图体积也非常的小(1KB左右),功能也十分的完备,因为是轻量级,其运行效率也比常见的焦点图要高,最重要的一点是,用myFocus制作出的焦点图使用十分的简单方便,而且每个焦点图的接口/结构都是通用的,这样,只用1~2秒时间就给网站换不同风格的焦点图成为了可能。

  myFocus作为一个国人开发的JS库,可自由定制和支持换风格是其特点,自带十几种幻灯效果。推荐大家试用,详细的使用帮助请看演示页面

  为看到本方法实现的直观效果,在此演示页面,我们选择mF_sohusports风格,设置宽度314px,高度260px。



  实现方法:

  论坛另外有童鞋发布了使用SQL标签实现焦点图幻灯的方法:http://bbs.kesion.com/forumthread-192609.html,个人感觉在后台增加这种幻灯风格更方便一些。

  一、打开Admin/Include/Label/GetSlide.asp,找到(大概在294行左右),

  1.   .echo "<option value=""5"">flash幻灯4(推荐)</option>"
  2.   .echo "<option value=""6"" style=""color:red"">焦点图幻灯(推荐)</option>"

插入红色部分代码。

  这样,后台“首页幻灯片标签”已经增加了一个名为“焦点图幻灯(推荐)”的幻灯类型。



  二、打开KS_Cls/Kesion.Label.FunctionCls.asp,大概在1047行下面,增加以下代码:

  1.     case 6
  2.      echoln "<script type=""text/javascript"" src=""" & DomainStr &"ks_inc/myfocus/myfocus-1.2.4.min.js""></script>"
  3.      echoln "<script type=""text/javascript"" src=""" & DomainStr &"ks_inc/myfocus/pattern/mF_sohusports.js""></script>"
  4.      echoln "<link type=""text/css"" href=""" & DomainStr &"ks_inc/myfocus/pattern/mF_sohusports.css"" rel=""stylesheet"" /> "
  5.      echoln "<script type=""text/javascript"">"
  6.      echoln "myFocus.set({id:'myFocus',path:'" & DomainStr &"ks_inc/myfocus/pattern/',pattern:'mF_sohusports',txtHeight:'default',width:" & Width & ",height:" & Height & "});"
  7.      echoln "</script>"
  8.      echoln "<div id=""mF_sohusports""><!--焦点图盒子-->"
  9.      echoln "<div id=""myFocus"" style=""visibility:hidden"">"
  10.      'echoln "<div class=""loading""><span>请稍候...</span></div><!--载入画面-->"
  11.      echoln "<ul class=""pic""><!--内容列表-->"
  12.         For K=0 To TotalNum-1
  13.          Set Node=DocNode.Item(K)
  14.           PhotoUrl = Node.SelectSingleNode("@photourl").text : PhotoUrl = GetPicUrl(PhotoUrl)
  15.       If Cint(ModelID)=-1000 Then
  16.           LinkUrl = KS.GetClubShowUrl(Node.SelectSingleNode("@id").text)
  17.       Else
  18.       If ModelID=0 Then CurrModelID=Cint(Node.SelectSingleNode("@channelid").text) Else CurrModelID=ModelID
  19.           LinkUrl = KS.GetItemURL(CurrModelID,Node.SelectSingleNode("@tid").text,Node.SelectSingleNode("@id").text,Node.SelectSingleNode("@fname").text)
  20.       End If
  21.           TempTitle = KS.GotTopic(KS.LoseHtml(Node.SelectSingleNode("@title").text) ,T_Len)
  22.      echoln "<li><a href=""" & LinkUrl & """ target=""_blank""><img src=""" & PhotoUrl & """ thumb="""" alt=""" & TempTitle & """ text=""" & TempTitle & """ /></a></li>"
  23.          Next  
  24.      echoln "</ul>"
  25.      echoln "</div></div>"

  说明:这段代码一定要放在下面的 End Select 这句代码前面。同时请大家注意上面这句红色的代码,表示风格应用文件的目录路径为你所建网站的JS和CSS样式(如果不加这句代码,默认指向官方提供的对应CSS和图片,可能与你网站风格不搭配)。相关参数设置请参阅 http://www.chhua.com/myfocus/api.html 技术文档。



  三、增加相关JS和CSS样式,将 myfocus 文件夹(里面的CSS文件我已作相关修改)放在KS_Inc下面。

  根据上面的思路,你可以轻松制作 http://www.chhua.com/myfocus/index.html 提供的各类焦点图幻灯效果。

  下面是已经修改好的文件:

 下载信息  [文件大小:44.55 KB 下载次数: 次]
点击下载文件:焦点图幻灯.rar



  PS:如果使用默认的图片缩放功能,增加 autoZoom:true ,前台显示的图片会有些变形。因此只好对DIV盒子做文章。修改mF_sohusports.css样式,以下文件代码仅供参考:

  1. /*=========mF_sohusports========*/
  2. .mF_sohusports{margin:2px;border:1px solid #E7E7E7;float:left;background:#fff;position:relative;}/*背景边框*/
  3. .mF_sohusports .loading{position:absolute;z-index:9999;width:100%;height:100%;color:#666;text-align:center;padding-top:90px; background:#fff url(img/loading.gif) center -40px no-repeat;}/*载入画面*/
  4. .mF_sohusports img {vertical-align: middle;max-width: 100%!important;height: auto!important;width:expression(this.width > 314 ? "314px" : this.width)!important;display:inline !important;}/*图片缩放*/
  5. .mF_sohusports .pic li{position:absolute;}
  6. .mF_sohusports .txt li{position:absolute;z-index:2;bottom:0;width:313px;height:60px;line-height:32px;}
  7. .mF_sohusports .txt li a{display:block;position:relative;z-index:1;color:#fff;padding-left:8px;font-size:14px;font-weight:bold;text-decoration:none;}/*标题样式*/
  8. .mF_sohusports .txt li span{display:block;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.8;}/*标题背景*/
  9. .mF_sohusports .txt li p{display:none;}/*隐藏详细描述*/
  10. .mF_sohusports .num{position:absolute;z-index:3;bottom:8px;right:6px;}/*按钮样式*/
  11. .mF_sohusports .num li{float:left;}
  12. .mF_sohusports .num li a{color:#fff;float:left;width:20px;height:20px;line-height:18px;overflow:hidden;text-align:center;margin-right:4px;cursor:pointer;background:url(img/sh-btn.gif) left no-repeat;text-decoration:none;}
  13. .mF_sohusports .num li.current a,.mF_sohusports .num li.hover a{color:#FF7B11;background-position:right;}/*当前/悬停按钮样式*/

  建议后台幻灯片大小设置为314×209像素。

点评 2

乱弹琴:5.0     说得很好:5.0     
veryp 乱弹琴:5 说得很好:5
非常不错的,官方早就应该把系统里的新浪SHOU效果全删了 没什么用的,,直接正合这个全搞定; 威望+2 发表于 2013/2/23 13:42:00 
 
科讯NET交流群 321062970
  支持(23) | 反对(23) 回到顶部顶端 回到底部底部
<上一主题 | 下一主题 >
Powered By KesionCMS Version X1
厦门科汛软件有限公司 © 2006-2016 页面执行0.09375秒 powered by KesionCMS 9.0