|   字数统计: 2,279(字)

网页定位特效

发表于 | 分类于 | 阅读次数

网页定位特效

jquery实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页定位导航特效</title>
	<style type="text/css" media="screen">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		font-size: 12px;
		line-height: 1.7;
	}
	li{
		list-style: none;
	}
	#content{
		width: 800px;
		margin: 0 auto;
		padding: 20px;
	}
	#content h1{
		color: #0088bb;
	}
	#content .item{
		padding: 20px;
		margin-bottom: 20px;
		border: 1px dotted #0088bb;
	}
	#content .item h2{
		font-size: 16px;
		font-weight: bold;
		border-bottom:  2px solid #0088bb;
		margin-bottom: 10px;
	}
	#content .item li{
		display: inline;
		margin-right: 10px; 
	}
	#content .item li a img{
		width:230px;
		height: 230px;
		border: none;
	}
	#menu{
		position: fixed;
		top: 100px;
		left: 50%;
		margin: 400px;
		width: 80px;
	}
	#menu ul li a{
		display: block;
		margin: 5px 0;
		font-size: 14px;
		font-weight: bold;
		color: #333;
		width: 80px;
		height: 50px;
		text-decoration:none;
		text-align: center;
	}
	#menu ul li a:hover,
	#menu ul li a.current{
		color: #fff;
		background: #0088bb;
	}
	/*hack*/
	* html #menu {
		position: absolute;
		top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+'px');
	}
	</style>
	
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$(window).scroll(function(){
				var top = $(document).scrollTop();
				var menu = $("#menu");
				var items = $("#content").find(".item");
				var currentId="";//当前所在楼层（item）id
				items.each(function(){
					var _this = $(this);
					var itemTop = _this.offset().top;
					if (top>itemTop-200) {
						currentId = "#"+_this.attr("id");
					}
					else{
						return false;
					}
				});
				//给相应楼层链接设置 current这个class，取消其他链接的current
				var currentLink = menu.find(".current")
				if (currentId&&currentLink.attr("href")!=currentId) {
					currentLink.removeClass('current');
					menu.find("[href="+currentId+"]").addClass('current');
				}
			})
		})
	</script>
	
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#item1">1F 男装</a></li>
		<li><a href="#item2">2F 女装</a></li>
		<li><a href="#item3">3F 美妆</a></li>
		<li><a href="#item4">4F 数码</a></li>
		<li><a href="#item5">5F 母婴</a></li>
	</ul>
</div>
<div id="content">
	<h1>祥华百货</h1>
	<div id="item1" class="item">
		<h2>1F 男装</h2>
		<ul>
			<li><a href="#" class="current"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item2" class="item">
		<h2>2F 女装</h2>
		<ul>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item3" class="item">
		<h2>3F 美妆</h2>
		<ul>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item4" class="item">
		<h2>4F 数码</h2>
		<ul>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item5" class="item">
		<h2>5F 母婴</h2>
		<ul>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		</ul>
		
	</div>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
/*ie6 hack*/
	html, *html body{
		background-image: url('about:blank');
		background-attachment:fixed;
	}
	* html #menu {
		/*position: fixed;*/
		position: absolute;
		top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
	}

这一段是css hack 解决ie6 兼容性问题
测试IE兼容性可以用IEtester 点这里

IETester包含多个版本的IE，可以方便的用来进行兼容性测试，获取下载或者更多信息可以访问：http://www.my-debugbar.com/wiki/IETester/HomePage

