特效介绍
Lightcase.js是一款基于jQuery的强大的弹出层插件，本插件支持电脑端、手机端，自适应。支持照片，视频，HTML5 视频，iframe，swf 和 ajax 调用。可以能弹出单张图，也可以以图片集的形式展示多张图片，并且有上一张下一张和播放暂停按钮。图片展示的使用方法：
第一步：引入lightcase.js、lightcase.css和image，前提是引入了jquery文件
第二步：修改lightcase.css里面的图片路径（loading图片、关闭按钮图片等等）
第三步：给图片加上超链接
<a id="imgheadBig" data-rel="lightcase" href="" title=""> <img style="float:left ;width: 100%;height: 100%;" class="imghead" id="imghead"/> </a>id：属性必须；
data-rel属性必须，取值”lightcase“；
href图片超链接（弹出层展示的图片的src，此值务必在页面加载完成时赋值）；
title:图片标题，默认在图片左下角显示，可选。
第四步：初始化
$(document).ready(function($) {
$('#imgheadBig').lightcase({transition : 'scrollTop'});
});
transition属性设置过渡动画：可选（"none"、"scrollTop"、“fade”、“elastic”）。
如何展示隐藏的div：
省略前两步。
第三步：给链接加上a标签，href里的值为#隐藏的div的id。
<a data-rel="lightcase:example_group" href="#displayDivId">详情</a>第四步：初始化：
$('a[data-rel="lightcase:example_group"]').lightcase({showSequenceInfo:false});
如此，点击链接的时候，便弹出层显示隐藏的div。展示弹出层iframe
隐藏的div适合展示静态的内容，当我们想要弹出的层有和服务器作交互的时候，就要用上iframe了。
省略前两步。
第三步：给链接加上a标签，href里的值赋上嵌套页面的路径。
<a data-rel="lightcase:example_group" href="pingjia.html?id="+json.data.list[i].id+" >去评价</a>第四步：初始化即可。
$('a[data-rel="lightcase:example_group"]').lightcase({showSequenceInfo:false});
注意事项：被嵌套的页面，里的按钮或者链接写样式最好用id选择器，不要用类选择器也不要直接加style属性，博主试过后两种，样式加上之后，按钮或者链接点击就没反应了。换到id选择器才正常。弹出层iframe嵌套页面内容如下：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/pingjia.css">
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/sweetalert.css">
<script src="js/pingjia.js"></script>
<meta charset="UTF-8">
<title></title>
<style>
#textareaStyle {
margin-right: 150px;
margin-left: 50px;
}
#submitStyle{
margin-right: 150px;
margin-left: 250px;
}
</style>
<script type="text/javascript">
$(document).ready(function($) {
loading("star1");
loading("star2");
loading("star3");
ShowPingJiaInfo();
});
function getPingJiaId() {
var originalUrl=location.href;
var jingIndex=originalUrl.indexOf("#");
if(jingIndex!=-1){
originalUrl.substring(0,jingIndex);
}
var pidIndex = originalUrl.indexOf("=");
if (pidIndex != -1) {
return originalUrl.substring(pidIndex + 1);
}
}
var PinjiaInfo=serverAddress + "/api/manueval/ansy/listManuevalByMid.shtml";
var ObglworkSpeed="";
var ObglserviceAltitude="";
var ObglCompleteQuality="";
var ManuevalId="";
//显示评价信息
function ShowPingJiaInfo(){
ManuevalId=getPingJiaId();
$.ajax({
type:"post",
url:PinjiaInfo,
async:true,
xhrFields: {
withCredentials: true
},
crossDomain: true,
data:{
"mid":ManuevalId
},
success:function(json){
if(json.code==1){
//说明已经评论
$("#workSpeed").empty();
$("#serviceAltitude").empty();
$("#CompleteQuality").empty();
ObglworkSpeed="";
ObglserviceAltitude="";
ObglCompleteQuality="";
$("#pingjiaDiv").css("display","none");
$("#PingJiaComplete").css("display","block");
$("#createTime").text(json.data[0].createTime.substring(0,19));
//工作速度
var workSpeedValue=json.data[0].speed;
for (var i=0;i<workSpeedValue;i++) {
ObglworkSpeed="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed;
}
$("#workSpeed").append(ObglworkSpeed);
//服务态度
var serviceAltitudeValue=json.data[0].serviceAtt;
for (var i=0;i<serviceAltitudeValue;i++) {
ObglserviceAltitude="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed;
}
$("#serviceAltitude").append(ObglserviceAltitude);
//完成质量
var serviceCompleteQuality=json.data[0].quality;
for (var i=0;i<serviceCompleteQuality;i++) {
ObglCompleteQuality="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed;
}
$("#CompleteQuality").append(ObglCompleteQuality);
$("#PingJiaText").text(json.data[0].content);
if(json.data[0].level==0){
$("#levelcom").text("好评");
}
if(json.data[0].level==1){
$("#levelcom").text("中评");
}
if(json.data[0].level==2){
$("#levelcom").text("差评");
}
}
else{
$("#pingjiaDiv").css("display","block");
$("#PingJiaComplete").css("display","none");
}
},
error:function(json){
}
});
}
var serverPinjia=serverAddress + "/api/manueval/addManueval.shtml";
//添加评价
function addManueval(){
ManuevalId=getPingJiaId();
var sessionStorage=window.sessionStorage;
var user=JSON.parse(sessionStorage.getItem("user"));
if(user.id!=null){
jQuery.support.cors = true;
$.ajax({
type:"post",
url:serverPinjia,
xhrFields: {
withCredentials: true
},
crossDomain: true,
data:{
"level":$("#level").val(),
"speed":$("#hiddenstar1").val(),
"serviceAtt":$("#hiddenstar2").val(),
"quality":$("#hiddenstar3").val(),
"content":$("#creditContent").val(),
"mid":ManuevalId,
"uid":user.id
},
success:function(json){
if(json.code==1){
swal("评价成功","感谢您的评价","success");
}
else {
swal("提示","请勿重复提交！","warning")
}
},
error:function(json){
}
});
}
}
</script>
</head>
<body>
<div id="pingjiaDiv" style="display: none;">
<div style="float:left">雇主对威客的评价：</div>
<div>
<select id="level" style="float:left">
<option value="0">好评</option>
<option value="1">中评</option>
<option value="2">差评</option>
</select>
</div>
<br/>
<div style="float:left;margin-left: -150px;">对该稿件评价：</div>
<div id="star1" style="width:200px;float:left;margin-left: -150px;">
<span>工作速度</span>
<ul>
<li name="li"><a href="javascript:;">1</a></li>
<li name="li"><a href="javascript:;">2</a></li>
<li name="li"><a href="javascript:;">3</a></li>
<li name="li"><a href="javascript:;">4</a></li>
<li name="li"><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p></p>
</div>
<div id="star2" style="float:left;width:200px">
<span>完成质量</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p></p>
</div>
<div id="star3" style="float:left;width:200px">
<span>完成质量</span>
<ul>
<li><a href="javascript:;">1</a></li>
<li><a href="javascript:;">2</a></li>
<li><a href="javascript:;">3</a></li>
<li><a href="javascript:;">4</a></li>
<li><a href="javascript:;">5</a></li>
</ul>
<span></span>
<p></p>
</div>
<div style="width:50px;height:50px;">
<input type="hidden" value="" id="hiddenstar1">
<input type="hidden" value="" id="hiddenstar2">
<input type="hidden" value="" id="hiddenstar3">
</div>
<div>
<div id="textareaStyle"><textarea id="creditContent" maxlength="200" style="width: 300px;height: 150px;"></textarea></div>
<div id="submitStyle"><a href="#" onclick="javascript:addManueval()">提交</a></div>
</div>
</div>
<p></p>
<div id="PingJiaComplete" style="border-radius: 8px;padding-left: 15px; width:740px;display: none;;border: solid 1px black;background-color:white ;">
<div id="levelcom" style="width: 100%;float: left;"></div>
<div>
评论时间:
<label id="createTime"></label>
</div>
<div style="width: 33%;float: left;">
<label style="float: left;">工作速度：</label>
<label id="workSpeed"></label>
</div>
<div style="width: 33%;float: left;">
<label style="float: left;">服务态度：</label>
<label id="serviceAltitude"></label>
</div>
<div style="width: 33%;float: left;">
<label style="float: left;">完成质量：</label>
<label id="CompleteQuality"></label>
</div>
<div id="PingJiaText" style="width: 100%; height: 100px;text-indent:10px; background-color: #7ECFF4;float: left;margin-top: 15px;">
</div>
</div>
</body>
</html>
使用方法