特效介绍
Lightcase.js是一款基于jQuery的强大的弹出层插件，本插件支持电脑端、手机端，自适应。支持照片，视频，HTML5 视频，iframe，swf 和 ajax 调用。可以能弹出单张图，也可以以图片集的形式展示多张图片，并且有上一张下一张和播放暂停按钮。图片展示的使用方法：
第一步：引入lightcase.js、lightcase.css和image，前提是引入了jquery文件
第二步：修改lightcase.css里面的图片路径（loading图片、关闭按钮图片等等）
第三步：给图片加上超链接
1 | <a id="imgheadBig" data-rel="lightcase" href="" title=""> |
2 | <img style="float:left ;width: 100%;height: 100%;" class="imghead" id="imghead"/> |
3 | </a> |
data-rel属性必须，取值”lightcase“；
href图片超链接（弹出层展示的图片的src，此值务必在页面加载完成时赋值）；
title:图片标题，默认在图片左下角显示，可选。
第四步：初始化
1 | $(document).ready(function($) { |
2 | $('#imgheadBig').lightcase({transition : 'scrollTop'}); |
3 | }); |
如何展示隐藏的div：
省略前两步。
第三步：给链接加上a标签，href里的值为#隐藏的div的id。
1 | <a data-rel="lightcase:example_group" href="#displayDivId">详情</a> |
1 | $('a[data-rel="lightcase:example_group"]').lightcase({showSequenceInfo:false}); |
展示弹出层iframe
隐藏的div适合展示静态的内容，当我们想要弹出的层有和服务器作交互的时候，就要用上iframe了。
省略前两步。
第三步：给链接加上a标签，href里的值赋上嵌套页面的路径。
1 | <a data-rel="lightcase:example_group" href="pingjia.html?id="+json.data.list[i].id+" >去评价</a> |
1 | $('a[data-rel="lightcase:example_group"]').lightcase({showSequenceInfo:false}); |
弹出层iframe嵌套页面内容如下：
001 | <!DOCTYPE html> |
002 | <html> |
003 | <head> |
004 | <link rel="stylesheet" href="css/pingjia.css"> |
005 | <script src="js/common.js"></script> |
006 | <link rel="stylesheet" href="css/sweetalert.css"> |
007 | <script src="js/pingjia.js"></script> |
008 | <meta charset="UTF-8"> |
009 | <title></title> |
010 | <style> |
011 | #textareaStyle { |
012 | margin-right: 150px; |
013 | margin-left: 50px; |
014 | } |
015 | #submitStyle{ |
016 | margin-right: 150px; |
017 | margin-left: 250px; |
018 | } |
019 | </style> |
020 | <script type="text/javascript"> |
021 | |
022 | $(document).ready(function($) { |
023 | loading("star1"); |
024 | loading("star2"); |
025 | loading("star3"); |
026 | ShowPingJiaInfo(); |
027 | }); |
028 | function getPingJiaId() { |
029 | var originalUrl=location.href; |
030 | var jingIndex=originalUrl.indexOf("#"); |
031 | if(jingIndex!=-1){ |
032 | originalUrl.substring(0,jingIndex); |
033 | } |
034 | var pidIndex = originalUrl.indexOf("="); |
035 | if (pidIndex != -1) { |
036 | return originalUrl.substring(pidIndex + 1); |
037 | } |
038 | } |
039 | var PinjiaInfo=serverAddress + "/api/manueval/ansy/listManuevalByMid.shtml"; |
040 | var ObglworkSpeed=""; |
041 | var ObglserviceAltitude=""; |
042 | var ObglCompleteQuality=""; |
043 | var ManuevalId=""; |
044 | //显示评价信息 |
045 | function ShowPingJiaInfo(){ |
046 | ManuevalId=getPingJiaId(); |
047 | $.ajax({ |
048 | type:"post", |
049 | url:PinjiaInfo, |
050 | async:true, |
051 | xhrFields: { |
052 | withCredentials: true |
053 | }, |
054 | crossDomain: true, |
055 | data:{ |
056 | "mid":ManuevalId |
057 | }, |
058 | success:function(json){ |
059 | if(json.code==1){ |
060 | //说明已经评论 |
061 | $("#workSpeed").empty(); |
062 | $("#serviceAltitude").empty(); |
063 | $("#CompleteQuality").empty(); |
064 | |
065 | ObglworkSpeed=""; |
066 | ObglserviceAltitude=""; |
067 | ObglCompleteQuality=""; |
068 | $("#pingjiaDiv").css("display","none"); |
069 | $("#PingJiaComplete").css("display","block"); |
070 | |
071 | $("#createTime").text(json.data[0].createTime.substring(0,19)); |
072 | //工作速度 |
073 | var workSpeedValue=json.data[0].speed; |
074 | |
075 | for (var i=0;i<workSpeedValue;i++) { |
076 | ObglworkSpeed="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed; |
077 | |
078 | } |
079 | $("#workSpeed").append(ObglworkSpeed); |
080 | |
081 | //服务态度 |
082 | var serviceAltitudeValue=json.data[0].serviceAtt; |
083 | |
084 | for (var i=0;i<serviceAltitudeValue;i++) { |
085 | ObglserviceAltitude="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed; |
086 | |
087 | } |
088 | |
089 | $("#serviceAltitude").append(ObglserviceAltitude); |
090 | |
091 | //完成质量 |
092 | var serviceCompleteQuality=json.data[0].quality; |
093 | |
094 | for (var i=0;i<serviceCompleteQuality;i++) { |
095 | ObglCompleteQuality="<img class=\"starpingjia\" src=\"image/star1.png\" />"+ObglworkSpeed; |
096 | |
097 | } |
098 | $("#CompleteQuality").append(ObglCompleteQuality); |
099 | $("#PingJiaText").text(json.data[0].content); |
100 | |
101 | if(json.data[0].level==0){ |
102 | $("#levelcom").text("好评"); |
103 | } |
104 | if(json.data[0].level==1){ |
105 | $("#levelcom").text("中评"); |
106 | } |
107 | if(json.data[0].level==2){ |
108 | $("#levelcom").text("差评"); |
109 | } |
110 | |
111 | } |
112 | else{ |
113 | $("#pingjiaDiv").css("display","block"); |
114 | $("#PingJiaComplete").css("display","none"); |
115 | } |
116 | |
117 | }, |
118 | error:function(json){ |
119 | } |
120 | }); |
121 | } |
122 | |
123 | var serverPinjia=serverAddress + "/api/manueval/addManueval.shtml"; |
124 | //添加评价 |
125 | function addManueval(){ |
126 | ManuevalId=getPingJiaId(); |
127 | var sessionStorage=window.sessionStorage; |
128 | var user=JSON.parse(sessionStorage.getItem("user")); |
129 | if(user.id!=null){ |
130 | jQuery.support.cors = true; |
131 | $.ajax({ |
132 | type:"post", |
133 | url:serverPinjia, |
134 | xhrFields: { |
135 | withCredentials: true |
136 | }, |
137 | crossDomain: true, |
138 | data:{ |
139 | "level":$("#level").val(), |
140 | "speed":$("#hiddenstar1").val(), |
141 | "serviceAtt":$("#hiddenstar2").val(), |
142 | "quality":$("#hiddenstar3").val(), |
143 | "content":$("#creditContent").val(), |
144 | "mid":ManuevalId, |
145 | "uid":user.id |
146 | }, |
147 | success:function(json){ |
148 | if(json.code==1){ |
149 | swal("评价成功","感谢您的评价","success"); |
150 | } |
151 | else { |
152 | swal("提示","请勿重复提交！","warning") |
153 | } |
154 | }, |
155 | error:function(json){ |
156 | } |
157 | |
158 | |
159 | }); |
160 | } |
161 | |
162 | } |
163 | </script> |
164 | </head> |
165 | <body> |
166 | <div id="pingjiaDiv" style="display: none;"> |
167 | <div style="float:left">雇主对威客的评价：</div> |
168 | <div> |
169 | <select id="level" style="float:left"> |
170 | <option value="0">好评</option> |
171 | <option value="1">中评</option> |
172 | <option value="2">差评</option> |
173 | </select> |
174 | </div> |
175 | <br/> |
176 | <div style="float:left;margin-left: -150px;">对该稿件评价：</div> |
177 | <div id="star1" style="width:200px;float:left;margin-left: -150px;"> |
178 | <span>工作速度</span> |
179 | <ul> |
180 | <li name="li"><a href="javascript:;">1</a></li> |
181 | <li name="li"><a href="javascript:;">2</a></li> |
182 | <li name="li"><a href="javascript:;">3</a></li> |
183 | <li name="li"><a href="javascript:;">4</a></li> |
184 | <li name="li"><a href="javascript:;">5</a></li> |
185 | </ul> |
186 | <span></span> |
187 | <p></p> |
188 | </div> |
189 | <div id="star2" style="float:left;width:200px"> |
190 | <span>完成质量</span> |
191 | <ul> |
192 | <li><a href="javascript:;">1</a></li> |
193 | <li><a href="javascript:;">2</a></li> |
194 | <li><a href="javascript:;">3</a></li> |
195 | <li><a href="javascript:;">4</a></li> |
196 | <li><a href="javascript:;">5</a></li> |
197 | </ul> |
198 | <span></span> |
199 | <p></p> |
200 | </div> |
201 | <div id="star3" style="float:left;width:200px"> |
202 | <span>完成质量</span> |
203 | <ul> |
204 | <li><a href="javascript:;">1</a></li> |
205 | <li><a href="javascript:;">2</a></li> |
206 | <li><a href="javascript:;">3</a></li> |
207 | <li><a href="javascript:;">4</a></li> |
208 | <li><a href="javascript:;">5</a></li> |
209 | </ul> |
210 | <span></span> |
211 | <p></p> |
212 | </div> |
213 | <div style="width:50px;height:50px;"> |
214 | <input type="hidden" value="" id="hiddenstar1"> |
215 | <input type="hidden" value="" id="hiddenstar2"> |
216 | <input type="hidden" value="" id="hiddenstar3"> |
217 | </div> |
218 | <div> |
219 | <div id="textareaStyle"><textarea id="creditContent" maxlength="200" style="width: 300px;height: 150px;"></textarea></div> |
220 | |
221 | <div id="submitStyle"><a href="#" onclick="javascript:addManueval()">提交</a></div> |
222 | </div> |
223 | </div> |
224 | <p></p> |
225 | |
226 | <div id="PingJiaComplete" style="border-radius: 8px;padding-left: 15px; width:740px;display: none;;border: solid 1px black;background-color:white ;"> |
227 | <div id="levelcom" style="width: 100%;float: left;"></div> |
228 | <div> |
229 | 评论时间: |
230 | <label id="createTime"></label> |
231 | </div> |
232 | <div style="width: 33%;float: left;"> |
233 | <label style="float: left;">工作速度：</label> |
234 | <label id="workSpeed"></label> |
235 | </div> |
236 | <div style="width: 33%;float: left;"> |
237 | <label style="float: left;">服务态度：</label> |
238 | <label id="serviceAltitude"></label> |
239 | </div> |
240 | <div style="width: 33%;float: left;"> |
241 | <label style="float: left;">完成质量：</label> |
242 | <label id="CompleteQuality"></label> |
243 | </div> |
244 | <div id="PingJiaText" style="width: 100%; height: 100px;text-indent:10px; background-color: #7ECFF4;float: left;margin-top: 15px;"> |
245 | </div> |
246 | </div> |
247 | </body> |
248 | </html> |
使用方法
