相关知识:
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行左右),
- .echo "<option value=""5"">flash幻灯4(推荐)</option>"
- .echo "<option value=""6"" style=""color:red"">焦点图幻灯(推荐)</option>"
插入红色部分代码。
这样,后台“首页幻灯片标签”已经增加了一个名为“焦点图幻灯(推荐)”的幻灯类型。
二、打开KS_Cls/Kesion.Label.FunctionCls.asp,大概在1047行下面,增加以下代码:
- case 6 echoln "<script type=""text/javascript"" src=""" & DomainStr &"ks_inc/myfocus/myfocus-1.2.4.min.js""></script>"
- echoln "<script type=""text/javascript"" src=""" & DomainStr &"ks_inc/myfocus/pattern/mF_sohusports.js""></script>"
- echoln "<link type=""text/css"" href=""" & DomainStr &"ks_inc/myfocus/pattern/mF_sohusports.css"" rel=""stylesheet"" /> "
- echoln "<script type=""text/javascript"">"
- echoln "myFocus.set({id:'myFocus',path:'" & DomainStr &"ks_inc/myfocus/pattern/',pattern:'mF_sohusports',txtHeight:'default',width:" & Width & ",height:" & Height & "});"
- echoln "</script>"
- echoln "<div id=""mF_sohusports""><!--焦点图盒子-->"
- echoln "<div id=""myFocus"" style=""visibility:hidden"">"
- 'echoln "<div class=""loading""><span>请稍候...</span></div><!--载入画面-->"
- echoln "<ul class=""pic""><!--内容列表-->"
- For K=0 To TotalNum-1
- Set Node=DocNode.Item(K)
- PhotoUrl = Node.SelectSingleNode("@photourl").text : PhotoUrl = GetPicUrl(PhotoUrl)
- If Cint(ModelID)=-1000 Then
- LinkUrl = KS.GetClubShowUrl(Node.SelectSingleNode("@id").text)
- Else
- If ModelID=0 Then CurrModelID=Cint(Node.SelectSingleNode("@channelid").text) Else CurrModelID=ModelID
- LinkUrl = KS.GetItemURL(CurrModelID,Node.SelectSingleNode("@tid").text,Node.SelectSingleNode("@id").text,Node.SelectSingleNode("@fname").text)
- End If
- TempTitle = KS.GotTopic(KS.LoseHtml(Node.SelectSingleNode("@title").text) ,T_Len)
- echoln "<li><a href=""" & LinkUrl & """ target=""_blank""><img src=""" & PhotoUrl & """ thumb="""" alt=""" & TempTitle & """ text=""" & TempTitle & """ /></a></li>"
- Next
- echoln "</ul>"
- 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 提供的各类焦点图幻灯效果。
下面是已经修改好的文件:
PS:如果使用默认的图片缩放功能,增加 autoZoom:true ,前台显示的图片会有些变形。因此只好对DIV盒子做文章。修改mF_sohusports.css样式,以下文件代码仅供参考:
- /*=========mF_sohusports========*/
- .mF_sohusports{margin:2px;border:1px solid #E7E7E7;float:left;background:#fff;position:relative;}/*背景边框*/
- .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;}/*载入画面*/
- .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;}/*图片缩放*/
- .mF_sohusports .pic li{position:absolute;}
- .mF_sohusports .txt li{position:absolute;z-index:2;bottom:0;width:313px;height:60px;line-height:32px;}
- .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;}/*标题样式*/
- .mF_sohusports .txt li span{display:block;height:100%;position:absolute;top:0;left:0;background:#000;filter:alpha(opacity=40);opacity:0.8;}/*标题背景*/
- .mF_sohusports .txt li p{display:none;}/*隐藏详细描述*/
- .mF_sohusports .num{position:absolute;z-index:3;bottom:8px;right:6px;}/*按钮样式*/
- .mF_sohusports .num li{float:left;}
- .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;}
- .mF_sohusports .num li.current a,.mF_sohusports .num li.hover a{color:#FF7B11;background-position:right;}/*当前/悬停按钮样式*/
建议后台幻灯片大小设置为314×209像素。