商品详情页,banner滚动点击加载效果,js,jquary
<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的更多相关文章
- Android点击跳转到淘宝的某一商品详情页或者某一店铺页面
最近项目的有个需求是点击购买资料按钮进入淘宝界面,简单分析一下,如果用户手机有淘宝就打开淘宝的页面,没有的话也可以选择使用webView进行展示,还是使用手机浏览器进行展示. 判断有无淘宝的代码就不贴 ...
- 用js原生加jquery实现下拉跳转至商品详情页,上拉回到商品简介
在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使 ...
- react 从商品详情页返回到商品列表页,列表自动滚动上次浏览的位置
现状:目前从商品详情页返回到商品列表页,还需要再去请求服务数据,还需要用户再去等待获取数据的过程,这样用户体验非常不好, 遇到的问题: 1:如何将数据缓存, 2:如何获取和保存列表滑动的高度, 3:判 ...
- 自己定义ViewGroup实现仿淘宝的商品详情页
近期公司在新版本号上有一个须要. 要在首页加入一个滑动效果, 详细就是仿照X宝的商品详情页, 拉到页面底部时有一个粘滞效果, 例如以下图 X东的商品详情页,假设用户继续向上拉的话就进入商品图文描写叙述 ...
- Vue通过id跳转到商品详情页
首页列表: 在这里我用a标签进行跳转,在vue里面使用<router-link></router-link> <router-link :to="{path:' ...
- iOS app url scheme跳转到淘宝商品详情页 唤醒app
最近涉及的一个业务,在app内的一个广告,点击打开webView,加载的是一个淘宝商品详情页,效果是打开该webView自动跳转至淘宝对应的页面,同时在自己的app仍然加载页面,点击评论等也同样能跳转 ...
- 高并发 Nginx+Lua OpenResty系列(10)——商品详情页
本章以京东商品详情页为例,京东商品详情页虽然仅是单个页面,但是其数据聚合源是非常多的,除了一些实时性要求比较高的如价格.库存.服务支持等通过AJAX异步加载加载之外,其他的数据都是在后端做数据聚合然后 ...
- ecshop 商品详情页显示同类别下的推荐商品
1.打开goods.php文件找到下面代码 $smarty->assign('goods_rank', get_goods_rank($goods_id)); // 商品的销售排名 在上面的代码 ...
- Freemarker商品详情页静态化服务调用处理
--------------------------------------------------------------------------------------------- [版权申明: ...
随机推荐
- /usr/local/nginx/sbin/nginx -s reload 失败原因pid 进程记录和当前不符
[root@a ~]# /usr/local/nginx/sbin/nginx -s reload;nginx: [alert] kill(18834, 1) failed (3: No such p ...
- ubuntu安装Jenkins指导
乌班图安装Jenkins指导 安装Java :apt install default-jre 参考:https://www.cnblogs.com/xionggeclub/p/7117004.html ...
- python服务器环境搭建——安装相关软件
在上一篇我们在本地的虚拟服务器上安装好CentOS7后,我们的python web服务.自定义的python service或python脚本需要在服务器上运行,还需要在服务器安装各种相关的软件才行, ...
- java-mybaits-00502-案例-映射分析-一对一、一对多、多对多
1.一对一查询[类属性即可,association ] 案例:查询所有订单信息,关联查询下单用户信息. 注意:因为一个订单信息只会是一个人下的订单,所以从查询订单信息出发关联查询用户信息为一对一查 ...
- (转)Linux下配置tomcat+apr+native应对高并发
摘要:在慢速网络上Tomcat线程数开到300以上的水平,不配APR,基本上300个线程狠快就会用满,以后的请求就只好等待.但是配上APR之后,Tomcat将以JNI的形式调用Apache HTTP服 ...
- 《浅谈CT》总结
注明来自 http://www.ssdfans.com/?p=1941 这里说的CT,不是医院里面的CT,而是闪存的一种技术:Charge Trap. 闪存不只有Floating Gate,还有Cha ...
- 子集和问题(应用--换零钱)POJ2229:Sumsets
我一直在纠结换零钱这一类型的题目,今天好好絮叨一下,可以说他是背包的应用,也可以说他是单纯的dp.暂且称他为dp吧. 先上一道模板题目. sdut2777: 小P的故事——神奇的换零钱 题目描述 已知 ...
- 深入跟踪MFC程序的执行流程
来源: http://blog.csdn.net/ljianhui/article/details/8781991 在MFC程序设计的学习过程中最令人感到难受,甚至于有时会动摇学习者信心的就是一种对于 ...
- dubbo-admin 部署
上一章主要是谈到zookeeper的安装和部署 因为zookeeper只是一个黑框,我们无法看到是否存在了什么提供者或消费者,这时就要借助Dubbo-Admin管理平台来实时的查看,也可以通过这个平台 ...
- android整理的一些基础知识
本篇文章内容大部分是来源于本人实际开发中的心得总结,不是非常全面,咱才疏学浅,如果有错误的地方恳请各位指出哦~ android四大组件 四大组件包括:Activity(活动),Service(服务), ...