zoomla
Version:
16年专业研发|中文alexa排名第一的CMS品牌-基于dotNET core、功能强大，集成站群、微信开发、小程序与ERP及OA办公系统，支持国际语言和多民族语言，世界五百强与大型门户专用高端网站内核CMS系统
316 lines (314 loc) • 16.3 kB
HTML
{ZL.Source id="文章模型数据源标签"/}
<html>
<head>
<meta charset="utf-8">
<title>{SField sid="文章模型数据源标签" FD="Title" page="0"/}_{$SiteName/}</title>
<meta name="Keywords" content="{SField sid="文章模型数据源标签" FD="Tagkey" page="0"/}" />
<meta name="Description" content="{SField sid="文章模型数据源标签" FD="Title" page="0"/}">
{ZL:Boot4()/}
<link href="{$CssDir/}global.css?Version={ZL.Label id="前端样式版本号"/}" rel="stylesheet"/>
<script src="/js/scrolltopcontrol.js" type="text/javascript"></script>
<style>
.navbar-default .navbar-nav>#Menu{SField sid="文章模型数据源标签" FD="FirstNodeID" page="0"/}>a, .navbar-default .navbar-nav>#Menu{SField sid="文章模型数据源标签" FD="FirstNodeID" page="0"/}>a:hover, .navbar-default .navbar-nav>#Menu{SField sid="文章模型数据源标签" FD="FirstNodeID" page="0"/}>a:focus { color: #555; background-color: #e7e7e7 }
.content_pics{ position:relative; width:100%; height:100px; overflow:hidden;}
.content_pics #prev_small{ display:block; position:absolute; top:0; left:0; bottom:0; width:30px; font-size:3em; color:#fff; background:#000;}
.content_pics #next_small{ display:block; position:absolute; top:0; right:0; bottom:0; width:30px; font-size:3em; color:#fff; background:#000;}
.content_pics ul{ margin-left:30px; width:500%;}
.content_pics li{ float:left; margin-left:2px; margin-right:2px; width:150px; height:100px;}
.content_pics li img{ padding:2px; width:100%; height:100%; cursor:pointer;}
.content_pics li.active img{ border:1px solid #f00;}
.show_pic{ position:relative;}
.pics_set{ position:absolute; right:0; top:-40px; width:100px; background:rgba(0,0,0,0.6); z-index:99;}
.pics_set a{ float:right; display:block; width:40px; height:40px; font-size:2em; background:#000; color:#fff; border-radius:50%;}
.show_pic .pic_detail{ position:absolute; bottom:0; margin-bottom:0; width:100%; min-height:30px; padding:5px; background:rgba(0,0,0,0.6); color:#fff;}
.show_pic #prev_pic{ position:absolute; top:0; left:0; bottom:0; width:40%; padding-top:20%; font-size:10em; color:#fff; }
.show_pic #prev_pic i,.show_pic #next_pic i{ display:none; color:#ddd;}
.show_pic a:hover{ text-decoration:none;}
.show_pic #next_pic{ position:absolute; top:0; right:0; bottom:0; width:40%; padding-top:20%; font-size:10em; color:#fff; text-align:right; }
.pic_detail .pull-right{ font-style:italic; font-size:1.5em; color:#fff;}
.pic_detail .pull-right strong{ color:#f00; font-size:1.4em;}
</style>
</head>
<body>
{ZL.Label id="响应式全站头部"/}
<div class="myBanner">
<div class="container">
<h3><br/><br/>逐浪软件</h3><br/>
手机和电脑的表现无边界。
</div>
</div><!--内页通栏banner广告位 -->
<div class="news_body">
<div class="container">
<div class="row">
<div class="padding5">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 padding10">
<div class="news_mySites">
<ul class="breadcrumb">
<li><a href="/">首页</a></li>
{ZL.Label id="输出多级节点导航_V4" NodeID="{SField sid="文章模型数据源标签" FD="NodeID" page="0"/}" ShowNum="30" /}
<li class="active">正文</li>
</ul>
</div><!--面包屑导航结束 -->
<div class="myContent_l">
<h1>{SField sid="文章模型数据源标签" FD="Title" page="0"/}</h1>
<div class="myAbbr">
<span id="CreateTime">发布时间：{ZL:FormatDate({SField sid="文章模型数据源标签" FD="CreateTime" page="0"/},yyyy-MM-dd)/}</span> <span id="Hits">浏览次数：<SCRIPT language=javascript src="/Common/GetHits?id={SField sid="文章模型数据源标签" FD="GeneralID" page="0"/}"></SCRIPT></span>
</div>
<div class="show_pic">
<div class="pics_set"><a href="javascript:;" id="play"><i class="zi zi_play"></i></a></div>
<img id="cur_pic" src="" class="center-block img-responsive" data-target="" alt="" />
<div class="pic_detail">
<span class="pull-left">
</span>
<span class="pull-right">
<strong></strong>/<span></span>
</span>
</div>
<a href="javascript:;" id="prev_pic"><i class="zi zi_forLeft"></i></a>
<a href="javascript:;" id="next_pic"><i class="zi zi_forRight"></i></a>
</div>
<div class="content_pics">
<a href="javascript:;" id="prev_small"><i class="zi zi_doubleLeft"></i></a>
<a href="javascript:;" id="next_small"><i class="zi zi_doubleRight"></i></a>
<ul class="list-unstyled" id="content_pics">
<script>
var json = '{SField sid="文章模型数据源标签" FD="zt" page="0"/}';
var jsonArr= eval(json);
$("#cur_pic").attr("src","/UploadFiles/"+jsonArr[0].url);
$("#cur_pic").attr("data-target",0);
$(".pic_detail .pull-left").text(jsonArr[0].desc);
$(".pic_detail .pull-right").find("span").text(jsonArr.length);
$(".pic_detail .pull-right").find("strong").text(1);
for(var i=0; i<jsonArr.length; i++){
document.write("<li><img src=/UploadFiles/"+jsonArr[i].url+" class='center-block img-responsive pitem' data-target='"+i+"' alt="+jsonArr[i].desc+"></li>");
}
$(".content_pics li").eq(0).addClass("active")
</script>
</ul>
</div>
<div id="T_page">{ZL.Page id="默认内容分页标签" num="{SField sid="文章模型数据源标签" FD="pages" page="0"/}"/}</div>
<div class="col-lg-12 col-md-12 col-xs-12">
<div class="edit"><span class="print"><a href="{ZL:GetLastinfo(1)/}?generalid={SField sid="文章模型数据源标签" FD="GeneralID" page="0"/}" target="_blank">打印保存</a></span><span id="elit">责任编辑：{SField sid="文章模型数据源标签" FD="Edit" page="0"/}</span> <span id="pin"><a href="/Comments/CommentFor?ID={SField sid="文章模型数据源标签" FD="GeneralID" page="0"/}" target="_blank">发表评论>></a></span></div>
<div id="begin"><span id="asc">上一篇文章：{ZL.Label id="上一篇文章" NodeID="{SField sid="文章模型数据源标签" FD="NodeID" page="0"/}" /}</span> <span id="desc">下一篇文章：{ZL.Label id="下一篇文章" NodeID="{SField sid="文章模型数据源标签" FD="NodeID" page="0"/}" /}</span></div>
<div id="about">
<span>相关文章</span>
<ul>
{ZL.Label id="相关文章列表输出" ShowNum="10" TitleNum="35" KeyWord="{SField sid="文章模型数据源标签" FD="Tagkey" page="0"/}" /}
</ul>
</div>
<div class="mood">
<div class="mood_top" style="height:30px; line-height:30px; border-bottom:1px solid #9CF; margin-bottom:10px;">共用<b>{ZL.Label id="投票数"/}</b>人投票</div>
<form name="form2" method="post" action="/PubAction">
<input name="PubTitle" type="hidden" id="PubTitle" size="50" value="投票">
<input type="hidden" name="PubID" id="PubID" value="2">
<input type="hidden" name="PubContentid" id="PubContentid" value="{SField sid="文章模型数据源标签" FD="GeneralID" page="0"/}">
<input name="PubContent" type="hidden" cols="50" rows="10" id="PubContent" value="投票">
<ul class="list-unstyled">
<li>{ZL.Label id="投票数" mood="1" /}<br/><span id="b1"><span id="bb1"></span></span><br/><img src="{$CssDir/}Images/b1.gif" /><br/>欠扁<br/><input type="radio" name="Mood" onClick="mood(1)" value="1"></li>
<li>{ZL.Label id="投票数" mood="2" /}<br/><span id="b2"><span id="bb2"></span></span><br/><img src="{$CssDir/}Images/b2.gif" /><br/>超赞<br/><input type="radio" name="Mood" onClick="mood(2)" value="2"></li>
<li>{ZL.Label id="投票数" mood="3" /}<br/> <span id="b3"><span id="bb3"></span></span><br/><img src="{$CssDir/}Images/b3.gif" /><br/>支持<br/><input type="radio" name="Mood" onClick="mood(3)" value="3"></li>
<li>{ZL.Label id="投票数" mood="4" /}<br/> <span id="b4"><span id="bb4"></span></span><br/><img src="{$CssDir/}Images/b4.gif" /><br/>难过<br/><input type="radio" name="Mood" onClick="mood(4)" value="4"></li>
<li>{ZL.Label id="投票数" mood="5" /}<br/><span id="b5"><span id="bb5"></span></span><br/><img src="{$CssDir/}Images/b5.gif" /><br/>搞笑<br/><input type="radio" name="Mood" onClick="mood(5)" value="5"></li>
<li>{ZL.Label id="投票数" mood="6" /}<br/><span id="b6"><span id="bb6"></span></span><br/><img src="{$CssDir/}Images/b6.gif" /><br/>扯淡<br/><input type="radio" name="Mood" onClick="mood(6)" value="6"></li>
<li>{ZL.Label id="投票数" mood="7" /}<br/><span id="b7"><span id="bb7"></span></span> <br/><img src="{$CssDir/}Images/b7.gif" /><br/>不解<br/><input type="radio" name="Mood" onClick="mood(7)" value="7"></li>
<li>{ZL.Label id="投票数" mood="8" /}<br/> <span id="b8"><span id="bb8"></span></span><br/><img src="{$CssDir/}Images/b8.gif" /><br/>头晕<br/><input type="radio" name="Mood" onClick="mood(8)" value="8"></li>
</ul>
<div class="clearfix"></div>
<div style="display:none"> <input type="submit" name="button1" id="button1" value="提交"> </div>
</form>
<div>
</div>
<script>
function mood(id){
form2.submit();
}
</script>
</div>
<div class="iframe_comm">
<iframe scrolling="no" onload="this.height = $(this).contents().height() + 'px';" src="/Comments/CommentFor?ID={SField sid="文章模型数据源标签" FD="GeneralID"/}" width="100%" align="middle" height="100%" frameborder="0"></iframe>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12 padding10">
<div class="news_list">
<div class="news_list_t"><h2>分享</h2><div class="clearfix"></div></div>
<div class="news_share">
<div class="bdsharebuttonbox"><a class="bds_more" href="#" data-cmd="more"></a><a title="分享到QQ空间" class="bds_qzone" href="#" data-cmd="qzone"></a><a title="分享到新浪微博" class="bds_tsina" href="#" data-cmd="tsina"></a><a title="分享到腾讯微博" class="bds_tqq" href="#" data-cmd="tqq"></a><a title="分享到人人网" class="bds_renren" href="#" data-cmd="renren"></a><a title="分享到微信" class="bds_weixin" href="#" data-cmd="weixin"></a></div>
<script>
window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"2","bdSize":"32"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];
</script>
</div>
</div>
<div class="news_list">
<div class="news_list_t"><h2>热门文章</h2><div class="clearfix"></div></div>
<div class="news_list_c">
<ul class="list-unstyled">
{ZL.Label id="输出指定节点标题_带点击v4" NodeID="1" TitleNum="34" ShowNum="10" Order="desc" /}
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!--主体结束 -->
<div class="myFoot">
<div class="container">
<div id="row">
<div id="home_footer">
<ul>
<li><a href="{ZL:GetNodeLinkUrl(106)/}" target="_blank">网站地图</a></li>
<li><a href="{ZL:GetInfoUrl(22)/}" target="_blank">法律声明</a></li>
<li><a href="{ZL:GetNodeLinkUrl(77)/}" target="_blank">帮助中心</a></li>
<li><a href="{ZL:GetInfoUrl(21)/}" target="_blank">联系我们</a></li>
<li><a href="{ZL:GetInfoUrl(20)/}" target="_blank">关于我们</a></li>
<li><a href="/guest/" target="_blank">用户反馈</a></li>
<li><a href="/Plugins/Camera" target="_blank">在线拍照</a></li>
<li><a href="{$ManageDir/}Default" target="_blank">管理登录</a></li>
</ul>
<div class="clearfix"></div>
<div id="copyright">{$Copyright/}</div>
</div>
</div>
</div>
</div>
<!--下面是浮动最下面的客服代码，默认隐藏-通过CSS中的MYbottom定义显示-->
<div class="navbar navbar-fixed-bottom MYbottom">
<div class="container BottomLink" >
<div class="col-lg-7 col-md-6 col-xs-12">
<ul>
<li><a href="pub/listpage.shtml">Zoomla!逐浪CMS内核</a></li>
<li><a href="m">Z-Mobile智能移动手机应用开发</a></li>
<li><a href="#" Onclick="javaScript:alert('抱歉当前仅对商业用户开放')">RIA交互体验与桌面智能软件</a></li>
</ul>
</div>
<div class="col-lg-5 col-md-6 col-xs-12">
<span>
<div class="dl"><a href="/pub/" target="_blank" title="Free Download">DownLoad></a></div>
<div class="sp"><a href="/shop/" target="_blank" title="Buy Now">Buy Now</a></div>
<div class="ins"><a href="/help/Install/692.shtml" target="_blank" title="快速安装">快速安装></a></div>
</span>
</div>
</div>
<div class="container Mytel">
<div class="col-lg-12">
<span class="zi zi_phonesquare"><a href="tel:021-50391046">联系官方服务热线</a></span>
<span class="zi zi_phone"><a href="tel:13177777714">24小时移动专家在线</a></span>
</div></div>
</div>
<script>
//检测固顶事件
var IO=document.getElementById('scolls'),Y=IO,H=0,IE6;
IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
if(IE6)
IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
".documentElement.scrollTop-(this.javascript||"+H+")):0)";
window.onscroll=function (){
var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
if(s>H&&IO.fix||s<=H&&!IO.fix)return;
if(!IE6)IO.style.position=IO.fix?"":"fixed";
IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
//]]>
//小图点击切换
$(".pitem").click(function(e) {
var url=$(this).attr("src");
var con=$(this).attr("alt");
$("#cur_pic").attr("src",url);
$(".show_pic").find("p").text(con);
$(".content_pics li").removeClass("active");
$(this).parent().addClass("active");
});
//大图左右方向键的显示/隐藏
$(".show_pic a").mouseover(function(e) {
$(this).find("i").show();
}).mouseout(function(e) {
$(this).find("i").hide();
});;
var run = document.getElementById("content_pics"); //容器ID
var slength = $(".content_pics").find("img").innerWidth(); //每个小图的宽度
var clength= $(".content_pics").innerWidth(); //小图列表所属容器的宽度
var index; //当前大图的下标
var idnam; //按钮名称
var initleft=30; //初始化离左距离
var marginleftn; //往左偏移量
$(".show_pic a").click(function(e) {
idname=$(this).attr("id");
index=$("#cur_pic").attr("data-target");
index=parseInt(index)
if(idname=="prev_pic"){ //判断是上一张还是下一张
if(index-1<0) index=jsonArr.length-1;//已经是第一张时，则跳转最后一张图片
else index=index-1;
}
else{
if(index+1>jsonArr.length-1) index=0;//已经是最后一张时，则跳转第一张图片
else index=index+1;
}
$("#cur_pic").attr("src","/UploadFiles/"+jsonArr[index].url);
$("#cur_pic").attr("data-target",index);
$(".content_pics li").removeClass("active");
$(".content_pics li").eq(index).addClass("active");
$(".pic_detail .pull-left").text(jsonArr[index].desc);
$(".pic_detail .pull-right").find("strong").text(index+1);
if(index+1>clength/slength){
marginleftn = (index+1)*slength-clength;
}//当前选中的小图离左侧的距离大于小图列表所属容器宽时，则列表往左挪移1个图片的宽度
else{
marginleftn = initleft; //对应初始化离左边的距离
}
run.style.marginLeft="-"+marginleftn+"px";//小图列表往左偏移的像素
});
//当图片列表总长小于或等于其容器宽时，隐藏小图的左右键
$().ready(function(e) {
var count=$(".content_pics").find("img").length;
if(count<clength/slength+1){
$("#prev_small").hide();
$("#next_small").hide();
$(".content_pics ul").css({
marginLeft:0,
})
initleft=0;
}
});
//小图列表的左右键点击事件
$("#prev_small").click(function(e) {
$(".show_pic #prev_pic").click();
});
$("#next_small").click(function(e) {
$(".show_pic #next_pic").click();
});
//左右方向键浏览图片
document.onkeydown=function(e){
e=window.event||e;
if(e.keyCode==37){
$(".show_pic #prev_pic").click();
}
if(e.keyCode==39){
$(".show_pic #next_pic").click();
}
}
//自动播放
var timer = null;
$("#play").click(function(e) {
var play=$(this).find(".fa-play");
if(play.length>0){
$(this).find("i").removeClass("fa-play");
$(this).find("i").addClass("fa-pause");
timer = setInterval(function(){
$(".show_pic #next_pic").click();
},5000)
}
else{
$(this).find("i").removeClass("fa-pause");
$(this).find("i").addClass("fa-play");
clearInterval(timer);
}
});
</script>
</body>
</html>