####主要思想
对应楼层距离页面顶部的距离与页面滚动的距离相对应
####jquery相关知识
$(obj).click(function(){ …… }) 点击事件
index() 获取元素对象在同辈元素中的索引值
offset() 获取元素对象距离页面的边距
position() 如果父元素有定位，距离父级元素的边距。若父元素没有定位，距离页面的边距
animate({要变化的样式（只能是变化的值）}，执行的时间，执行的效果（线性等），动画执行完执行的函数)
####html实现代码
<div class="box">
<div class="floor">
<h3>家用电器</h3>
</div>
<div class="floor">
<h3>手机、运营商、数码</h3>
</div>
<div class="floor">
<h3>电脑、办公</h3>
</div>
<div class="floor">
<h3>家居、家具、家装、厨具</h3>
</div>
<div class="floor">
<h3>男装、女装、童装、内衣</h3>
</div>
<ul class="menu">
<li>1F</li>
<li>2F</li>
<li>3F</li>
<li>4F</li>
<li>5F</li>
</ul>
</div>
####css样式代码
.box { width: 1000px; margin: 0 auto; }
.floor { height: 500px; background: #ddd; }
ul { list-style: none; position: fixed; top: 100px; left: 0;}
ul li { width: 50px; height: 50px;line-height: 50px; text-align: center; background: #ddd;border: 1px solid red;}
####jquery代码实现
$(function(){
$('.menu>li').click(function(){ //当点击li标签时
var index = $(this).index();//获取当前对象在同辈兄弟中的索引值
vat top = $('.floor').eq(index).offset().top;//获取li对应的楼层距离页面上边距
$('html,body').animate({//设置动画
scrollTop : top
},500); //500毫秒让页面滚动到相应位置
})
})
JQuery实现楼层效果
原
© 著作权归作者所有
【每天一个JQuery特效】淡入淡出显示或隐藏窗口
我是JQuery新手爱好者，有时间就练练代码，防止手生，争取每天一个JQuery练习，在这个博客记录下学习的笔记。 本特效主要采用fadeIn（）和fadeOut（）方法显示淡入淡出的显示效果显示或隐藏元...
Rhymo-Wu ⋅ 06/18 ⋅ 0
JavaWeb05-HTML篇笔记（一）
1.1上次课内容回顾： JQuery： JQuery的概述：是一个轻量级的JavaScript的类库.对JS进行封装. 常见的JS的框架： JQuery的使用: JQuery的选择器：(*) JQuery实现效果: JQuery样式操作: JQuer...
我是小谷粒 ⋅ 05/10 ⋅ 0
来学着写自己的“jQuery”
jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作 jQuery是开源软件，使用MIT许可证授权。jQuery的语法设计使得许多操作变得容易，如操作文档对象（document）、选择文档...
YyzclYang ⋅ 05/24 ⋅ 0
Jquery实现京东tab切图
主要是用jquery实现tab切换，显示不同的内容。也可以用原生js实现，但是实现方式比较繁琐，这里暂时不写原生js实现。jquery相对代码少而且易于理解。 这里用了三种方式实装，在写的时候，发现...
Mrs_CoCo ⋅ 05/07 ⋅ 0
JavaWeb04-HTML篇笔记（三）
1.1 案例二：表格隔行换色的案例：1.1.1 需求： 对数据的表格进行隔行换色的显示效果,使用JQuery完成该效果. 1.1.2 分析：1.1.2.1 技术分析： 【JQuery的选择器】 基本过滤选择器： 如果样式...
我是小谷粒 ⋅ 05/08 ⋅ 0
鼠标移入移出效果 -- jQuery/Vue版
元素内遮罩层根据鼠标方向显示的效果比较常见，比如百度图片里的图片信息展示。自己动手实现jQuery插件版和Vue组件版效果。 原文链接 实现思路 1、根据鼠标的位置定位在元素内出现的方向 2、...
bestvist ⋅ 今天 ⋅ 0
jQuery学习笔记--选择器和事件
以下内容参考 W3school 简书 你要是问我什么是jQuery 那可以这么两句话概括： jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 要学jQuery最好有点javaScript的基础 ...
codingcoge ⋅ 05/17 ⋅ 0
Python自动化开发学习17-jQuery
jQuery学习之前 jQuery 是 JavaScript 的一个类库，类似 python 中的模块。 jQuery在线手册：http://jquery.cuishifeng.cn/ 官网：http://jquery.com/ 版本选择 目前jQuery有三个大版本：1.x...
骑士救兵 ⋅ 昨天 ⋅ 0
JavaWeb04-HTML篇笔记（二）
1.1 使用JQuery完成定时弹出广告：1.1.1 需求： 之前使用的JS的方式完成定时弹出广告，现在使用JQuery完成同样的效果: 1.1.2 分析1.1.2.1 技术分析： 【JQuery的概述】 【JS对象和JQ对象的转...
我是小谷粒 ⋅ 05/08 ⋅ 0
jQuery学习笔记--效果，操作html元素，遍历DOM树
参考W3school: http://www.w3school.com.cn/jquery/jqueryhideshow.asp jQuery效果： 隐藏： 基础语句： $(selector).hide(speed,callback); 可选的 speed 参数规定隐藏/显示的速度，可以取以...
codingcoge ⋅ 05/19 ⋅ 0
没有更多内容
加载失败，请刷新页面
vue使用mockjs
在使用vue开发的时候，一直疑惑与mockjs怎么用，开了mockjs的开发文档，还是一脸蒙蔽，无从下手！mockjs在前后端分离开发上进行模拟数据，是不可避掉的一环。在网上看了一些博文还有查阅了其...
JamesView ⋅ 21分钟前 ⋅ 0
解决问题的思路
1.相对来说，程序逻辑解决问题的思路应该更加趋向于通过逻辑结构来解决问题，而不是通过更小的类级别和方法级别的改进 2.类级别和方法级别的改进需要的技术能力更高一点
th778899 ⋅ 28分钟前 ⋅ 0
HTTP请求状态及jQuery AJAX请求异常处理
上一周调优一个项目的Js部分，其中一个严重的问题就是在页面初始化数据时，没有对异常进行处理， 导致Loading一直在等待中，无提示无处理。在用户体验上很不好，即使网络条件无法保证，在出错...
临江仙卜算子 ⋅ 28分钟前 ⋅ 0
error code 1874. innodb is in read only mode--报错解决
参考网页 https://zhidao.baidu.com/question/746894876932022292.html https://blog.csdn.net/shushugood/article/details/80226767 问题背景 创建了一个数据库然后想删除，因为自己本机性能......
karma123 ⋅ 29分钟前 ⋅ 0
JVM系列：jinfo命令详解
jinfo全称Java Configuration Info，主要作用是实时查看和调整JVM配置参数。 一.查看JVM参数 用法：jinfo -flag <name> PID 示例： # jinfo -flag MaxMetaspaceSize 11180 # -XX:MaxMetaspac......
Jacktanger ⋅ 34分钟前 ⋅ 0
exportfs命令、NFS客户端问题、FTP介绍、使用vsftpd搭建ftp
1. exportfs命令 一般情况下重启服务器上nfs服务时，需把客户端上的挂载先卸载掉，以免进程后面杀不掉。当客户端服务器很多时，操作起来就比较麻烦。此时可以使用exportfs命令重新加载下。 ...
laoba ⋅ 43分钟前 ⋅ 0
基于Python的信用评分卡模型分析
信用风险计量体系包括主体评级模型和债项评级两部分。主体评级和债项评级均有一系列评级模型组成，其中主体评级模型可用“四张卡”来表示，分别是A卡、B卡、C卡和F卡；债项评级模型通常按照主...
火力全開 ⋅ 44分钟前 ⋅ 0
执行make命令时报错g++: Command not found
执行make命令时报错g++: Command not found 2016年10月24日 12:31:29 阅读数：4366 朋友安装node时遇到的问题 报错截图： 其实很简单只需要安装一下 yum -y install gcc automake autoconf l...
rootliu ⋅ 44分钟前 ⋅ 0
Loongnix(龙芯)系统，优盘安装指南
U盘安装分为两种方式："usb disk" 及 "usb cd"。其中usb cd是将usb disk做为usb光驱使用。 usb disk安装步骤： 需要准备一个大小超过3.5G的U盘，格式化ext3格式 下载安装光盘镜像xxx.iso，将...
gugudu ⋅ 48分钟前 ⋅ 0
HTML5中meta属性的使用详解
meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能...
guorongjin ⋅ 51分钟前 ⋅ 0
没有更多内容
加载失败，请刷新页面
删除文章
文章删除后无法恢复，确定取消删除此文章吗？
自荐文章
亲，自荐的博客将通过私信方式通知管理员，优秀的博客文章审核通过后将在博客推荐列表中显示
推荐文章
确定推荐此文章吗？
