📄 正在查看：twcms/view/default/js/main.js
1/*
2亲爱的朋友，你是来找bug的吗？
3@功能:前台所有JS相关功能
4@版本:TWCMS_2.0.0
5@作者:wuzhaohuan <kongphp@gmail.com>
6@时间:2013-09-16
7*/
8
9function intval(i) {
10 i = parseInt(i);
11 return isNaN(i) ? 0 : i;
12}
13
14function getBrowser() {
15 var browser = {
16 msie: false, firefox: false, opera: false, safari: false,
17 chrome: false, netscape: false, appname: '未知', version: ''
18 },
19 userAgent = window.navigator.userAgent.toLowerCase();
20 if (/(msie|firefox|opera|chrome|netscape)\D+(\d[\d.]*)/.test(userAgent)){
21 browser[RegExp.$1] = true;
22 browser.appname = RegExp.$1;
23 browser.version = RegExp.$2;
24 }else if(/version\D+(\d[\d.]*).*safari/.test(userAgent)){
25 browser.safari = true;
26 browser.appname = 'safari';
27 browser.version = RegExp.$2;
28 }
29 return browser;
30}
31
32//jQuery的cookie扩展
33$.cookie = function(name, value, options) {
34 if(typeof value != 'undefined') {
35 options = options || {};
36 if(value === null) {
37 value = '';
38 options.expires = -1;
39 }
40 var expires = '';
41 if(options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
42 var date;
43 if(typeof options.expires == 'number') {
44 date = new Date();
45 date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
46 }else{
47 date = options.expires;
48 }
49 expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
50 }
51 var path = options.path ? '; path=' + options.path : '';
52 var domain = options.domain ? '; domain=' + options.domain : '';
53 var secure = options.secure ? '; secure' : '';
54 document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
55 }else{
56 var cookieValue = null;
57 if(document.cookie && document.cookie != '') {
58 var cookies = document.cookie.split(';');
59 for(var i = 0; i < cookies.length; i++) {
60 var cookie = jQuery.trim(cookies[i]);
61 if(cookie.substring(0, name.length + 1) == (name + '=')) {
62 cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
63 break;
64 }
65 }
66 }
67 return cookieValue;
68 }
69};
70
71$(function() {
72 // 导航JS效果
73 (function() {
74 if($(".n_c dl").length < 1) return false;
75 var o = $(".n_c dl.on").index();
76 var p = $(".n_c dl.on").position();
77 var l = !p ? 9 : p.left+9;
78
79 if(o != -1) $(".n_hover").html($(".n_c dl:eq("+o+")").html()).css("left", l);
80
81 $(".n_c dl").hover(function(){
82 var l = $(this).position().left+9;
83 $(".n_hover").stop(true).html($(this).html());
84 $(".n_hover dd").fadeIn();
85 $(".n_hover").animate({left: l+3},150).animate({left: l-3},150).animate({left: l},150);
86 },function(){});
87
88 $(".nav").hover(function(){
89 $(".n_hover dd").fadeIn();
90 }, function() {
91 var s = o != -1 ? $(".n_c dl:eq("+ o +")").html() : "";
92 $(".n_hover").stop(true, true).html(s);
93 $(".n_hover").animate({left: l+3},150).animate({left: l-3},150).animate({left: l},150);
94 });
95 })();
96
97 //搜索
98 (function(){
99 $("#search_form,#search_form2").submit(function(){
100 var mid = $(this).find("[name='mid']").val();
101 var keyword = $(this).find("[name='keyword']").val();
102 window.location.href = "index.php?search-index-mid-"+mid+"-keyword-"+encodeURIComponent(keyword);
103 return false;
104 });
105 })();
106
107 // banner
108 (function(){
109 var time = 3000; // 滚动间隔时间
110 var len = $(".banner ul li").length;
111
112 if(len < 1) return false;
113 var w = $(".banner").width();
114
115 $(".banner").append('<a class="b_prev" href="javascript:;"></a><a class="b_next" href="javascript:;"></a><div class="b_push"></div>');
116 $(".banner ul").width(w*len); // 设置宽度
117
118 var b_push = $(".banner .b_push");
119 for(var j=0; j<len; j++) {
120 b_push.append('<a href="javascript:;"></a>');
121 }
122 $(".banner .b_push").css("left", (w-b_push.width())/2); // 居中
123
124 var setPosition = function(i) {
125 $(".banner ul").animate({left: -(w*i)}, 500, function(){
126 $(".banner .b_push a").removeAttr("class");
127 $(".banner .b_push a:eq("+i+")").addClass("on");
128 });
129 }
130 setPosition(0);
131
132 var run = function(type) {
133 var i = $(".banner .b_push a.on").index();
134 if(type > 0) {
135 i = (i == 0) ? len-1 : i-1;
136 }else{
137 i = (i == len-1) ? 0 : i+1;
138 }
139 setPosition(i);
140 }
141
142 $(".banner .b_push a").click(function(){ setPosition($(this).index()); });
143 $(".banner .b_prev").click(function(){ run(1); });
144 $(".banner .b_next").click(function(){ run(-1); });
145
146 var r = setInterval(function(){ run(-1); }, time);
147 $(".banner").hover(function(){
148 clearInterval(r);
149 $(".banner .b_prev,.banner .b_next").show();
150 },function(){
151 r = setInterval(function(){ run(-1); }, time);
152 $(".banner .b_prev,.banner .b_next").hide();
153 });
154 })();
155
156 // 首页滚动图片
157 (function() {
158 var time = 2000; // 滚动间隔时间
159 var obj = $(".piclist .p_cont ul li");
160 var len = obj.length;
161 if(len < 5) return false;
162 var obj2 = $(".piclist .p_cont ul");
163 var w = obj.outerWidth(true);
164 obj2.width(w*len*2+10).append(obj2.html());
165
166 var old_left = obj2.position().left;
167 var new_left = old_left;
168 var run = function (type) {
169 if(type > 0) {
170 if(new_left >= old_left) {
171 var d_l = -(w*len);
172 obj2.stop(true).css("left", d_l);
173 new_left = d_l;
174 }
175 new_left = new_left + w;
176 }else{
177 if(new_left <= -(w*len)) {
178 obj2.stop(true).css("left", old_left);
179 new_left = old_left;
180 }
181 new_left = new_left - w;
182 }
183 obj2.animate({left: new_left+3},150).animate({left: new_left-3},150).animate({left: new_left},150);
184 }
185
186 var r = setInterval(function() { run(-1); }, time);
187 $(".piclist").hover(function(){
188 clearInterval(r);
189 }, function() {
190 r = setInterval(function() { run(-1); }, time);
191 });
192
193 $(".piclist .p_prev").click(function(){ run(1); });
194 $(".piclist .p_next").click(function(){ run(-1); });
195 })();
196
197 // 发表评论
198 (function(){
199 if($("#ctf_content").length < 1) return false;
200 var cont = $("#ctf_content");
201 var author = $("#ctf_author");
202 var cont_v = cont.val();
203 var tw_author = $.cookie("tw_comment_author");
204 if(tw_author) {
205 var author_v = tw_author;
206 }else{
207 var author_arr = ["游客", "网友"];
208 var i = parseInt(Math.random() * author_arr.length);
209 var author_v = author_arr[i];
210 }
211 author.val(author_v);
212
213 $(cont).focusin(function() {
214 if(cont.val() == cont_v) cont.val("");
215 }).focusout(function() {
216 if(!cont.val()) cont.val(cont_v);
217 });
218
219 $(author).focusin(function() {
220 if(author.val() == author_v) author.val("");
221 }).focusout(function() {
222 if(!author.val()) author.val(author_v);
223 });
224
225 // 评论提交
226 window.ctf_form_one = false;
227 $("#ctf_form").submit(function(){
228 if(window.ctf_form_one) return false;
229 window.ctf_form_one = true;
230 var browser = getBrowser();
231 var author_v = $("#ctf_author").val();
232 $.cookie("tw_comment_author", author_v, {expires:3650}); // 写入cookie
233 if(!browser.firefox) $("#ctf_submit").attr("disabled", "disabled");
234 setTimeout(function(){
235 if(!browser.firefox) $("#ctf_submit").removeAttr("disabled");
236 window.ctf_form_one = false;
237 $("#ctf_tips").html("");
238 }, 2000);
239 if($("#ctf_content").val() == cont_v) {
240 $("#ctf_tips").html('<font color="red">请填写评论内容！</font>');
241 return false;
242 }
243 if(!author_v) {
244 $("#ctf_tips").html('<font color="red">请填写昵称！</font>');
245 return false;
246 }
247 var _this = $(this);
248 $.post(_this.attr("action"), _this.serialize(), function(data){
249 try{
250 console.log(data);
251 var json = eval("("+data+")");
252 if(json.kong_status) {
253 $("#ctf_tips").html('<font color="green">'+json.message+'</font>');
254 setTimeout(function(){
255 var Uarr = location.href.split('#');
256 location.href = Uarr[0] + "#ctf";
257 location.reload();
258 }, 500);
259 }else{
260 if(json.kp_error) {
261 $("#ctf_form").after("<div style='padding:10px'>"+json.kp_error+"</div>");
262 }else{
263 $("#ctf_tips").html('<font color="red">'+json.message+'</font>');
264 }
265 }
266 }catch(e){
267 alert(data);
268 }
269 });
270 return false;
271 });
272 })();
273
274 // 产品内容页图组
275 (function(){
276 var len = $("#spec_item li").length;
277 if(len < 1) return false;
278
279 var sw = $("#spec_item").width();
280 var lw = $("#spec_item li").outerWidth(true);
281 $("#spec_item ul").css("width", lw*len+10);
282 $("#spec_item img").removeAttr("title").removeAttr("alt");
283 $("#spec_prev").addClass("dis");
284
285 if(len <= 4) $("#spec_next").addClass("dis");
286
287 var setPic = function(i) {
288 $("#spec_item img").removeClass("on");
289 $("#spec_item img").eq(i).addClass("on");
290 $("#spec_pic").html('<img src="'+ $("#spec_item img").eq(i).attr("big") +'">');
291 }
292 setPic(0);
293
294 $("#spec_prev").click(function() {
295 if(!$(this).is(".dis")) {
296 var l = $("#spec_item ul").position().left + lw;
297 $("#spec_item ul").css("left", l);
298 if(l == 0) $(this).addClass("dis");
299 $("#spec_next").removeClass("dis");
300 }
301 });
302
303 $("#spec_next").click(function() {
304 var minL = sw - lw*len + 6;
305 if(!$(this).is(".dis")) {
306 var l = $("#spec_item ul").position().left - lw;
307 $("#spec_item ul").css("left", l);
308 if(l == minL) $(this).addClass("dis");
309 $("#spec_prev").removeClass("dis");
310 }
311 });
312
313 $("#spec_item img").mouseover(function(){ setPic($(this).parent().index()); });
314
315 $("#spec_pic").hover(function(){
316 $(this).append('<div id="spec_zoom"></div>');
317 $(this).before('<div id="spec_big"><img src="'+$(this).find("img").attr("src")+'"></div>');
318
319 var o = $(this).offset();
320 var w = $(this).children("img").width();
321 var h = $(this).children("img").height();
322 var w2 = $("#spec_zoom").outerWidth();
323 var h2 = $("#spec_zoom").outerHeight();
324 var w3 = $("#spec_big").width() * (w/w2);
325 var h3 = $("#spec_big").height() * (h/h2);
326
327 $("#spec_big").css({"left": o.left + w + 12, "top": o.top});
328 $("#spec_big img").css({"width": w3, "height": h3});
329
330 $(this).on('mousemove', function(e) {
331 var l = e.pageX - w2/2 - o.left;
332 var t = e.pageY - h2/2 - o.top;
333 l = Math.max(0, Math.min(w - w2, l));
334 t = Math.max(0, Math.min(h - h2, t));
335 $("#spec_zoom").css({"left": l, "top": t});
336
337 // 小框在区域中移动的比例
338 var perX = l/w;
339 var perY = t/h;
340 $("#spec_big img").css({"left": -(perX*w3), "top": -(perY*h3)});
341 });
342 },function() {
343 $("#spec_zoom,#spec_big").remove();
344 $(this).off('mousemove');
345 });
346 })();
347
348 // 图集内容页图组
349 (function(){
350 var len = $("#main_d dl").length;
351 if(len < 1) return false;
352
353 // 补充HTML代码
354 $("#main_a").html('<a class="go_l" href="javascript:;"><b></b></a><div class="pic"></div><a class="go_r" href="javascript:;"><b></b></a>');
355 $("#main_c").html('<div class="small_pic"><a class="go_l" href="javascript:;"></a><div class="warp"><ul class="cf"></ul></div><a class="go_r" href="javascript:;"></a></div><div class="scroll_line"><b></b></div>');
356 $("#main_d dl").each(function(i){
357 $("#main_c .warp ul").append('<li><a href="javascript:;"><img src="'+ $(this).attr("small") +'" /><b>'+ (i+1) +'/'+ len +'</b></a></li>');
358 });
359
360 var liW = $(".small_pic .warp ul li").outerWidth(true);
361 var warpW = $(".small_pic .warp").width();
362 var maxLeft = liW*len-warpW; // 最大left
363 var scrollW = $(".scroll_line b").outerWidth();
364 var maxLeft2 = $(".scroll_line").width() - scrollW; // 卷轴条最大left
365 var playRun; // 自动幻灯播放进程
366
367 // 设置小图片组显示一行的宽度
368 $(".small_pic .warp ul").width(liW*len+10);
369
370 // 设置小图片组和卷轴条位置
371 var setPosition = function(left) {
372 var l = left - ((warpW-liW)/2);
373 l = Math.max(0, Math.min(maxLeft, l));
374 $(".small_pic .warp ul").stop(true).animate({"left": -l});
375
376 var l2 = maxLeft2*(l/maxLeft);
377 $(".scroll_line b").stop(true).animate({"left": l2});
378 }
379
380 // 设置显示第几张图片
381 var setDisplay = function(i) {
382 var vLen = $("#main_end:visible").length;
383 if(i < 0 || i >= len) {
384 if(vLen > 0) return false;
385 var o = $("#main_a").offset();
386 var l = ( ( $("#main_a").width() - $("#main_end").outerWidth() ) / 2);
387 var t = ( ( $("#main_a").height() - $("#main_end").outerHeight() ) / 2);
388
389 $("#main_end").css({"left": o.left+l}).animate({"top": o.top+t}).show();
390 return false;
391 }else if(vLen > 0) {
392 mainEndClose();
393 }
394
395 $(".small_pic .warp ul li").removeAttr("class");
396 $(".small_pic .warp ul li").eq(i).addClass("on");
397 $("#main_a .pic").html('<img src="'+ $("#main_d dl").eq(i).attr("big") +'">');
398 $("#main_b").html($("#main_d dl dd").eq(i).html());
399
400 setPosition($(".small_pic .warp ul li").eq(i).position().left);
401
402 $("#pic_save").attr("href", $("#main_a img").attr("src"));
403
404 var uArr = location.href.split('#');
405 if(i>0 || uArr[1]) window.location.href = uArr[0] + "#p=" + (i+1);
406
407 // 预加载下一张图片，这是为减轻服务器压力和用户体验而设计
408 $("#main_a .pic img")[0].onload = function() {
409 var next_img = $("#main_d dl").eq(i+1).attr("big");
410 if(next_img) $("#main_a").append('<img src="'+ next_img +'" style="display:none">');
411 }
412 }
413
414 var uArr = location.hash.split('#p=');
415 var i = Math.max(1, intval(uArr[1])) - 1;
416 setDisplay(i);
417
418 // 关闭上下图集
419 var mainEndClose = function() {
420 $("#main_end").animate({"top": -($("#main_end").outerHeight())}, function() { $("#main_end").hide(); });
421 }
422 $("#main_end .close").click(mainEndClose);
423
424 // 重播图集
425 $("#main_end .replay").click(function() {
426 setDisplay(0);
427 });
428
429 // 自动幻灯播放
430 $("#pic_play").click(function() {
431 var _this = $(this);
432 var play = _this.attr("play");
433
434 if(!play) {
435 _this.attr("play_lang", _this.html());
436 _this.html(_this.attr("stop_lang"));
437 playRun = setInterval(function(){
438 var i = $(".small_pic .warp ul li.on").index();
439 setDisplay(i+1);
440 if(i+1 == len) _this.click();
441 }, 5000);
442 _this.attr("play", "true");
443 }else{
444 clearInterval(playRun);
445 _this.removeAttr("play");
446 _this.attr("stop_lang", _this.html());
447 _this.html(_this.attr("play_lang"));
448 }
449 });
450
451 // 左右键盘翻页
452 document.onkeydown = function(e) {
453 e = window.event || e;
454 var i = $(".small_pic .warp ul li.on").index();
455 e.keyCode == 37 && setDisplay(i-1);
456 e.keyCode == 39 && setDisplay(i+1);
457 }
458
459 $(".small_pic .warp ul li").click(function() {
460 var i = $(this).index();
461 setDisplay(i);
462 });
463
464 $(".small_pic .go_l, #main_a .go_l").click(function() {
465 var i = $(".small_pic .warp ul li.on").index();
466 setDisplay(i-1);
467 });
468
469 $(".small_pic .go_r, #main_a .go_r").click(function() {
470 var i = $(".small_pic .warp ul li.on").index();
471 setDisplay(i+1);
472 });
473
474 // 鼠标拖拽卷轴条滚动小图片组位置
475 $(".scroll_line b").mousedown(function(e){
476 $("html,body").css("user-select","none");
477 document.onselectstart = function(){return false};
478 var x = e.pageX;
479 var left = $(this).position().left;
480
481 $(document).on('mousemove', function(e) {
482 var l = (e.pageX - x) + left;
483 l = Math.max(0, Math.min(maxLeft2, l));
484 $(".scroll_line b").css("left", l);
485
486 var l2 = maxLeft*(l/maxLeft2);
487 $(".small_pic .warp ul").css("left", -l2);
488 });
489 });
490 $(document).mouseup(function(){
491 $("html,body").css("user-select","auto");
492 document.onselectstart = function(){return true};
493 $(document).off('mousemove');
494 });
495 })();
496
497 // 右侧边栏
498 (function(){
499 if($(".sidebar").length < 1) return false;
500 var sw = false;
501 var t = $(".sidebar").offset().top;
502 $(window).scroll(function() {
503 if($(window).scrollTop() >= t) {
504 if(!sw) {
505 sw = true;
506 $(".sidebar").addClass("s_fixed");
507 }
508 }else if(sw) {
509 sw = false;
510 $(".sidebar").removeClass("s_fixed");
511 }
512 });
513 })();
514
515 // 返回顶部
516 (function(){
517 var sw = false;
518 $(window).scroll(function() {
519 if($(window).scrollTop() >= 200) {
520 if(!sw) {
521 sw = true;
522 $("body").append('<a id="gotop" href="javascript:;"></a>');
523 $("#gotop").click(function() {
524 $("html,body").animate({scrollTop: 0});
525 //$(window).scrollTop(0);
526 });
527 }
528 }else if(sw) {
529 sw = false;
530 $("#gotop").remove();
531 }
532 });
533 })();
534
535 // 跳转到评论框
536 (function(){
537 var Uarr = location.href.split('#');
538 if(Uarr[1] == "ctf") $("html,body").animate({scrollTop: $("#ctf").offset().top});
539 })();
540});
541