文档章节

JQuery实现楼层效果

ycYinG
 ycYinG
发布于 2016/12/08 16:00
字数 360
阅读 18
收藏 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
昌平
程序员
30个创意出色的非常实用的jquery框架插件-(视觉大背景,瀑布流效果)

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

易达
2012/08/04
0
0
2011年12月最新JQuery插件汇总

jQuery的工具提示插件 Tipped jQuery表格插件 colResizable jQuery虚拟键盘插件 jQuery keyboard Minimit Gallery 用于显示相册、幻灯片、卷帘等效果 jQuery 幻灯效果显示插件 Diapo jQuery...

晨曦之光
2012/02/24
0
0
分享10个帮助你实现超酷特效的jQuery插件

日期:2012-4-4 来源:GBin1.com 今天我们这篇文章中将推荐给大家10个超酷的jQuery插件帮助大家实现超酷的jQuery特效,绝对超过其它的普通jQuery插件。希望大家喜欢! 1. jQuery Lens Flare...

gbin1
2012/04/05
0
0
10个jquery动画菜单:插件和教程

jquery是一个非常容易使用,同时也是扩展性很好的一个javascript框架。使用jquery可以非常容易的实现一些页面的ajax效果。本文收集一批使用jquery实现很酷的动画效果菜单的插件和教程。 插件...

晨曦之光
2012/03/09
0
0
7个神奇的jQuery 3D插件

7个神奇的jquery 3D插件,让你可以实现一些媲美Flash的动画特效。 1. Flip HTML content in 3D 用jQuery实现的3D翻转效果,支持html内容的翻转。 2. Agile Carousel 3D效果的jQuery跑马灯特效...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Hanlp实战HMM-Viterbi角色标注中国人名识别

这几天写完了人名识别模块,与分词放到一起形成了两层隐马模型。虽然在算法或模型上没有什么新意,但是胜在训练语料比较新,对质量把关比较严,实测效果很满意。比如这句真实的新闻“签约仪式...

左手的倒影
14分钟前
1
0
页面平滑滚动的体验提升

scroll-behavior属性和JS scrollIntoView()方法 本身作为体验提升的手段,用 <a href="#" rel="internal">返回顶部</a> 兼容性就可以不用考虑太多 不支持就直接回去呗 用法: scroll-behavio...

红羊在厦门
15分钟前
1
0
Spring IOC 之 加载 Bean

这段代码是 Spring 中编程式使用 IOC 容器,通过这四段简单的代码,我们可以初步判断 IOC 容器的使用过程 获取资源 获取 BeanFactory 根据新建的 BeanFactory 创建一个BeanDefinitionReader对...

职业搬砖20年
18分钟前
1
0
Spring Cloud Eureka 常用配置及说明

配置参数 默认值 说明 服务注册中心配置 Bean类:org.springframework.cloud.netflix.eureka.server.EurekaServerConfigBean eureka.server.enable-self-preservation false 关闭注册中心的保......

君千殇520
20分钟前
1
0
如何通过Kibana,Wazuh和Bro IDS提高中小企业的威胁检测能力?

前言 近来,我们一直都在通过一些开源免费的工具,来帮助中小企业提升其网络威胁检测能力。在本文中,我们将手把手的教大家通过Kibana,Wazuh和Bro IDS来提高自身企业的威胁检测能力。 什么是...

刀剑如梦
24分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部