原生javascript实现代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网页定位导航特效</title>
	<style type="text/css" media="screen">
	*{
		margin: 0;
		padding: 0;
	}
	body{
		font-size: 12px;
		line-height: 1.7;
	}
	li{
		list-style: none;
	}
	#content{
		width: 800px;
		margin: 0 auto;
		padding: 20px;
	}
	#content h1{
		color: #0088bb;
	}
	#content .item{
		padding: 20px;
		margin-bottom: 20px;
		border: 1px dotted #0088bb;
	}
	#content .item h2{
		font-size: 16px;
		font-weight: bold;
		border-bottom:  2px solid #0088bb;
		margin-bottom: 10px;
	}
	#content .item li{
		display: inline;
		margin-right: 10px; 
	}
	#content .item li a img{
		width:230px;
		height: 230px;
		border: none;
	}
	#menu{
		position: fixed;
		top: 100px;
		left: 50%;
		margin: 400px;
		width: 80px;
	}
	#menu ul li a{
		display: block;
		margin: 5px 0;
		font-size: 14px;
		font-weight: bold;
		color: #333;
		width: 80px;
		height: 50px;
		text-decoration:none;
		text-align: center;
	}
	#menu ul li a:hover,
	#menu ul li a.current{
		color: #fff;
		background: #0088bb;
	}
	/*ie6 hack*/
	html, *html body{
		background-image: url('about:blank');
		background-attachment:fixed;
	}
	* html #menu {
		/*position: fixed;*/
		position: absolute;
		top: expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
	}
	</style>
	
	<script type="text/javascript">
	//定义getByClassName函数，让函数实现根据class name获取对象并返回
    function getByClassName(obj, cls){
        var elements = obj.getElementsByTagName("*");
        var result = [];
        for(var i = 0; i < elements.length; i++){
            if(elements[i].className == cls){
                result.push(elements[i]);
            }
        }
        return result;
    }
    
	function hasClass( obj, cls ){ 
	    return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
	}
	
	function removeClass( obj, cls ){ 
	    if( hasClass( obj, cls )){ 
		    //remove
			var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
			obj.className = obj.className.replace(reg, "");
		}
	}
   
    //定义getByClassName函数，让函数实现给对象增加class 
    function addClass(obj, cls){
        if(!hasClass(obj, cls)){
            obj.className += " " + cls;
        }
    }
	
	window.onload = function(){ 
		
	    window.onscroll = function(){ 		
		    var top = document.documentElement.scrollTop || document.body.scrollTop;
			
			var menus = document.getElementById("menu").getElementsByTagName("a");
			
			var items = getByClassName(document.getElementById("content"), "item");
			
			var currentId = "";
			
			for ( var i=0; i< items.length; i++ ){ 
			    var _item = items[i];
			    var _itemTop = _item.offsetTop;
				if( top > _itemTop - 200 ){ 
				    currentId = _item.id;
				} else { 
				    break;
				}			
			}
		
			 				
      //请补充此处代码，给正确的menu下的a元素class赋值current
           if(currentId){
               for(var j = 0; j < menus.length; j++){
                   var _menu = menus[j];
                   var _href = _menu.href.split("#");
                   if(_href[_href.length - 1] != currentId){
                       removeClass(_menu, "current");
                   } else {
                       addClass(_menu, "current");
                   }
               }
           } 
      	
		}	
	}
	</script>
	
</head>
<body>
<div id="menu">
	<ul>
		<li><a href="#item1">1F 男装</a></li>
		<li><a href="#item2">2F 女装</a></li>
		<li><a href="#item3">3F 美妆</a></li>
		<li><a href="#item4">4F 数码</a></li>
		<li><a href="#item5">5F 母婴</a></li>
	</ul>
</div>
<div id="content">
	<h1>祥华百货</h1>
	<div id="item1" class="item">
		<h2>1F 男装</h2>
		<ul>
			<li><a href="#" class="current"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
			<li><a href="#"><img src="1F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item2" class="item">
		<h2>2F 女装</h2>
		<ul>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
			<li><a href="#"><img src="2F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item3" class="item">
		<h2>3F 美妆</h2>
		<ul>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
			<li><a href="#"><img src="3F.jpg" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item4" class="item">
		<h2>4F 数码</h2>
		<ul>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
			<li><a href="#"><img src="4F.png" alt=""></a></li>
		</ul>
		
	</div>
	<div id="item5" class="item">
		<h2>5F 母婴</h2>
		<ul>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
			<li><a href="#"><img src="5F.jpg" alt=""></a></li>
		</ul>
		
	</div>
</div>
</body>
</html>

因为IE 对getElementsByClassName支持比较差，这里我们创建一个函数 根据class name 获取元素

1
2
3
4
5
6
7
8
9
10
11
function getByClassName(obj,cls){
			var elements =obj.getElementsByTagName("*");
			var result = [];
			for (var i = 0; i < elements.length; i++)
			{
				if (elements[i].className == cls) {
					result.push(elements[i]);
				}
				//注意：这里的elements[i].className == cls判断条件在多个class情况下是不成立的，所以在页面复杂，class很多时候就不能这么用，这里不赘述
			return result;
		}

"(\\s|^)"是什么意思?

\s

空白符

^

  • 在字符集中表示反向选取，比如[^abc] 表示字符集中不包括 a,b,c
  • 表示字符串的开始
    所以(\\s|^)表示 空白符或者字符串的开始

备注：代码里的\s有两个\ ,是java,js等一些语言里的转义

正则表达式

1
RegExp("(\\s|^)"+cls+"(\\s|$)")

含有传入参数cls 且 首尾有空白符或者什么都没有的的字符串

  • \\s|^ 表示空白符或者 什么都没有（起始位置）
  • \\s|$ 表示 空白符或者什么都没有（结束位置）
    例如：”className” 或者 “ className ”

参考：

慕课网 网页定位导航特效
正则表达式语法手册，以及一些实例
揭开正则表达式的神秘面纱

AlexZ33 wechat
扫码订阅公众号
如果文章对您有用请随意打赏，谢谢支持！