jQuery实际案例⑤——仿京东侧边栏(楼层)
楼层:①页面滑动到哪块儿“楼层”就显示到哪个;②点击某“楼层”页面滚动到对应的位置;③点击“返回”回到页面顶部
实现:①使用$(window).scroll(function(){ }); //监视页面滚动的高度,使用$(document).scrollTop();获取;②滚到对应的位置:$("html,body").stop().animate({"scrollTop":$(".jd").eq($this).index()).offset().top}); ③点击“返回”$("html,body").stop().animate({"scrollTop":0},300);
注:offset().top、offset().left指的是坐标值,是某元素的顶部或左侧到页面(文档/document)的高度或左边距
jQuery实际案例⑤——仿京东侧边栏(楼层)的更多相关文章
- jquery实现仿京东侧边栏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js 鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层异步加载模式
js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...
- jQuery仿京东无限级菜单HoverTree
官方网址:http://keleyi.com/jq/hovertree/ 效果图: 看了上面效果图,你或许已经明白为什么是仿京东菜单.如果还不明白,请访问http://list.jd.com/list ...
- jQuery仿京东首页广告图片切换图片轮播
1.效果图如下: 2.源码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- Jquery特效之=》仿京东多条件筛选特效
仿京东多条件筛选特效 * { margin: 0; padding: 0; list-style-type: none } a, img { border: 0 } body { font: 12px ...
- ThinkPHP3.2开发仿京东商城项目实战视频教程
ThinkPHP3.2仿京东商城视频教程实战课程,ThinkPHP3.2开发大型商城项目实战视频 第一天 1.项目说明 2.时间插件.XSS过滤.在线编辑器使用 3.商品的删除 4.商品的修改完成-一 ...
- 仿京东树形菜单插件hovertree
hovertree是一个仿京东的树形菜单jquery插件,暂时有银色和绿色两种. 官方网址:http://keleyi.com/jq/hovertree/欢迎下载使用 查看绿色效果:http://ke ...
- div css仿京东订单流程图样式代码
效果展示 http://hovertree.com/texiao/css/25/ 本效果适合PC,也适合移动端 手机扫描二维码查看效果: 效果图: 代码如下: <!DOCTYPE html> ...
- iOS仿京东分类菜单之UICollectionView内容
在上<iOS仿京东分类菜单实例实现>已经实现了大部分主体的功能,本文是针对右边集合列表进行修改扩展,使它达到分组的效果,本文涉及到的主要是UICollectionView的知识内容,左边列 ...
随机推荐
- git学习------>Git 分支管理最佳实践
ps:本文转载于 : https://www.ibm.com/developerworks/cn/java/j-lo-git-mange/index.html Git 是目前最流行的源代码管理工具.大 ...
- 安装python3 centos
1.在新centos中安装python3的步骤https://www.cnblogs.com/lclq/archive/2016/06/27/5620196.html 2.安装python3过程中报错 ...
- 浅析Spring AOP
在正常的业务流程中,往往存在着一些业务逻辑,例如安全审计.日志管理,它们存在于每一个业务中,然而却和实际的业务逻辑没有太强的关联关系. 图1 这些逻辑我们称为横切逻辑.如果把横切的逻辑代码写在业务代码 ...
- JMS术语
Provider(MessageProvider):生产者Consumer(MessageConsumer):消费者PTP:Point to Point,即点对点的消息模型Pub/Sub:Publis ...
- SpringMVC的映射器,适配器,控制器
一.各司其职 (1)HandlerMapping映射器 根据客户端请求的url,找到处理本次请求的处理器,即将请求的路径和controller关联起来 (2)HandlerAdapter适配器 对 ...
- B-、B+、B*树
B-树:多路搜索树,每个结点存储M/2到M个关键字,非叶子结点存储指向关键字范围的子结点:所有关键字在整颗树中出现,且只出现一次,非叶子结点可以命中: B+树:在B-树基础上,为叶子结点增加链表指针, ...
- Does Daemon Thread Exit with Main Thread?
主线程(进程)退出后,主线程创建的守护线程也会退出吗? 通过下面的代码测试: Demo1: 进程创建普通线程 #!/usr/bin/python3 # FileName: daemonThread.p ...
- Html.DropDownListFor的用法总结
在ASP.NET MVC中可以用DropDownListFor的方式来让用户选择已定列表中的一个数值. 注:重点是要将DropDownList的数据源转换成IEnumerable<SelectL ...
- inline-block布局错位问题
如图, 两个display为 inline-block的元素,会出现情况 针对第三种情况: 需要添加 vertical-align: top; 参考代码 <!DOCTYPE html> & ...
- 字典的fromkeys的用法
fromkeys方法语法 dict.fromkeys(iterable[,value=None]) iterable 用于创建新的字典的键的可迭代对象(字符串,列表,元组,字典) value 可选参数 ...