<script language="javascript">
   
  $(document).ready(function () {
  //purchase
  $("#orderButton").click(function () {
  var departure_city_id = $('#departure_city_id').val();
  var adult_num = $('#adult').val();
  var child_num = $('#child').val();
  var departure_date = $("#departure_date").val();
  var tid = $("#tid").val();
  if (!departure_city_id) {
  alert('请选择出发城市');
  return false;
  }
   
  if (!departure_date) {
  //alert('请从日历选择出发日期');
  return false;
  }
  if (!adult_num) {
  alert('请选择成人乘客人数');
  return false;
  }
  $(this).val('处理中...');
  $.post("/product/purchase", {id: departure_city_id, adult_num: adult_num, child_num: child_num, departure_date: departure_date, tid: tid}, function (result) {
  if (result.status == "OK") {
  window.location.href = '/cart'
  } else {
  alert(result.msg);
  $("#orderButton").val('立即预订');
  return false;
  }
  }, "json");
  });
  huanli(".cy_kuang2 ul", "li");
  $(".cy_kuang2 ul li").click(
  function () {
  //var css_this = "this"
  var data_url = $(this).attr("data-url");
  //$(this).addClass(css_this).siblings().removeClass(css_this);
  $("html,body").animate({scrollTop: $(data_url).offset().top - 40});
  });
  $(".sidebar .daybox").click(
  function () {
  //var css_this = "this"
  var data_url = $(this).attr("data-url");
  //$(this).addClass(css_this).siblings().removeClass(css_this);
  $("html,body").animate({scrollTop: $(data_url).offset().top - 40});
  });
  //唤醒 返回头部按钮
  var nt = !1, nt1 = !1;
  $(window).bind("scroll",
  function () {
  var st = $(document).scrollTop(); //往下滚的高度
  nt = nt ? nt : $(".cy_kuang3").offset().top;
  nt1 = nt1 ? nt1 : $(".tripall").offset().top;
  // document.title=st;
  var sel = $(".cy_kuang2"), css = "fudongx", sel1 = $(".sidebar"), css1 = "fudongxa";
  if (nt <= st) {
  sel.addClass(css);
  }
  if (nt > st) {
  sel.removeClass(css);
  }
  ;
  if (nt1 <= st) {
  sel1.addClass(css1);
  }
  if (nt1 > st) {
  sel1.removeClass(css1);
  }
  ;
  if ($(".tripall_end").offset().top - $(".sidebar").height() < st) {
  sel1.removeClass(css1);
  }
  for (var i = 0; i < 4; i++) {
  var iii = i + 1;
  if (st > $(".ck_" + iii).offset().top - 100) {
  $(".cy_kuang2").find("li:eq(" + i + ")").addClass("this").siblings().removeClass("this");
  }
  }
  ;
  var day_num = $(".tripdays").size();
  for (var i = 0; i < day_num; i++) {
  var iii = i + 1;
  if (st > $(".day" + iii).offset().top - 100) {
  $(".sidebar").find(".daybox:eq(" + i + ")").addClass("this").siblings().removeClass("this");
  }
  }
  ;
  });
  });
  //获取平均整除
  huanli = function (wai, nei) {
  var wai = $(wai)
  wai.show().parent().show();
  var li = wai.find(nei), v = li.size(), vv = wai.width() / v;
  li.width(vv);
  };</script>

