文档章节

JQuery实现楼层效果

ycYinG
 ycYinG
发布于 2016/12/08 16:00
字数 360
阅读 19
收藏 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
昌平
程序员
私信 提问
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
10/29
0
0
2011年最新20个jQuery构建的超酷视觉效果教程

日期:2011/08/03 原文:line25.com 编译:Terry li - GBin1.com 作为web开发程序员来说,我们都非常喜欢jQuery构造的超酷视觉效果。在本篇GBin1文章中我们将精选一组jQuery效果教程。大家将...

gbin1
2011/08/03
383
0
20+功能强大的jQuery/CSS3图片特效插件

以下是分享的20几个不错的图片特效插件,基于jQuery和CSS3。 1、jQuery图片下滑切换播放效果 这是一款基于jQuery的焦点图插件,这款焦点图的特点是有向下滑动的动画效果,滑到底部时,有弹跳...

ruby_chen
2013/10/14
24.6K
5
7 款风格各异的jQuery图片展示效果

在网页中,图片的展示方式多种多样,当然所要达到的目的也各不相同,本文就是要通过jQuery来实现各种不同的图片展示方式,有jQuery焦点图、图片缩放、图片滚动等效果。如果你喜欢这些小效果,...

yykj
2013/11/08
2.6K
1
2012年度最新的7款导航菜单Jquery特效

网站悬浮快速导航Jquery特效 此Jquery特效是一款非常实用的功能,最近很多网友想要JquerySchool网站悬浮快速导航的特效,为了满足网友们,今天把它整理出来分享给网友们用,此功能原来来自网...

邓剑彬
2012/11/29
605
10

没有更多内容

加载失败,请刷新页面

加载更多

如何在Chrome浏览器中启动deviceready事件(尝试调试phonegap项目)?

我正在开发PhoneGap应用程序,我希望能够在Chrome中调试它,而不是在电话上调试。但是,我在onGetReady()函数中初始化我的代码,该函数在PhoneGap触发“deviceready”事件时触发。由于Chr...

kisshua
37分钟前
5
0
支付宝客户端架构分析:自动化日志收集及分析

摘要: 《支付宝客户端架构解析》系列将从支付宝客户端的架构设计方案入手,带领大家进一步了解支付宝在客户端架构上的迭代与优化历程。 小蚂蚁说: 《支付宝客户端架构解析》系列将从支付宝...

阿里云官方博客
40分钟前
1
0
nginx中部署vue打包后的静态文件

如何在nginx中部署静态资源就不描述了, 请看我的这篇博客 将vue脚手架项目打包后的静态文件放到nginx上, 发现有个问题, 即url上有#, 怎么去掉这个#呢. 1 项目中router的mode 路由的mode要为h...

克虏伯
57分钟前
11
0
JS容易理解错误的地方

在这端代码执行的末尾,你会不会hi变量回事函数中的hi了?你会不会认为这不是按引用传递了? 对值传递和引用传递产生质疑了? 1 var hi = {};2 function sayHello(hi) { ...

器石_
59分钟前
5
0
Java开发学习--MongoDB

之前只学过sql,第一次使用非关系型数据库。以前对于关系型数据库与非关系型数据库的概念很模糊,通过这次的学习对这两者有了一个清晰的概念。 主键 在MongoDB中,主键名叫"_id",如果在生成...

微笑向暖wx
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部