ui.js 6.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  1. var ui={
  2. focus:function(focusId,autoTime){
  3. var wrap=$(focusId),
  4. pics=$(""+focusId+" .pic-item"),
  5. intros=$(""+focusId+" .intro"),
  6. pagItems=$(""+focusId+" .pagination-item"),
  7. len=pics.length;
  8. var preIndex=0,
  9. index=0;
  10. var firstPic=pics.eq(0).find('img').eq(0);
  11. var img=new Image();
  12. var wrap_width=wrap.width();
  13. var pic_height=0;
  14. img.onload=function(){
  15. pic_height=wrap_width*img.height/img.width;
  16. wrap.css({'height':pic_height});
  17. $(window).bind('resize',function(){
  18. wrap_width=wrap.width();
  19. pic_height=wrap_width*img.height/img.width;
  20. wrap.css({'height':pic_height});
  21. });
  22. };
  23. img.src=firstPic.attr('src');
  24. if(len==1){
  25. $(""+focusId+" .pagination").eq(0).hide();
  26. return;
  27. };
  28. (function init(){
  29. pics.each(function(){
  30. var i=$(this).index();
  31. $(this).css({"z-index":len-i});
  32. });
  33. })();
  34. function toSwitch(i){
  35. pics.eq(preIndex).stop(true,true).fadeOut();
  36. if(intros.length){
  37. intros.eq(preIndex).hide();
  38. intros.eq(i).show();
  39. };
  40. pagItems.eq(preIndex).removeClass("active");
  41. pics.eq(i).stop(true,true).fadeIn();
  42. pagItems.eq(i).addClass("active");
  43. preIndex=i;
  44. };
  45. pagItems.each(function(){
  46. $(this).bind("click",function(){
  47. if($(this).hasClass('active')){
  48. return;
  49. };
  50. var i=$(this).index();
  51. toSwitch(i);
  52. index=i;
  53. });
  54. });
  55. function autoPlay(){
  56. index++;
  57. if(index>=len){index=0;};
  58. toSwitch(index);
  59. };
  60. if(wrap.has('.arrows').length>0){
  61. var arrow_left=wrap.find('.arrow-left').eq(0);
  62. var arrow_right=wrap.find('.arrow-right').eq(0);
  63. arrow_left.bind('click',function(){
  64. index--;
  65. if(index<0){index=len-1;};
  66. toSwitch(index);
  67. });
  68. arrow_right.bind('click',function(){
  69. index++;
  70. if(index>=len){index=0;};
  71. toSwitch(index);
  72. });
  73. };
  74. var timer=setInterval(autoPlay,autoTime);
  75. wrap.hover(function(){
  76. clearInterval(timer);
  77. },function(){
  78. timer=setInterval(autoPlay,autoTime);
  79. });
  80. },
  81. titleDrop:function(titleId,contentId){
  82. var title=$(titleId);
  83. var ctbox=$(contentId);
  84. var allContent=$('.drop-container');
  85. var allTitle=$('.drop-title');
  86. var closeBtn=ctbox.find('.close');
  87. title.bind('click',function(){
  88. if(title.hasClass('current')){
  89. title.removeClass('current');
  90. ctbox.stop(true,true).slideUp();
  91. }else{
  92. allContent.each(function(i){
  93. allContent.eq(i).hide();
  94. allTitle.eq(i).removeClass('current');
  95. });
  96. $(this).addClass('current');
  97. ctbox.stop(true,true).slideDown();
  98. };
  99. });
  100. if(closeBtn){
  101. closeBtn.bind('click',function(){
  102. title.removeClass('current');
  103. ctbox.stop(true,true).slideUp();
  104. });
  105. };
  106. },
  107. sideSlide:function(titleId,contentId){
  108. var title=$(titleId);
  109. var content=$(contentId);
  110. var sideConent=content.find('.side-right-container').eq(0);
  111. title.bind('click',function(){
  112. if(title.hasClass('active')){
  113. title.removeClass('active');
  114. sideConent.stop(true,true).fadeOut(function(){
  115. content.stop(true,true).animate({'left':'-190px'},function(){
  116. content.hide();
  117. });
  118. });
  119. }else{
  120. content.show();
  121. $(this).addClass('active');
  122. content.stop(true,true).animate({'left':'0'},function(){
  123. sideConent.stop(true,true).fadeIn();
  124. });
  125. };
  126. });
  127. },
  128. pointDialog:function(points,dialogs){
  129. var pre=0;
  130. points.each(function(){
  131. $(this).bind('click',function(){
  132. var current=$(this).index();
  133. if(!$(this).hasClass('current')){
  134. points.eq(pre).removeClass('current');
  135. dialogs.eq(pre).hide();
  136. $(this).addClass('current');
  137. dialogs.eq(current).fadeIn(300);
  138. pre=current;
  139. };
  140. });
  141. });
  142. dialogs.each(function(){
  143. var closeBtn=$(this).find('.close');
  144. if(closeBtn){
  145. closeBtn.bind('click',function(){
  146. var dialog=$(this).parent('.point-dialog');
  147. var current=dialog.index();
  148. dialog.fadeOut(300);
  149. points.eq(current).removeClass('current');
  150. });
  151. };
  152. });
  153. },
  154. reviewPicFocus:function(smpic_options,bgpic_box){
  155. var options=$(smpic_options);
  156. var bgpicbox=$(bgpic_box);
  157. var bigPic=bgpicbox.find('img').eq(0);
  158. var pre=0;
  159. options.each(function(){
  160. var this_=$(this);
  161. this_.bind('click',function(){
  162. var current=this_.index();
  163. if(!this_.hasClass('active')){
  164. options.eq(pre).removeClass('active');
  165. this_.addClass('active');
  166. bgpicbox.addClass('active');
  167. bigPic.attr('src',this_.find('img').eq(0).attr('src'));
  168. }else{
  169. this_.removeClass('active');
  170. bgpicbox.removeClass('active');
  171. };
  172. pre=current;
  173. });
  174. });
  175. },
  176. scrollToTop:function(sideBox){
  177. var sideBox=$(sideBox);
  178. var documentHeight=$(document).height();
  179. $(window).bind('scroll',function(){
  180. if($(document).scrollTop()>=documentHeight/3){
  181. sideBox.fadeIn();
  182. }else{
  183. sideBox.fadeOut();
  184. }
  185. });
  186. $("#totop").click(function(){
  187. $.scrollTo('#wrap',500);
  188. });
  189. },
  190. dialog:function(handle,dialog,callback){
  191. var handle=$(handle);
  192. var dialog=$(dialog);
  193. handle.bind('click',function(){
  194. dialog.show();
  195. });
  196. var closeBtn=dialog.find('.close');
  197. var cancelBtn=dialog.find('.cancel');
  198. if(closeBtn||cancelBtn){
  199. closeBtn.bind('click',function(){
  200. dialog.hide();
  201. });
  202. cancelBtn.bind('click',function(){
  203. dialog.hide();
  204. });
  205. };
  206. if(typeof arguments[2]=='function'){
  207. (callback)();
  208. };
  209. },
  210. hintDialog:function(handle,dialog,callback){
  211. var handle=$(handle);
  212. var dialog=$(dialog);
  213. handle.bind('click',function(){
  214. dialog.show();
  215. if(dialog.timer){
  216. clearTimeout(dialog.timer);
  217. };
  218. dialog.timer=setTimeout(function(){
  219. dialog.stop().fadeOut(300);
  220. },2000);
  221. });
  222. if(typeof arguments[2]=='function'){
  223. (callback)();
  224. };
  225. },
  226. tab:function(options,tabContents){
  227. var preIndex=0;
  228. var options=$(options);
  229. var tabContents=$(tabContents);
  230. (function init(){
  231. options.eq(0).addClass('active');
  232. tabContents.eq(0).fadeIn();
  233. })();
  234. options.each(function(){
  235. var this_=$(this);
  236. this_.bind('click',function(){
  237. if(preIndex==this_.index()){
  238. return;
  239. };
  240. var curIndex=this_.index();
  241. tabContents.eq(curIndex).fadeIn();
  242. tabContents.eq(preIndex).hide();
  243. this_.addClass('active');
  244. options.eq(preIndex).removeClass('active');
  245. preIndex=curIndex;
  246. });
  247. });
  248. }
  249. };