您的位置:首页> 日志> 动易系统 正文
DTOP

结合系统打造万能焦点图

大话主席 | 2011年08月12日 |

>>收藏本文 已有 4条评论

 

前言:

就网站输出而言,焦点图和滑动门切换是最常用的两个特效。但系统默认的焦点图样色固定,不能满足客户需求或者实现设计图上炫丽的效果,有js功底的同事可以自己根据需要制作焦点图特效,但对于没js基础的同事来说,这是一个很痛苦的事,那么我们可不可以制作一个简单易用的“万能焦点图”来实现我们的需求呢。仔细思考,其实焦点图本身就是一个滑动门切换的效果,而滑动门切换是我们最常用的特效,是每位设计部同事必须掌握的技能。

所以,本文就是结合动易系统和我们最常用的滑动门切换特效“jQuery:switchTab”来制作万能焦点图。

 

目录:

一、现象分析

二、滑动门切换特效(switchTab)

三、万能焦点图使用说明(想直接使用,只看这里即可。附【实现效果】【文件下载】)

四、扩展

五、总结

 

一、现状分析

系统默认焦点图缺点:

1、  样色不能根据需求自定义设置

2、  不能满足客户要求

3、  不能实现效果图上的效果

点击查看 默认焦点图效果

 

解决方法:

自己做一个焦点图特效,能自定义样色,解决绝大部分需要。

 

二、滑动门切换特效

这部分我们主要谈一下焦点图制作思路和解决默认switchTab缺点,实现我们所需效果的过程。

其实,仔细观察,焦点图本身就是一个滑动门切换的特效。

我们先看一下jQuery:switchTab这个特效的使用方式是怎样的,最大的好处就是自由度很高,能先把html效果输出来,再通过参数来控制怎样切换。

源文件:http://dtop.powereasy.net/Skin/DTOP/switchTab.js

参数:

* JQuery滑动切换插件 ver 1.2.0

*

* defaultIndex         - 默认选中的标签索引,从0开始

* titOnClassName   - 标签选中时的样式

* titCell                       - 自定义标题标签,支持选择符//切换索引

* mainCell                  - 自定义标题标签,支持选择符//切换内容

* delayTime                        - 延迟触发时间. 当这个时间小于切换动画效果时间时, 动画将被禁用

* interTime                - 自动切换时间. 当这个时间大于0, 标签将定时自动切换

* trigger                     - 滑动触发方式. 默认为click, 可选择mouseover

* effect                       - 切换动画. 默认不使用动画. 目前仅提供fade(淡出), slide(向下展开)两种

* omitLinks                - 是否忽略带链接标签,默认为否

* debug                      - 调试模式. 默认关闭

 

理解switchTab后,我们就可以使用switchTab制作的焦点图(效果)。

缺点:鼠标悬停在数字上面或者大图上面的时候,自动切换继续,这是不好的用户体验,于是我们修改一下switchTab代码。

 

结果:

修改后的switchTab制作的焦点图效果

修改后的源代码:http://dtop.powereasy.net/Skin/DTOP/switchTab_zx.js

主要解决了“鼠标悬停在数字上面或者大图上面的时候,自动切换继续”的错误。

实现我们最终需要的效果。

 

三、万能焦点图使用说明

        实现效果】【文件下载

1、  复制“内容带图片的信息列表_焦点图带内容.config”标签到标签库里;

2、  复制“switchTab_zx.js”到样色文件夹下(或者替换你原来使用的switchTab代码,绝对不影响原本已经输出好的页面);

3、  复制“css代码”到自己的样色文件下( 这里预设了4种样色

4、  在具体地方调用,调用方式:

<dl id="adNewsDefault" >

{PE.Label id="内容带图片的信息列表" bindStyle="焦点图带内容" titleLength="40" contentLength="140" outputQty="4" nodes="1" listOrderByNodeSet="true" displayTips="true"/}

</dl>

<script type="text/javascript" src="/Skin/DTOP/switchTab_zx.js"></script>

<script language="javascript">

jQuery("#adNewsDefault").switchTab({titCell: "dt a",delayTime:"300", interTime:"2000", trigger: "mouseover", effect: "fade"});

</script>

1、如果你是覆盖原来使用的switchTab代码,那么就不用在调用“switchTab_zx.js”了。

   2、“内容带图片的信息列表_焦点图带内容.config”其实就是“内容带图片的信息列表”的样色标签,支持该标签所有参数)

 

5、  如有需要,自己修改css代码来实现所需效果。如果“内容带图片的信息列表_焦点图带内容.config”的html结构不能满足需求,那么请自行修改标签,实现所需效果。

 

四、扩展

只要理解了switchTab后,我们甚至可以脱离“内容带图片的信息列表_焦点图带内容.config”这个标签,按照实际情况来实现各种效果。

例如【实现效果】最后一个就是用两个“内容带图片的信息列表_普通式”实现的效果

  

 

五、总结

现在的“万能焦点图”还是有一个缺点,就是切换效果只支持淡入淡出和直接的显示隐藏,日后可能会追加一些滚动效果等。

希望这篇文章能帮到大家,谢谢。