您的位置:首页> 日志> 前端技术 正文
DTOP

瀑布流多格焦点图切换

红狼哥 | 2012年10月31日 |

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

目前各大商城中应用到非常多的特效,让网站看起来非常绚丽,对于广告版位的特效更是别出心裁,其中多图切换的广告非常实用;续9月的前端任务“多格带切换的焦点图”,进一步把这个效果应用到项目中,结合BI4.7的广告版位系统(PS:重点是广告系统,不限版本)+SuperSlider+Masonry实现天猫商城首页的多图广告切换效果,在这里将制作原理及思路分享给大家!

不带切换的多图广告


带切换的多图广告


要实现上图只需满足2个条件:瀑布流、切换,然后再系统的广告版位功能就能实现自由控制了。

一:瀑布流
瀑布流的优点在于
1、布局简单,没有特别的难点;
2、不必明确知道数据块高度,当数据块中有图片时,就不需要指定图片高度。
瀑布流布局的缺点
1、列数固定,扩展不易,当浏览器窗口大小变化时,只能固定的x列,如果要添加一列,很难调整数据块的排列;
2、滚动加载更多数据时,还要指定插入到第几列中,不够方便。
3、只有高级浏览器中才能使用;
4、数据块排列是从上到下排列到一定高度后,再把剩余元素依次添加到下一列,这个本质上就不一样了;鉴于这些主要缺点,注定了该方法只能局限于高端浏览器,而且,更适合于文字多栏排列。

在这里我们需要应用的布局必须是支持任意的列,能自适应高宽要实现这样的效果,必须了解瀑布流的原理,以最小单位一滴水为例,当一滴水分为2滴或多滴的时候,必须等分,即图片必须是等宽或倍宽。在这里我们是借用jquery masonry的瀑布流插件来实现的。

二:切换
这里superSlide来做切换效果,其实结构非常简单、直观

三:广告版位
使用系统自有的广告系统非常方便
注:在制作图片的时候一定要注意图片的宽度和高度一定要等分,例:总宽度为800px,如果是分为2列,该屏图片的宽度统一是400px,如果分为5列,该图片的宽度160px,高度也是一样的方式;当宽度没计算精准时,就达不到想像中的效果。

首先按广告位的大小创建一个广告版位


然后按广告切换的屏数分别创建多个相同设置的版位


每个版位对应上传相关的广告图片,然后按权重排序(PS:权重高排在前,排序非常重要)

四:模板&标签
模板:advZoneId为对应广告版位的ID
<div class="bd">
<ul>
{PE.Label id="多格带切换的焦点图" outputQty="10"  advZoneId="1"/}
{PE.Label id="多格带切换的焦点图" outputQty="10"  advZoneId="2"/}
{PE.Label id="多格带切换的焦点图" outputQty="10"  advZoneId="3"/}
{PE.Label id="多格带切换的焦点图" outputQty="10"  advZoneId="4"/}
</ul>
</div>

标签:标签的写法非常简单,只有一个列的结构,读取PE_AdZone的内容,由"焦点图切换-广告.config"简化而来。
"
由于标签内容比较多,这里就截了一张简洁的结构图

到这一步已基本上完工了,上几张效果图









从这些效果图,大家应该已经看出其中的规律了,每一屏中的小图片的宽度都同或倍宽的。高度同样也是相同或倍高的。

介绍了这么多,现在就直接来看最终的效果吧

演示+下载地址~~~