jQuery实现商品楼层的感觉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery滚动面板的实现</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<style type="text/css">
*{padding: 0; margin: 0;list-style: none;}
#wrap{background: red; width: 500px; height: 3000px; margin: 0 auto;}
h2{margin-bottom: 1000px;}
#nav{width: 50px;height: 150px; border: 1px solid blue; position: fixed;bottom: 0;right: 0;}
#nav li{border-bottom: 1px solid blue; height: 50px; text-align: center; line-height: 50px; font-size: 30px;}
#nav li a{text-decoration: none;}
/*预定义样式,表示所处的楼层*/
.current{background:blue;}
.current a{color: white;}
</style>
</head>
<script type="text/javascript">
$(function(){
$("#nav li").hover(function() {
$(this).addClass('current');
}, function() {
$(this).removeClass('current');
});
//通过判断滚动条的高度和楼层高度来制定样式。
$(window).scroll(function() {
var top = $(document).scrollTop();
//第二个标题1022,第三个标题2048;
//用于添加样式的函数。
function addStyle(index){
$("#nav li").removeClass();
$("#nav li:eq("+index+")").addClass('current');
}
if (top<=1022) {
addStyle(0);
}else if (top>1022 && top<=2048) {
addStyle(1);
}else if (top>2048) {
addStyle(2);
};
});
});
</script>
<body>
<div id="wrap">
<h2 class="num1" id="target1">这是第一个标题</h2>
<h2 class="num2" id="target2">这是第二个标题</h2>
<h2 class="num3" id="target3">这是第三个标题</h2>
</div>
<ul id="nav">
<li class="current"><a href="#target1">1F</a></li>
<li><a href="#target2">2F</a></li>
<li><a href="#target3">3F</a></li>
</ul>
</body>
</html>
jQuery实现商品楼层的感觉的更多相关文章
- jQuery右侧悬浮楼层滚动 电梯菜单
http://www.kaiu.net/effectCon.aspx?id=2198 <!doctype html> <html> <head> <meta ...
- jquery实现商品sku多属性选择(商品详情页)
转载于https://blog.csdn.net/csdn924618338/article/details/51455595 实现效果 源码 <!DOCTYPE HTML> <ht ...
- jQuery实现商品详情 详细参数页面切换
利用index实现: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- jquery特效 商品SKU属性规格选择实时联动
转载,原文链接 功能:各种属性的值选中后,SKU填写表格进行变动,对属性.属性值的数量自适应,编辑时不因去掉勾选导致原有值不显示 所有代码均属原创,现在共享,如果有更好的实现方式,希望互相交流 最终实 ...
- jquery的商品首页
js代码: $(function() { /*新闻滚动*/ var $this = $('.scrollNews'); var scrollTimer; $this.hover(function () ...
- 商品描述(动画)--- jQuery
本文章实现是基于jQuery展示商品描述的一个功能 (1)鼠标移入显示描述内容,鼠标移开内容隐藏.先来看看一个先后效果. (2)jQuery所以的文件可以自行下载,也可以在我主页找到文件,右键文件名复 ...
- Jquery开发电商网站实战(带源码)
组件化思想,包含: 下拉菜单项封装 + 按需加载 搜索功能组件化,显示数据 + 下拉显示 + 缓存 分类导航按需加载 幻灯片效果组件封装及按需加载 商品楼层模块组件化 + 商品数据按需加载 + Tab ...
- jQuery学习之路(1)-选择器
▓▓▓▓▓▓ 大致介绍 终于开始了我的jQuery学习之路!感觉不能再拖了,要边学习原生JavaScript边学习jQuery jQuery是什么? jQuery是一个快速.简洁的JavaScript ...
- 《锋利的jQuery》(第2版)读书笔记4
第9章 jQuery Mobile jQuery Mobile是用来填补jQuery在移动设备应用上的缺憾的一个新项目. 它基于jQuery框架并使用HTML5和CSS3这些新的技术,除了能提供很多基 ...
随机推荐
- linux 多线程基础2
6. 名称:: pthread_detach 功能: 使线程进入分离状态. 头文件: #include <pthread.h> 函数原形: int pthread_detach(pthre ...
- Spark RDD/Core 编程 API入门系列之动手实战和调试Spark文件操作、动手实战操作搜狗日志文件、搜狗日志文件深入实战(二)
1.动手实战和调试Spark文件操作 这里,我以指定executor-memory参数的方式,启动spark-shell. 启动hadoop集群 spark@SparkSingleNode:/usr/ ...
- poj 1995 Raising Modulo Numbers【快速幂】
Raising Modulo Numbers Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 5477 Accepted: ...
- Javascript类型——boolean类型
布尔值在Javascript中有两个值:true和false. 布尔值和其他数据类型的转换关系 数据类型 true false boolean true false String 任何非空字符串 &q ...
- radix树
今天在学Linux内核页高速缓存时,学到了一种新的数据结构radix树(基数),经过分析,感觉此数据结构有点鸡肋,有可能是我理解不到位吧. 先来张图,给大家以直观的印象 当有一个key-value型的 ...
- KMP算法(模板)
话说kmp真的挺难理解的,花了挺大功夫的,恩,找了段好理解的代码,做模板了 int KMP(char *s,char *p){ int ans = -1; nex[0] = 0; int lenp = ...
- SOA是什么
一.SOA是什么 SOA的全称是Service-Oriented Architecture,面向服务架构.是一种架构,不是一种具体的开发技术. 要真正理解什么是SOA需要从软件开发的技术发展史 ...
- 使用solrj操作solr索引库,solr是lucene服务器
客户端开发 Solrj 客户端开发 Solrj Solr是搭建好的lucene服务器 当然不可能完全满足一般的业务需求 可能 要针对各种的架构和业务调整 这里就需要用到Solrj了 Solrj是Sol ...
- iOS 开发中的争议(二)
这是该系列的第二篇.在本文中,我想讨论的是:对于 UI 界面的编写工作,到底应该用 xib/storyboard 完成,还是用手写代码来完成? 本着 “使用过才有发言权” 原则,我介绍一下我的经历: ...
- javascript split() 正则表达式
路由匹配 http.createServer(function(req, res) { var items = req.url.split('/'); if (items.length < 3 ...