商品详情页,banner滚动点击加载效果,js,jquary的更多相关文章

  1. Android点击跳转到淘宝的某一商品详情页或者某一店铺页面

    最近项目的有个需求是点击购买资料按钮进入淘宝界面,简单分析一下,如果用户手机有淘宝就打开淘宝的页面,没有的话也可以选择使用webView进行展示,还是使用手机浏览器进行展示. 判断有无淘宝的代码就不贴 ...

  2. 用js原生加jquery实现下拉跳转至商品详情页,上拉回到商品简介

    在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使 ...

  3. react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置

    现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...

  4. 自己定义ViewGroup实现仿淘宝的商品详情页

    近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...

  5. Vue通过id跳转到商品详情页

    首页列表: 在这里我用a标签进行跳转,在vue里面使用<router-link></router-link> <router-link :to="{path:' ...

  6. iOS app url scheme跳转到淘宝商品详情页 唤醒app

    最近涉及的一个业务,在app内的一个广告,点击打开webView,加载的是一个淘宝商品详情页,效果是打开该webView自动跳转至淘宝对应的页面,同时在自己的app仍然加载页面,点击评论等也同样能跳转 ...

  7. 高并发 Nginx+Lua OpenResty系列(10)——商品详情页

    本章以京东商品详情页为例,京东商品详情页虽然仅是单个页面,但是其数据聚合源是非常多的,除了一些实时性要求比较高的如价格.库存.服务支持等通过AJAX异步加载加载之外,其他的数据都是在后端做数据聚合然后 ...

  8. ecshop 商品详情页显示同类别下的推荐商品

    1.打开goods.php文件找到下面代码 $smarty->assign('goods_rank', get_goods_rank($goods_id)); // 商品的销售排名 在上面的代码 ...

  9. Freemarker商品详情页静态化服务调用处理

    --------------------------------------------------------------------------------------------- [版权申明: ...

随机推荐

  1. Windows平台下解决Oracle12c使用PDB数据库创建SDE的问题 分类: oracle sde 2015-06-12 11:03 88人阅读 评论(0) 收藏

    Windows平台下解决Oracle12c使用PDB数据库创建SDE的问题 Oracle 12C中引入了CDB与PDB的新特性,在ORACLE 12C数据库引入的多租用户环境(Multitenant ...

  2. UDP和TCP的主要特点

    UDP的主要特点是:(1)无连接:(2)尽最大努力交付:(3)面向报文:(4)无拥塞控制:(5)支持一对一.一对多.多对一和多对多的交互通信:(6)首部开销小(只有四个字段:源端口.目的端口.长度.检 ...

  3. HBase简介及集群安装

    一.Hbase概述 Apache HBase™是Hadoop数据库,是一个分布式,可扩展的大数据存储. 当您需要对大数据进行随机,实时读/写访问时,请使用Apache HBase™.该项目的目标是托 ...

  4. Django资源汇总(转)

    Django 我和Django¶ 我使用python的很大一部分原因就是django.虽然在以前也用过python,不过始终没有什么特别的感觉.然后接触到了django.可以说django非常对我的胃 ...

  5. python爬虫系列(2)—— requests和BeautifulSoup

    本文主要介绍python爬虫的两大利器:requests和BeautifulSoup库的基本用法. 1. 安装requests和BeautifulSoup库 可以通过3种方式安装: easy_inst ...

  6. Spark2.0机器学习系列之12: 线性回归及L1、L2正则化区别与稀疏解

    概述 线性回归拟合一个因变量与一个自变量之间的线性关系y=f(x).       Spark中实现了:       (1)普通最小二乘法       (2)岭回归(L2正规化)       (3)La ...

  7. 机器学习算法(优化)之二:期望最大化(EM)算法

    EM算法概述 (1)数学之美的作者吴军将EM算法称之为上帝的算法,EM算法也是大家公认的机器学习十大经典算法之一.EM是一种专门用于求解参数极大似然估计的迭代算法,具有良好的收敛性和每次迭代都能使似然 ...

  8. rabbitmq报错type

    TypeError: exchange_declare() got an unexpected keyword argument 'type' 原因应该为pika版本不同导致的用法不同,解决方法为把t ...

  9. usermod命令、用户密码管理、mkpasswd命令

    3.4 usermod命令--更改用户帐户属性 -a|--append ##把用户追加到某些组中,仅与-G选项一起使用 -G|--groups ##把用户追加到某些组中,仅与-a选项一起使用:把该用户 ...

  10. armv7 armv7s arm64 i386 x86_64

    开发SDK的同学需要了解这些指令集代表什么. armv7|armv7s|arm64都是ARM处理器的指令集 i386|x86_64 是Mac处理器的指令集 arm64:iPhone7 | iphone ...