wxj项目的开发一点记录

<#-- 头部文件 -->
<#include "/wxj/common/header.ftl">
<script src="/resources/wxj/js/pic-area.js"></script>

<!-- ******************* start content *********************** -->
<span class="blank15"></span>
<div class="main">
<div id="video-croll-area" class="video-croll-area picroll">

<#if advertisements?has_content>
<!-- <a href="javascript:;" target="_self" class="prev"><</a> -->
<ul class="pr-pic">
<#list advertisements as item>
<li class="current on"><a href="${(item.link)!''}"><img src="${(item.imageUrl)!''}" width="1000" height="400" /></a></li>
</#list>
</ul>
<!-- <a href="javascript:;" target="_self" class="next">></a> -->

<ul class="count pr-tab">
<#list advertisements as item>
<li class="count-on${item_index}"></li>
</#list>
</ul>
<#else>
<!-- <a href="javascript:;" target="_self" class="prev"><</a> -->
<ul class="pr-pic">
<li class="current on"><a href="#"><img src="http://wwwimg.infinitus.com.cn/up/2014/1016/orig_1413453590802.jpg" width="1000" height="400" /></a></li>
</ul>
<!-- <a href="javascript:;" target="_self" class="next">></a> -->
<ul class="count pr-tab">
<li class="on"></li>
</ul>
</#if>

</div>

<span class="blank30"></span>
<div class="pic-list-3">
<ul class="videolist">
<#if (paginator.contents)?has_content>
<#list paginator.contents as item>
<li>
<a href="/wxj/video/${(item.courseId)!''}/play">
<img src="${(item.coverImage)!''}" width="310" height="175" alt="" />
<div class="img-bg">
<div class="contentText">
<div> ${(item.title)!''}</div>
<div class="vi-text">简介：${(item.summary)!''}</div>
<div class="pl-btn"><span class="btn btn-info" style="float:right;margin-right:20px;">播 放</span></div>
</div>
</div>
<p>${(item.title)!''}</p>
</a>
</li>
</#list>
</#if>
</ul>
</div>

<#if (paginator.contents)?has_content>
<#if (paginator.contents?size>5) >
<#--加载更多部分-->
<div class="getmore" style="width=100%; margin:auto;text-align:center;"><a href="javascript:;" onclick="loadMore();" id="dm"><span class="btn btn-info" style="width:120px;">加载更多</span></a></div>
<input type="hidden" id="totalPages" name="totalPages" value="${(paginator.totalPages)!''}" />
</#if>
</#if>

<input type="hidden" id="categoryId" name="categoryId" value="${(categoryId)!''}" />

</div>
<span class="blank3"></span>
<!-- ******************* end content *********************** -->

<script>

$(function(){
$(".count-on0").attr("class","on");
videoShow();
ClearVideoHtml();//去掉视频摘要的html
});

//去掉视频摘要的html
function ClearVideoHtml(){
var vtDom = $(".vi-text");
vtDom.each(function(index){
var DText = $(this).html();
var Dvalue = DText.replace(/<\/?[^>]*>/g,"");
var ClipText = Dvalue.slice(0,60);
if(ClipText.length>50)
$(this).text(ClipText+"...[详细]");
else
$(this).text(ClipText);
});
}

function videoShow(){
$(".videolist li").hover(function(){
$(this).find(".img-bg").css({
"transition":"height 0.3s linear",
"-ms-transition":"height 0.3s linear",
"-webkit-transition":"height 0.3s linear",
"-o- transition":"height 0.3s linear",
"display": "block",
"opacity": "1",
"height":"80%"
});

},function(){

$(this).find(".img-bg").css({
"transition":"height 0.3s",
"-ms-transition":"height 0.3s linear",
"-webkit-transition":"height 0.3s linear",
"-o-transition":"height 0.3s linear",
"height":"0px",
"opacity": "0"
});
});
};

//用于加载更多
var page=1;
function loadMore(){
page=page+1;

var categoryId=$("#categoryId").val();
var url="/wxj/video/"+categoryId+"/more";
$.get(url,{page:page},function(data){
$(".pic-list-3").append(data);
});

//没有下一页了，去掉加载更是按钮
var totalPages=$("#totalPages").val();
if(page>=totalPages){
$(".getmore").html("");
}
}

</script>
<#-- 底部部文件 -->
<#include "/wxj/common/footer.ftl">