文档章节

JQuery实现楼层效果

ycYinG
 ycYinG
发布于 2016/12/08 16:00
字数 360
阅读 17
收藏 0
点赞 0
评论 0

####主要思想 对应楼层距离页面顶部的距离与页面滚动的距离相对应 ####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毫秒让页面滚动到相应位置 })
})

© 著作权归作者所有

共有 人打赏支持
ycYinG
粉丝 1
博文 10
码字总数 4889
作品 0
昌平
程序员
【每天一个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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部