本章将汇总一些解决项目实施需求的组件案例，对灵活开发和应用 WebFuture 产品组件功能提供启示实例。本文讲述如何实现在网站中先动态显示大图后进入首页的效果。
初始需求
又是一年新年到，客户想在网站上把过年气氛搞起来。最终方案是设计一张新年大图，当用户打开网站时动态显示，然后倒计时几秒钟后进入该频道页面。这个也是很寻常的效果，在实现效果上也不难，但有一点要注意的是当用户打开网站时，不要显示网站的信息，要先显示图片，然后再显示网站信息。
演示效果
使用方法
思路：
方法一、可以新建一个节点单独绑定相应的频道模板，然后制作跳转页面，并绑定频道，当用户打开频道页面时，显示后跳转到节点。
方法二、在显示网站信息前，先把页面所有元素隐藏，然后网站内添加要显示的图片，倒计时后隐藏图片并显示网站隐藏的元素。
从两种方案看，方法一比较直接，只需要制作模板绑定就可以了。方法二最主要的一步是解决在页面加载前显示图片。根据系统组件和前台页面输出习惯，其实只需要在加载页面时先把最外层的元素隐藏即可，等图片倒计时后再显示就可以达到想要的效果。
步骤：
1、创建固定广告版位
2、广告版位组件
在原来广告版位基础上进行修改：
@Power.VisualizationPartialView(new
{
Description = "广告版位-拜年图",
Parameters = new
{
TitleLength = new { DisplayName = "标题长度", Type = "Int32", ControlType = "Integer", DefaultValue = 50 },
ContentLength = new { DisplayName = "简介长度", Type = "Int32", ControlType = "Integer", DefaultValue = 200 },
ImageWidth = new { DisplayName = "图片宽度", Type = "Int32", ControlType = "Integer", DefaultValue = 400 },
ImageHeight = new { DisplayName = "图片高度", Type = "Int32", ControlType = "Integer", DefaultValue = 300 },
PicTitle = new { DisplayName = "当PicTitle为true时使用图片切换", Type = "Boolean", ControlType = "Boolean", DefaultValue = false },
ShowNumMoreThan = new { DisplayName = "当内容个数大于x个时才显示导航", Type = "Int32", ControlType = "Integer", DefaultValue = 0 },
Id = new { DisplayName = "版位Id", Type = "Int32", ControlType = "Integer" }
}
})
@{
//参数
string Sort = Param.Sort ?? "StartTime DESC"; //排序
int TitleLength = Param.TitleLength ?? 50; // 标题长度
int ImageWidth = Param.ImageWidth ?? 400; // 图片宽度
int ImageHeight = Param.ImageHeight ?? 300; // 图片高度
var PicTitle = Param.PicTitle ?? false; //当PicTitle为true时使用图片切换，否则为数字
var index1 = 1;
var index2 = 1;
string linkUrl = "";
int advertisementSpaceId = 0;
if (Param != null && Param.Id != null)
{
advertisementSpaceId = Param.Id;
}
var advertisements = new AdvertisementService().GetAdvertisementsBySpaceId(advertisementSpaceId, Sort);
}
@if (advertisements != null && advertisements.Count() > 0)
{
<style>
#container,.floatPosition {
display: none;
}
* {
margin: 0;
padding: 0px;
}
a,a:link,a:hover {
text-decoration: none;
}
.iconAd {
position: absolute;
top: 0px;
right: 0px;
background-color: #000;
line-height: 16px;
border-radius: 50%;
width: 20px;
height: 20px;
color: #fff;
text-align: center;
transition: 0.3s;
cursor: pointer;
}
.iconAd:hover {
transform: rotate(360deg);
}
#countdownAd {
width: 100%;
height: 100%;
animation: changeBiger 1s linear forwards;
-webkit-animation: changeBiger 1s linear forwards;
-moz-animation: changeBiger 1s linear forwards;
-ms-animation: changeBiger 1s linear forwards;
animation-delay: 0s;
-webkit-animation-delay: 0s;
-moz-animation-delay: 0s;
-ms-animation-delay: 0s;
transform: scale(0.28);
}
@@keyframes changeBiger {
0% {
transform: scale(0.28);
}
100% {
transform: scale(1);
}
}
@@-webkit-keyframes changeBiger {
0% {
-webkit-transform: scale(0.28);
}
100% {
-webkit-transform: scale(1);
}
}
@@-moz-keyframes changeBiger {
0% {
-moz-transform: scale(0.28);
}
100% {
-moz-transform: scale(1);
}
}
@@-ms-keyframes changeBiger {
0% {
-ms-transform: scale(0.28);
}
100% {
-ms-transform: scale(1);
}
}
#countdownAd {
margin: 0;
padding: 0px;
margin: 0 auto;
min-width: 1280px;
position: relative;
margin-top: 20px;
text-align: center;
}
#countdownAd img {
width: 1280px;
width: 100%;
}
</style>
<div id="countdownAd" class="countdownAd">
<ul>
@foreach (var advertisementInformation in advertisements)
{
linkUrl = string.IsNullOrEmpty(advertisementInformation.LinkUrl) ? null : Power.Url.GetContentUrl(advertisementInformation.LinkUrl);
<li class="li@(index2)">
<div class="pic">
<a href="@linkUrl" target="_@advertisementInformation.Target.ToString().ToLower()">
<img alt="@advertisementInformation.Tooltip" src="@Power.Thumbnail(Power.Url.GetContentUrl(advertisementInformation.AdvertisementFile), ImageWidth, ImageHeight)" />
</a>
<span class="iconAd">x</span>
</div>
<div id="countdownAdTime"></div>
</li>
index2++;
}
</ul>
</div>
<script>
(function($) {
$("#container,.floatPosition").hide();
$("#countdownAd").show();
var times = 4;
var tText="秒钟后进入页面...";
$("#countdownAdTime").html(times+tText);
var timer = setInterval(function() {
if(times > 0) {
times--;
$("#countdownAdTime").html(times + tText);
} else {
$("#countdownAd").hide();
$("#container,.floatPosition").show();
clearInterval(timer);
}
}, 1000);
$(".iconAd").click(function() {
$("#countdownAd").hide();
$("#container,.floatPosition").show();
});
})(jQuery);
</script>
}