文档章节

JQuery实现楼层效果

ycYinG
 ycYinG
发布于 2016/12/08 16:00
字数 360
阅读 394
收藏 0

码上生花,ECharts 作品展示赛正式启动!>>>

####主要思想 对应楼层距离页面顶部的距离与页面滚动的距离相对应 ####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
昌平
程序员
私信 提问
加载中
请先登录后再评论。
30 个实用的 jQuery 选项卡/导航教程推荐

很多网站设计中都使用了选项卡(tabs),在制作选项卡时应用jQuery能够实现很多炫酷的过渡和动画效果。本文为你介绍30个实用的jQuery选项卡教程,希望对你有帮助。 1. Animated Tabbed Conte...

小编辑
2011/11/18
5.1K
5
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

jQuery是在网页设计师和开发者最近的热门话题之一。人们使用它的广泛范围从个人博客到企业网站,目前流行的视觉大背景滚动效果,瀑布流图片阴影效果,图片缩放,动态标签复制,html5音频播放...

易达
2012/08/04
671
0
7 款风格各异的jQuery图片展示效果

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

yykj
2013/10/30
404
3
33 超棒的 jQuery 教程【图文并茂】

在这篇文章中,我们为您收集了一些非常有用的,而且效果很好的 jQuery 实际开发教程。 1. 使用 jQuery 构建一个可滑动的产品幻灯展示 2. 使用 PHP、jQuery 和 CSS3 实现的相片展位 3. 使用 ...

红薯
2011/06/23
1.5W
9
分享8个超棒的基于HTML5和jQuery的开发教程

日期:2011/12/15 来源:GBin1.com HTML5 和jQuery组合目前对于web开发人员来说是强大的工具之一,使用这个组合能够帮助你扩展你设计的局限,实现一些非常绚丽及其强大的web应用或者网 站。尤...

gbin1
2011/12/21
3.5K
0

没有更多内容

加载失败,请刷新页面

加载更多

硬核揭露:350美元的反5G量子设备,竟只是128M的U盘

   “5G 信号一传播,正在飞的鸟儿立刻掉地上死了。”    “5G 基站会致癌,还会提升自杀率,甚至能传播新冠病毒。”    这些耸人听闻的言论,是 5G 技术阴谋论宣扬者经常挂在嘴边的话...

osc_91g5cdgs
30分钟前
24
0
微服务海量日志监控平台

前面几章蜻蜓点水的介绍了elasticsearch、apm相关的内容。本片主要介绍怎么使用ELK Stack帮助我们打造一个支撑起日产TB级的日志监控系统 背景 在企业级的微服务环境中,跑着成百上千个服务都...

osc_sejhgcp0
31分钟前
22
0
如何监控 Linux 服务器状态?

Linux 服务器我们天天打交道,特别是 Linux 工程师更是如此。为了保证服务器的安全与性能,我们经常需要监控服务器的一些状态,以保证工作能顺利开展。 本文介绍的几个命令,不仅仅适用于服务...

osc_3ytpwpyb
32分钟前
26
0
在已经编译安装好php7场景下 安装php openssl扩展

在已经编译安装好php7场景下 安装php openssl扩展 yum install openssl-devel #要安装这个,否则报错configure: error: Cannot find OpenSSL's <evp.h> centos cd /root/php7/php-7.2.31/ext......

osc_4isxawz4
33分钟前
29
0
在已经编译安装好php7场景下安装curl扩展

在已经编译安装好php7场景下安装curl扩展 cd /root/php7/php-7.2.31/ext/curl #从php官网下载php源码安装包 /usr/local/php746/bin/phpize #已经安装好的phpize的路径 yum install libcurl-...

osc_h6vn1kqs
35分钟前
23
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部