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)的高度或左边距

时间: 2024-08-04 21:06:59

jQuery实际案例⑤——仿京东侧边栏(楼层)的相关文章

jquery实现仿京东侧边栏

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>仿京东侧边栏</title> 6 <style type="text/css"> 7 *{ 8 margin:0;padding:0; 9 } 10 ul{list-style: none;} 11 .to

jQuery制作仿京东商城-商品列表商品筛选功能

这次使用jquery来实现一个仿京东商城-商品列表商品筛选的功能 一.html代码 <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class

0189 案例:仿京东放大镜效果

1.1.6 案例:仿京东放大镜 整个案例可以分为三个功能模块 鼠标经过小图片盒子, 黄色的遮挡层 和 大图片盒子显示,离开隐藏2个盒子功能 黄色的遮挡层跟随鼠标功能. 移动黄色遮挡层,大图片跟随移动功能. 1.1.7 案例分析 黄色的遮挡层跟随鼠标功能. 把鼠标坐标给遮挡层不合适.因为遮挡层坐标以父盒子为准. 首先是获得鼠标在盒子的坐标. 之后把数值给遮挡层做为left 和top值. 此时用到鼠标移动事件,但是还是在小图片盒子内移动. 发现,遮挡层位置不对,需要再减去盒子自身高度和宽度的一半.

Jquery特效之=》仿京东多条件筛选特效

仿京东多条件筛选特效 品牌: 全部 惠普(hp) 联想(Lenovo) 联想(ThinkPad) 宏基(acer) 华硕 戴尔 三星 索尼 东芝 Gateway 微星 海尔 清华同方 富士通 苹果(Apple) 神舟 方正 优雅 价格: 全部 1000-2999 3000-3499 3500-3999 4000-4499 4500-4999 5000-5999 6000-6999 7000-9999 10000以上 尺寸: 全部 8.9英寸及以下 11英寸 12英寸 13英寸 14英寸 15英寸

竖向导航-仿京东左侧导航大类效果

完整代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Con

仿京东页面所遇到的问题

这几天在仿京东首页,主要分为以下几部分. 1.上方菜单栏 利用float:left:布局 暂时写出基本结构,其他的需要添加 2.中间依次logo,搜索栏,购物车 logo注意设置border:0:,防止ie下右边框 搜索栏注意设置,searchinput的outline:none:这样点击后就不会有光圈,searchbutton也是. 购物车未设置 3.左侧菜单栏. 利用js写,鼠标指向后显示右侧菜单,而右侧菜单是隐藏的display:none; 4.中间轮播框 利用js写,鼠标指向后变为数字指

仿京东首页商品分类底部色标随鼠标移动特效

原文:仿京东首页商品分类底部色标随鼠标移动特效 今天扒皮下京东商品展示区的一个特效: 大家可以自行去京东看下特效,下面是这个特效的动态图(这次聪明的我懂得给图加水印了) 理下思路,每个分类选项卡宽度一致,且有一条灰色底边,然后默认有一条红色的色标让它漂浮在首个选项卡上面(其中的小三角形可以自己做个图),默认首个选项卡的文本(像上图是"AAA")为红色,其它选项卡的为灰色.默认除第一个选项卡对应的下方的内容DIV显示外,其它选项卡对应的内容DIV隐藏: 鼠标移到某个选项卡则改变该选项卡字

浅谈android中仅仅使用一个TextView实现高仿京东,淘宝各种倒计时

今天给大家带来的是仅仅使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.最近公司一直加班也没来得及时间去整理,今天难得休息想把这个分享给大家,只求共同学习,以及自己后续的复习.为什么会想到使用一个TextView来实现呢?因为最近公司在做一些优化的工作,其中就有一个倒计时样式,原来开发的这个控件的同事使用了多个TextView拼接在一起的,实现的代码冗余比较大,故此项目经理就说:小宏这个就交给你来优化了,并且还要保证有一定的扩展性,当时就懵逼了.不知道从何处开始

扒皮下京东首页楼层图标的动画效果实现方式

京东首页的楼层图标默认是灰色的,但拉动滚动条,让该图标从下方挪动到屏幕正中的时候,该图标会显示出从上到下由灰变绿的动画效果,如下图 这种效果很有Lazyload的范,也是挺吸引眼球的交互方式,下面用JQ来仿造下这种效果的实现方式,其实挺简单. 首先我是做了2个gif分别作为图标的默认状态和动画状态(注意第二个gif的动画效果只显示一次,不循环的,而且是从下往上<做的着急了点,跟京东的动画方向相反了哈哈>,错过效果的朋友请刷新吧):        P.S. 京东的动画效果并非用动态gif实现的,