文档章节

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
2009年度最佳jQuery插件

http://www.it168.com2009年12月14日IT168网站 原创 作者:COMSHARP CMS 编辑:胡铭娅 【IT168 资讯】 jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架...

晨曦之光
2012/03/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
0
0
memcached命令行、memcached数据导出和导入

一、memcached命令行 yum装telnet yum install telent 进入memcached telnet 127.0.0.1 11211 命令最后的2表示,两位字节,30表示过期时间(秒) 查看key1 get key1 删除:ctrl+删除键 二、m...

Zhouliang6
今天
0
0
Linux定时备份MySQL数据库

做项目有时候要备份数据库,手动备份太麻烦,所以找了一下定时备份数据库的方法 Linux里有一个 crontab 命令被用来提交和管理用户的需要周期性执行的任务,就像Windows里的定时任务一样,用这...

月夜中徘徊
今天
1
1
shell-日志脚本小实验

1.查找日志2018-8-15,求得那一分钟访问量最大。 #/bin/bash#from cc#2018-8-15#2018-08-15.log 哪一分钟 访问量 最大for d in `ls /data/nginx/logs/`doif [ -a 2018-08-15...

chencheng-linux
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部