js.js 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. $(function(){
  2. $(".find_nav_list").css("left",sessionStorage.left+"px");
  3. var nav_w=$(".find_nav_list li").first().width();
  4. $(".sideline").width(nav_w);
  5. $(".find_nav_list li").on('click', function(){
  6. nav_w=$(this).width();
  7. $(".sideline").stop(true);
  8. $(".sideline").animate({left:$(this).position().left},300);
  9. $(".sideline").animate({width:nav_w});
  10. $(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
  11. $(this).find("a").addClass("on");
  12. $(this).siblings().find("a").removeClass("on");
  13. var fn_w = ($(".find_nav").width() - nav_w) / 2;
  14. var fnl_l;
  15. var fnl_x = parseInt($(this).position().left);
  16. if (fnl_x <= fn_w) {
  17. fnl_l = 0;
  18. } else if (fn_w - fnl_x <= flb_w - fl_w) {
  19. fnl_l = flb_w - fl_w;
  20. } else {
  21. fnl_l = fn_w - fnl_x;
  22. }
  23. $(".find_nav_list").animate({
  24. "left" : fnl_l
  25. }, 300);
  26. sessionStorage.left=fnl_l;
  27. var c_nav=$(this).find("a").text();
  28. navName(c_nav);
  29. });
  30. var fl_w=$(".find_nav_list").width();
  31. var flb_w=$(".find_nav_left").width();
  32. $(".find_nav_list").on('touchstart', function (e) {
  33. var touch1 = e.originalEvent.targetTouches[0];
  34. x1 = touch1.pageX;
  35. y1 = touch1.pageY;
  36. ty_left = parseInt($(this).css("left"));
  37. });
  38. $(".find_nav_list").on('touchmove', function (e) {
  39. var touch2 = e.originalEvent.targetTouches[0];
  40. var x2 = touch2.pageX;
  41. var y2 = touch2.pageY;
  42. if(ty_left + x2 - x1>=0){
  43. $(this).css("left", 0);
  44. }else if(ty_left + x2 - x1<=flb_w-fl_w){
  45. $(this).css("left", flb_w-fl_w);
  46. }else{
  47. $(this).css("left", ty_left + x2 - x1);
  48. }
  49. if(Math.abs(y2-y1)>0){
  50. e.preventDefault();
  51. }
  52. });
  53. });
  54. function navName(c_nav) {
  55. switch (c_nav) {
  56. case "样板间":
  57. sessionStorage.pagecount = "样板间";
  58. break;
  59. case "交通图":
  60. sessionStorage.pagecount = "交通图";
  61. break;
  62. case "实景图":
  63. sessionStorage.pagecount = "实景图";
  64. break;
  65. case "效果图":
  66. sessionStorage.pagecount = "效果图";
  67. }
  68. }$(function(){
  69. $(".find_nav_list").css("left",sessionStorage.left+"px");
  70. var nav_w=$(".find_nav_list li").first().width();
  71. $(".sideline").width(nav_w);
  72. $(".find_nav_list li").on('click', function(){
  73. nav_w=$(this).width();
  74. $(".sideline").stop(true);
  75. $(".sideline").animate({left:$(this).position().left},300);
  76. $(".sideline").animate({width:nav_w});
  77. $(this).addClass("find_nav_cur").siblings().removeClass("find_nav_cur");
  78. $(this).find("a").addClass("on");
  79. $(this).siblings().find("a").removeClass("on");
  80. var fn_w = ($(".find_nav").width() - nav_w) / 2;
  81. var fnl_l;
  82. var fnl_x = parseInt($(this).position().left);
  83. if (fnl_x <= fn_w) {
  84. fnl_l = 0;
  85. } else if (fn_w - fnl_x <= flb_w - fl_w) {
  86. fnl_l = flb_w - fl_w;
  87. } else {
  88. fnl_l = fn_w - fnl_x;
  89. }
  90. $(".find_nav_list").animate({
  91. "left" : fnl_l
  92. }, 300);
  93. sessionStorage.left=fnl_l;
  94. var c_nav=$(this).find("a").text();
  95. navName(c_nav);
  96. });
  97. var fl_w=$(".find_nav_list").width();
  98. var flb_w=$(".find_nav_left").width();
  99. $(".find_nav_list").on('touchstart', function (e) {
  100. var touch1 = e.originalEvent.targetTouches[0];
  101. x1 = touch1.pageX;
  102. y1 = touch1.pageY;
  103. ty_left = parseInt($(this).css("left"));
  104. });
  105. $(".find_nav_list").on('touchmove', function (e) {
  106. var touch2 = e.originalEvent.targetTouches[0];
  107. var x2 = touch2.pageX;
  108. var y2 = touch2.pageY;
  109. if(ty_left + x2 - x1>=0){
  110. $(this).css("left", 0);
  111. }else if(ty_left + x2 - x1<=flb_w-fl_w){
  112. $(this).css("left", flb_w-fl_w);
  113. }else{
  114. $(this).css("left", ty_left + x2 - x1);
  115. }
  116. if(Math.abs(y2-y1)>0){
  117. e.preventDefault();
  118. }
  119. });
  120. });