广告版位-随机漂浮-多图式
需求：1、客户需要随机漂浮广告，2、随机漂浮广告需要同时多张图片并有相应链接地址同时进行随机移动！
已有功能标签：广告版位-随机漂浮=>实现的效果，单张图片随机漂浮！
根据需求=>新增标签暂命名=>广告版位-随机漂浮-多图式；建议后续默认功能标签新增该功能；代码如下：
第一：新增标签
（1）将公共标签中“广告版位-随机漂浮”复制到本站Shared中命名为“广告版位-随机漂浮-多图式”
（2）将公共标签中“广告版位-随机漂浮区块”复制到本站Shared中命名为“广告版位-随机漂浮区块-多图式”
第二：修改广告版位-随机漂浮-多图式 标签，代码如下：
@inject AdvertisementSpaceService AdvertisementSpaceService
@inject UrlHelperExtensionHelper UrlHelperExtensionHelper
@inject SiteService SiteService
@Power.VisualizationPartialView(new
{
Description = "广告版位-随机漂浮-多图式",
Parameters = new
{
id = new { DisplayName = "版位Id", Type = "Int32", ControlType = "Integer" },
advcookie = new { DisplayName = "是否使用cookie记录关闭状态", Type = "Boolean", ControlType = "Boolean", DefaultValue = false },
firstAdvertisement = new { DisplayName = "是否显示首张广告", Type = "Boolean", ControlType = "Boolean", DefaultValue = true }
}
})
@{
var advertisementPositionId = 0;
bool advcookie = Param.advcookie ?? false;
var firstAdvertisement = true;
if (Param != null)
{
advertisementPositionId = Param.id ?? 0;
firstAdvertisement = Param.firstAdvertisement ?? true;
}
var site = SiteService.GetEntity(SiteContext.Current.SiteId);
}
<div class="rollfloat_advertisemenarea">
</div>
<script>
$(function () {
var index = $("div[class^='rollfloat_advertisemenarea']").length + 1;
$('body').append('<div class="rollfloat_advertisemenarea' + '_' + index + '"></div>');
$.ajax({
url: '@UrlHelperExtensionHelper.AjaxPartialUrl(this.Url)',
type: 'post',
data: {
partialViewName: "广告版位-随机漂浮区块-多图式",
parameters: '{ "id":@(advertisementPositionId),"firstAdvertisement":"@(firstAdvertisement)"}'
},
success: function (response) {
$(".rollfloat_advertisemenarea" + '_' + index).html(response.html);
}
});
});
</script>第二：修改 广告版位-随机漂浮区块-多图式 标签，代码如下：
@Power.VisualizationPartialView(new
{
Description = "广告版位-随机漂浮-多图式",
Parameters = new
{
id = new { DisplayName = "版位Id", Type = "Int32", ControlType = "Integer" },
advcookie = new { DisplayName = "是否使用cookie记录关闭状态", Type = "Boolean", ControlType = "Boolean", DefaultValue = false },
firstAdvertisement = new { DisplayName = "是否显示首张广告", Type = "Boolean", ControlType = "Boolean", DefaultValue = true }
}
})
@inject AdvertisementSpaceService AdvertisementSpaceService
@{
var advertisementPositionId = 0;
////var isWholeStationGroup = false;
bool advcookie = Param.advcookie ?? false;
var firstAdvertisement = Param.firstAdvertisement ?? true;
if (Param != null)
{
advertisementPositionId = Param.id ?? 0;
}
var advertisementPositions = AdvertisementSpaceService.GetRollFloatAdvertisementPositions(advertisementPositionId);
var advertisementSpace = AdvertisementSpaceService.GetEntity(advertisementPositionId);
var floatType = "roll";
if (advertisementSpace?.RollFloatType == RollFloatType.Steady)
{
floatType = "steady";
}
}
@Html.AntiForgeryToken()
<div class="@(floatType)float_advertisementposition">
@foreach (var advertisementPosition in advertisementPositions)
{
if (advertisementPosition.AdvertisementAdvertisementSpaces.Any())
{
var positionHeight = firstAdvertisement ? advertisementPosition.Height : (advertisementPosition.Height * advertisementPosition.AdvertisementAdvertisementSpaces.Count);
<div data-power-ui="advertisement_@(floatType)float" id="position_@advertisementPosition.AdvertisementSpaceId" class="floatPosition" data-datum-mark="@advertisementPosition.DatumMark"
data-vertical-margin="@advertisementPosition.VerticalMargin" data-horizontal-margin="@advertisementPosition.HorizontalMargin"
data-width="@advertisementPosition.Width" data-height="@positionHeight" data-stop-time="@advertisementPosition.StopTime"
data-close-button-position="@advertisementPosition.CloseButtonPosition" data-enable-scroll="@advertisementPosition.EnableScroll"
style="height: @(positionHeight)px; overflow: hidden; position: absolute; width: @(advertisementPosition.Width)px;">
@if (advertisementPosition.AdvertisementAdvertisementSpaces.FirstOrDefault().Advertisement.AdvertisementType == AdvertisementType.Picture)
{
if (firstAdvertisement){
<a class="" href="@(string.IsNullOrWhiteSpace(advertisementPosition.AdvertisementAdvertisementSpaces.FirstOrDefault().Advertisement.LinkUrl) ? null : Power.Url.GetContentUrl(advertisementPosition.AdvertisementAdvertisementSpaces.FirstOrDefault().Advertisement.LinkUrl)) " title="@advertisementPosition.AdvertisementAdvertisementSpaces.FirstOrDefault().Advertisement.Tooltip" target="_@advertisementPosition.AdvertisementAdvertisementSpaces.FirstOrDefault().Advertisement.Target.ToString().ToLower()">
<img class="img" width="@advertisementPosition.Width" height="@advertisementPosition.Height" src="@Power.Url.GetContentUrl(advertisementPosition.AdvertisementAdvertisementSpaces.FirstOrDefault().Advertisement.AdvertisementFile)" />
</a>
}
else{
foreach (var advertisement in advertisementPosition.AdvertisementAdvertisementSpaces)
{
<a class="" href="@Power.Url.GetContentUrl(advertisement.Advertisement.LinkUrl)" title="@advertisement.Advertisement.Tooltip" target="_@advertisement.Advertisement.Target.ToString().ToLower()">
<img class="img" width="@advertisementPosition.Width" height="@advertisementPosition.Height" src="@Power.Url.GetContentUrl(advertisement.Advertisement.AdvertisementFile)" />
</a>
}
}
}
<a class="close" title="关闭" href="javascript:;"
onclick="position_@(advertisementPosition.AdvertisementSpaceId).style.display = 'none';"><span>×</span></a>
</div>
if (advcookie)
{
<script>
if (Cookies.get("position_@(advertisementPosition.AdvertisementSpaceId)_show") == "false") {
$("#position_@(advertisementPosition.AdvertisementSpaceId)").hide();
}
$("#position_@(advertisementPosition.AdvertisementSpaceId) .close").click(function () {
Cookies.set("position_@(advertisementPosition.AdvertisementSpaceId)_show", "false", { path: '/' });
});
</script>
}
<script>
$(function () {
if ('@(floatType)' == 'roll') {
pe.advertising.InitAdvertising.InitFloatRollPosition($('#position_@advertisementPosition.AdvertisementSpaceId'));
} else if ('@(floatType)' == 'steady') {
pe.advertising.InitAdvertising.InitFloatSteadyPosition($('#position_@advertisementPosition.AdvertisementSpaceId'));
}
});
</script>
}
}
</div>第三：调用标签：
@Power.Partial("广告版位-随机漂浮-多图式",new{Id=4, firstAdvertisement=false })第四：效果
第五:标签下载：
