<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. [转载]Elasticsearch、MongoDB和Hadoop比较

    IT界在过去几年中出现了一个有趣的现象.很多新的技术出现并立即拥抱了“大数据”.稍微老一点的技术也会将大数据添进自己的特性,避免落大部队太远,我们看到了不同技术之间的边际的模糊化.假如你有诸如Elas ...

  2. sql server下划线查询

    select * from tablea A where A.b like '%[_]%'

  3. traceroute tracert 路由器地址 清单 192.168.2.1 网关路由器地址

    [root@a ~]# traceroute www.ijntv.cntraceroute to www.ijntv.cn (42.81.61.31), 30 hops max, 60 byte pa ...

  4. TCP requires two packet transfers to set up the connection before it can send data

    wHTTP重用现存连接来减少TCP建立时延. HTTP The Definitive Guide 4.2.3 TCP Connection Handshake Delays When you set ...

  5. 剑指Offer——合并两个排序的链表

    题目描述: 输入两个单调递增的链表,输出两个链表合成后的链表,当然我们需要合成后的链表满足单调不减规则. 分析: 苦力活,使用两个指针分别指向未被合并的两个链表的首部,比较两个首部数值的大小,合并数值 ...

  6. HDFS分布式集群安装

    HDFS集群安装: 1.准备工作 虚拟机(电脑8G内存 磁盘500GB) 3台 linux系统(1台namenode 2台datanode) (1)关闭防火墙 firewall-cmd --state ...

  7. 原!mysql存储过程 批量导入数据

    mysql需要导入某前缀例如12345为前缀的,后缀扩展2位 即00-99. 利用存储过程插入数据. DROP PROCEDURE IF EXISTS insert_popsms_code;DELIM ...

  8. mmu介绍

    arm exynos4412平台mmu配置以及的简单创建. 1.mmu的全称是Memory Management Unit(内存管理单元) 2.mmu所在位置.mmu再arm核心.他不是一个外设,他是 ...

  9. Install Haskell on Ubuntu and CentOS

    For Ubuntu: Step one: Install GHC If you don't want to install curl you can skip step 1 and just dir ...

  10. spring MVC学习(三)

    1. @RequestMapping: 在请求的路径中传递参数:参数作为路径的一部分,可以在路径中直接使用 {paramName}来表示,另一种就是更加传统的表示方式?paramName=paramV ...