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的知识内容,左边列 ...
随机推荐
- Linux命令(基础3)
关机重启 reboot poweroff ============================ linux命令分类 1.针对不同文件的管理命令 1.1 目录 FHS 文件系统层次化标准 绝对路径: ...
- 目标检测-Faster R-CNN
[目标检测]Faster RCNN算法详解 Ren, Shaoqing, et al. “Faster R-CNN: Towards real-time object detection with r ...
- OpenGL1.0 线段
OpenGL1.0线段 DionysosLai2014-06-16 本篇作为我学习Opengl第一篇文档.希望自己能在图形学路上走得远一点,达到可以渲染游戏画质目的,现阶段是Box2 ...
- 百度NLP一面
C++ : 1.拷贝构造函数和重载=符分别在什么情况下被调用,实现有什么区别 2.虚函数的目的,虚函数和模板类的区别,如何找到虚函数 常规算法: 1. 如何输出一个集合的所有真子集,递归和非递 ...
- map::erase陷阱
map::erase函数在不同版本stl中的差异 1. C++98和C++11标准 http://www.cplusplus.com/reference/map/map/erase/ 2. pj st ...
- iOS 使用markdown 实现编辑和预览文本
注意要点: 1.在iOS 可以依赖UIWebview 来实现 2.丰富的UI样式依赖 html 的样式, js 调用插入markdown内容呈现出来 3.实现markdown编辑快捷键:参考githu ...
- Java 对比Hashtable、Hashmap、Treemap有什么不同?
①基本理解 Hashtable.Hashmap.Treemap都是最常见的一些Map实现,是以键值对的形式存储和操作数据的容器类型. Hashtable是Java类库提供的一个哈希实现,本身是同步的, ...
- NIO 03
1. 客户端要主动去连接:channel.connect(new InetSocketAddress("localhost",8888)); //用channel.finishCo ...
- [Deep Learning]任意层cnn的matlab版本实现
之前实现了一层的卷积神经网络,又实现了两层的卷积神经网络,接下来把cnn扩展到任意层就不难了. 这难道就是传说中的“道生一,一生二,二生三,三生万物”么?=.= 代码还是在github上. 比较有趣的 ...
- Linux学习笔记之CentOS6.9 防火墙的关闭以及开启
有的时候,我们需要对系统的防火墙进行操作,今天小编就给大家讲解一下如何开启以及关闭CentOS6.9系统下的防火墙. 输入:cat /etc/issue 查看版本 (一)通过service命令 s ...