JavaScript基础

本节内容：

  • JavaScript基础
  • Dom编程　　 ---->操作html所有标签
  • jQeury         ---->开源模块，是对js的一个封装

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.代码样例：

jsfile.js文件
/**
 * Created by Administrator on 2016/2/14.
 */
function func(){
    alert('func');
}


html文件
<body>

<!--<script type="text/javascript" src="jsfile.js"></script>-->
    <script type="text/javascript">
        func()

    </script>
</body>

<!-- javascript代码一般放在body里面，紧贴body的底部 -->

2.变量和函数的声明

1、全局变量和局部变量
    name ＝ 'eric'
    var name ＝ 'saneri'
 
2、基本函数和自执行函数
    function Foo(arg){
        console.log(arg);
    }
 

    (function (arg) {
        alert(arg);
    })('888')

3.字符串常用方法和属性

obj.trim()			　　　　　　　　　　　　　　　　　　//去除空格

a = "   saneri   "
"   saneri   "
b = a.trim()
"saneri"
b.trim()
"saneri"

obj.charAt(index)		　　　　　　　　　　　　　　　　　　//根据索引获取字符串中的字符
b.trim()
"saneri"
b.charAt(1)
"a"
b.charAt(2)
"n"

obj.substring(start,end)		　　　　　　　　　　　　　　//类似切片

b.trim()
"saneri"
b.substring(0,2)
"sa"
b.substring(0,3)
"san"

obj.indexOf(char)						//找字符的下标
b.trim()
"saneri"
b.indexOf('s')
0
b.indexOf('n')
2

obj.length							//字符长度

b.trim()
"saneri"
b.length
6

4、数组　　

声明，如：
    var array = Array() 或 var array = []
 
添加
    obj.push(ele)                   追加
    obj.unshift(ele)                最前面插入数据
    obj.splice(index,0,'content')   指定索引插入，其中0位默认固定参数.
 
移除
    obj.pop()                       数组尾部获取
    obj.shift()                     数组头部获取
    obj.splice(index,count)         数组指定位置后count个字符
 
切片
    obj.slice(start,end)           
 
合并
    newArray ＝ obj1.concat(obj2)   
 
翻转
    obj.reverse()
 
字符串化
    obj.join('_')
 
长度
    obj.length

 1 a = [11,22,33,44,55]
 2 [11, 22, 33, 44, 55]
 3 a.push('99')                    //追加
 4 6
 5 a
 6 [11, 22, 33, 44, 55, "99"]
 7 a.unshift("00")                //最前面插入数据
 8 7
 9 a
10 ["00", 11, 22, 33, 44, 55, "99"]
11 a.splice(2,0,'QQ')        //指定索引位置插入数据
12 []
13 a
14 ["00", 11, "QQ", 22, 33, 44, 55, "99"]
15 
16 a.pop()                                        //数据尾部获取
17 "99"
18 a.shift()                                    //数组头部获取
19 "00"
20 
21 a.slice(0,3)                            //切片
22 [11, "QQ", 22]
23 
24 a = [11,22]
25 [11, 22]
26 b = [44,55]
27 [44, 55]
28 a.concat(b)                                //合并
29 [11, 22, 44, 55]
30 a.reverse()                                //翻转
31 [22, 11]
32 a
33 [22, 11]
34 a.join('_')                                //字符串化
35 "22_11"
36 a.length                                    //长度
37 2
数组练习实例

注意：字典是一种特殊的数组

6、循环

两种循环方式：
//循环列表
a = [11,22,33,44]
[11, 22, 33, 44]
for (var item in a){console.log(item);}
0
1
2
3
//另一种for循环方式
a = [11,22,33,44]
[11, 22, 33, 44]
for(var i=0;i<a.length;i++){console.log(i);}			//取出索引值，i也可以从1开始
0
1
2
3
//循环字典
a = {k1:123,k2:456,k3:789}
Object {k1: 123, k2: 456, k3: 789}
a['k1']
123
for(var item in a){console.log(item);}			//循环取出索引
k1
k2
k3

for(var item in a){console.log(a[item]);}		//循环取出索引值
123
456
789

7、异常处理

try{
		var mn=m;

}catch(e){

	console.log(e);

}finally{

	console.log('finally')
}

　　

文件对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

选择器：

  • document.getElementById('id')
  • document.getElementsByName('name')
  • document.getElementsByTagName('tagname')
 1 <body>
 2     <div id="ll">
 3         123
 4     </div>
 5 <!--<script type="text/javascript" src="jsfile.js"></script>-->
 6     <script type="text/javascript">
 7         var i = document.getElementById('ll');       <!--id只能有一个，结果直接出来-->
 8         var i = document.getElementsByName('name'); <!--name可以有多个，要循环结果才可以出来-->
 9         for(var item in i){
10             i[item].innerText = "456";
11         }
12         var i = document.getElementsByTagName('div');
13         i.innerText = "456";
14 
15     </script>
16 </body>
17 
18 当浏览器访问时由123跳转显示456.
操作实例

常用函数：

创建标签，document.createElement('a')

获取或者修改样式，obj.className 

获取或设置属性，setattribute(key,val)    getattribute(key)

获取或修改样式中的属性，obj.style.属性

提交表单，document.geElementById(‘form’).submit()

常用事件：

  • onclick
  • onblur
  • onfocus
  • on...
onload和ready
    body标签添加onload事件 或者 window.onload = function(){} 
        覆盖上一个onload只能注册一次，而ready就可以多次注册
    $(document).ready(function(){}) 或者 $(function(){})
onload是所有DOM元素创建、图片加载完毕后才触发的。而ready则是DOM元素创建完毕后触发的，不等图片加载完毕。图片还么有渲染，就可以进行事件的执行。

　　

其他函数：

  • console.log()
  • location.href = "url" 和 open('url')
  • alert()
  • confirm()
  • setInterval("alert()",2000);    clearInterval(obj)
  • setTimeout();    clearTimeout(obj)
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' >
        <title>欢迎blue shit莅临指导&nbsp;&nbsp;</title>
        <script type='text/javascript'>
            function Go(){
                var content = document.title;
                var firstChar = content.charAt(0)
                var sub = content.substring(1,content.length)
                document.title = sub + firstChar;
            }
            setInterval('Go()',1000);
        </script>
    </head>
    <body>    
    </body>
</html>
跑马灯
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        
        <style>
            .gray{
                color:gray;
            }
            .black{
                color:black;
            }
        </style>
        <script type="text/javascript">
            function Enter(){
               var id= document.getElementById("tip")
               id.className = 'black';
               if(id.value=='请输入关键字'||id.value.trim()==''){
                    id.value = ''
               }
            }
            function Leave(){
                var id= document.getElementById("tip")
                var val = id.value;
                if(val.length==0||id.value.trim()==''){
                    id.value = '请输入关键字'
                    id.className = 'gray';
                }else{
                    id.className = 'black';
                }
            }
        </script>
    </head>
    <body>
        <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();'  onblur='Leave();'/>
    </body>
</html>
搜索框

 

jQuery是一个兼容多浏览器的javascript库，核心理念是write less,do more(写得更少,做得更多)，对javascript进行了封装，是的更加便捷的开发，并且在兼容性方面十分优秀。

  1. 选择器和筛选
  2. 属性
  3. css
  4. 文档处理
  5. 事件
  6. 扩展
  7. ajax

更多见：http://www.php100.com/manual/jquery/　　

实例：

返回顶部

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .back{
 8             position: fixed;
 9             bottom: 0px;
10             right: 0px;
11         }
12         .hide{
13             display: none;
14         }
15     </style>
16 </head>
17 <body>
18 
19 <div style="height: 2000px;"></div>
20 
21 <div onclick="GoTop()" class="back hide">返回顶部</div>
22 
23 <script src="jquery-1.8.2.js"></script>
24 <script type="text/javascript">
25 
26     function GoTop(){
27         //返回顶部
28         $(window).scrollTop(0);
29     }
30 
31     $(function(){
32 
33         $(window).scroll(function(){
34             //当滚动滑轮时，执行函数体
35 
36             //获取当前滑轮滚动的高度
37             var top = $(window).scrollTop();
38 
39             if(top>100){
40                 //展示“返回顶部”
41                 $('.back').removeClass('hide');
42             }else{
43                 //隐藏“返回顶部”
44                 $('.back').addClass('hide');
45             }
46         });
47     });
48 
49 </script>
50 
51 </body>
52 </html>
返回顶部

多选框

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' />
 5         <title></title>
 6         <script type="text/javascript" src='jquery-1.8.2.js'></script>
 7         <script type="text/javascript">
 8             $(function(){
 9                 $('#selectAll').click(function(){
10                     $('#checklist :checkbox').attr('checked',true);
11                 })
12                 $('#unselectAll').click(function(){
13                     $('#checklist :checkbox').attr('checked',false);
14                 })
15                 $('#reverseAll').click(function(){
16                     $('#checklist :checkbox').each(function(){
17                         $(this).attr('checked',!$(this).attr('checked'))
18                     })
19                 })
20 
21             })            
22         </script>
23     </head>
24     <body>
25         <div id='checklist'>
26             <input type='checkbox' value='1'/>篮球
27             <input type='checkbox' value='2'/>足球
28             <input type='checkbox' value='3'/>羽毛球
29         </div>
30         <input type='button' value='全选' id='selectAll' />
31         <input type='button' value='不选' id='unselectAll' />
32         <input type='button' value='反选' id='reverseAll' />
33     </body>
34 </html>
多选框

菜单

 1 .hide{
 2     display: none;
 3 }
 4 
 5 .container{
 6     300px;
 7     height: 600px;
 8     background-color: #ddd;
 9     border: 1px solid #999;
10 }
11 
12 .container .title{
13     height: 38px;
14     font-size: 28px;
15     line-height: 38px;
16     background-color: orange;
17     cursor: pointer;
18 }
19 
20 .container .body{
21     background-color:white;
22 }
23 
24 .container .body a{
25     display:block;
26     padding: 10px;
27 }
css
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset='utf-8' />
 5         <link rel="stylesheet" type="text/css" href="common.css" />
 6         <script type="text/javascript" src='jquery-1.8.2.js'></script>
 7 
 8     </head>
 9     <body>
10         <div class='container'>
11             <div>
12                 <div class='title'>Menu1</div>
13                 <div class='body'>
14                     <a href="">content1</a>
15                     <a href="">content2</a>
16                     <a href="">content3</a>
17                 </div>
18             </div>
19 
20             <div>
21                 <div class='title'>Menu1</div>
22                 <div class='body hide'>
23                     <a href="">content1</a>
24                     <a href="">content2</a>
25                     <a href="">content3</a>
26                 </div>
27             </div>
28 
29             <div>
30                 <div class='title'>Menu1</div>
31                 <div class='body hide'>
32                     <a href="">content1</a>
33                     <a href="">content2</a>
34                     <a href="">content3</a>
35                 </div>
36             </div>
37             
38             <div>
39                 <div class='title'>Menu1</div>
40                 <div class='body hide'>
41                     <a href="">content1</a>
42                     <a href="">content2</a>
43                     <a href="">content3</a>
44                 </div>
45             </div>
46             
47             <div>
48                 <div class='title'>Menu1</div>
49                 <div class='body hide'>
50                     <a href="">content1</a>
51                     <a href="">content2</a>
52                     <a href="">content3</a>
53                 </div>
54             </div>
55 
56         </div>
57 
58         <script type="text/javascript">
59             $(function(){
60                 $('.title').click(function(){
61                     $(this).parent().siblings().children('.body').addClass('hide');
62                     $(this).next().removeClass('hide');
63                 });
64             });
65         </script>
66     </body>
67 </html>
Html

Tab

  1 /*公共开始*/
  2 body {
  3     margin: 0 auto;
  4     font-family: Arial;
  5     _font-family: 宋体,Arial;
  6     font-size: 12px;
  7 }
  8 body, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, figure, div {
  9     margin: 0;
 10     padding: 0;
 11 }
 12 
 13 ol, ul, li {
 14     list-style: none;
 15 }
 16 a{
 17     cursor:pointer;
 18     text-decoration:none;
 19 }
 20 /*a:hover{
 21     color: #F60 !important;
 22     text-decoration: underline;
 23 }*/
 24 img{
 25     border:none;
 26     border-0px;
 27 }
 28 table{
 29     border-collapse: collapse;
 30     border-spacing: 0;
 31 }
 32 
 33 .red{
 34     color: #c00!important;
 35 }
 36 .m8{
 37     margin:8px;
 38 }
 39 .mt10{
 40     margin-top:10px;
 41 }
 42 .mt20{
 43     margin-top:20px;
 44 }
 45 .mr5{
 46     margin-right:5px;
 47 }
 48 .ml5{
 49     margin-left:5px;
 50 }
 51 
 52 .ml10{
 53     margin-left:10px;
 54 }
 55 
 56 .mb10{
 57     margin-bottom:10px;
 58 }
 59 .pt18{
 60     padding-top:18px;
 61 }
 62 .pt20{
 63     padding-top:20px;
 64 }
 65 .pb20{
 66     padding-bottom:20px;
 67 }
 68 .nbr{
 69     border-right:0px;
 70 }
 71 .font12{
 72     font-size:12px;
 73 }
 74 .font14{
 75     font-size:14px;
 76 }
 77 .font16{
 78     font-size:16px;
 79 }
 80 .bold{
 81     font-weight:bold;
 82 }
 83 .left{
 84     float:left;
 85 }
 86 .right{
 87     float:right;
 88 }
 89 .hide{
 90     display:none;
 91 }
 92 .show{
 93      display:table;
 94 }
 95 .clearfix{
 96     clear:both;
 97 }
 98 .clearfix:after {
 99     content: ".";
100     display: block;
101     height: 0;
102     clear: both;
103     visibility: hidden;
104 }
105 * html .clearfix {zoom: 1;}
106 
107 .container{
108     1190px;
109     margin-left:auto;
110     margin-right:auto;
111 
112 }
113 
114 .group-box-1 .title{
115     height: 33px;
116     line-height: 33px;
117     border: 1px solid #DDD;
118     background: #f5f5f5;
119     padding-top: 0;
120     padding-left: 0;
121                 
122 }
123 .group-box-1 .title .title-font{
124     display: inline-block;
125     font-size: 14px;
126     font-family: 'Microsoft Yahei','SimHei';
127     font-weight: bold;
128     color: #333;
129     padding-left: 10px;
130 }
131 .group-box-1 .body {
132     border: 1px solid #e4e4e4;
133     border-top: none;
134 }
135 
136 .tab-menu-box1 {
137     border: 1px solid #ddd;
138     margin-bottom: 20px;
139 }
140 
141 .tab-menu-box1 .menu {
142     line-height: 33px;
143     height: 33px;
144     background-color: #f5f5f5;
145 }
146 
147 .tab-menu-box1 .content {
148     min-height: 100px;
149     border-top: 1px solid #ddd;
150     background-color: white;
151 }
152 
153 .tab-menu-box1 .menu ul {
154     padding: 0;
155     margin: 0;
156     list-style: none;
157     /*position: absolute;*/
158 }
159 
160 .tab-menu-box1 .menu ul li {
161     position: relative;
162     float: left;
163     font-size: 14px;
164     font-family: 'Microsoft Yahei','SimHei';
165     text-align: center;
166     font-size: 14px;
167     font-weight: bold;
168     border-right: 1px solid #ddd;
169     padding: 0 18px;
170     cursor: pointer;
171 }
172 
173 .tab-menu-box1 .menu ul li:hover {
174     color: #c9033b;
175 }
176 
177 .tab-menu-box1 .menu .more {
178     float: right;
179     font-size: 12px;
180     padding-right: 10px;
181     font-family: "宋体";
182     color: #666;
183     text-decoration: none;
184 }
185 
186 .tab-menu-box1 .menu a:hover {
187     color: #f60 !important;
188     text-decoration: underline;
189 }
190 
191 .tab-menu-box1 .menu .current {
192     margin-top: -1px;
193     color: #c9033b;
194     background: #fff;
195     height: 33px;
196     border-top: 2px solid #c9033b;
197     z-index: 10;
198 }
199 
200 .tab-menu-box-2 .float-title {
201     display: none;
202     top: 0px;
203     position: fixed;
204     z-index: 50;
205 }
206 
207 .tab-menu-box-2 .title {
208      890px;
209     border-bottom: 2px solid #b20101;
210     border-left: 1px solid #e1e1e1;
211     clear: both;
212     height: 32px;
213 }
214 
215 .tab-menu-box-2 .title a {
216     float: left;
217      107px;
218     height: 31px;
219     line-height: 31px;
220     font-size: 14px;
221     font-weight: bold;
222     text-align: center;
223     border-top: 1px solid #e1e1e1;
224     border-right: 1px solid #e1e1e1;
225     background: url(/Content/images/bg4.png?3) 0 -308px repeat-x;
226     text-decoration: none;
227     color: #333;
228     cursor: pointer;
229 }
230 
231 .tab-menu-box-2 .title a:hover {
232     background-position: -26px -271px;
233     text-decoration: none;
234     color: #fff;
235 }
236 
237 .tab-menu-box-2 .content {
238     min-height: 100px;
239     background-color: white;
240 }
241 
242 
243 .tab-menu-box3 {
244     border: 1px solid #ddd;
245 }
246 
247 .tab-menu-box3 .menu {
248     line-height: 33px;
249     height: 33px;
250     background-color: #f5f5f5;
251 }
252 
253 .tab-menu-box3 .content {
254     height: 214px;
255     border-top: 1px solid #ddd;
256     background-color: white;
257 }
258 
259 .tab-menu-box3 .menu ul {
260     padding: 0;
261     margin: 0;
262     list-style: none;
263     /*position: absolute;*/
264 }
265 
266 .tab-menu-box3 .menu ul li {
267     position: relative;
268     float: left;
269     font-size: 14px;
270     font-family: 'Microsoft Yahei','SimHei';
271     text-align: center;
272     font-size: 14px;
273     50%;
274     cursor: pointer;
275 }
276  
277 .tab-menu-box3 .menu ul li:hover {
278     color: #c9033b;
279 }
280 
281 .tab-menu-box3 .menu .more {
282     float: right;
283     font-size: 12px;
284     padding-right: 10px;
285     font-family: "宋体";
286     color: #666;
287     text-decoration: none;
288 }
289 
290 .tab-menu-box3 .menu a:hover {
291     color: #f60 !important;
292     text-decoration: underline;
293     font-weight: bold;
294 }
295 
296 .tab-menu-box3 .menu .current {
297 
298     margin-top: -1px;
299     color: #c9033b;
300     background: #fff;
301     height: 33px;
302     border-top: 2px solid #c9033b;
303     z-index: 10;
304     font-weight: bold;
305     
306 }
307 
308 /*公共结束*/
css
 1 <!DOCTYPE html>
 2 <html>
 3 <head></head>
 4 <link href="common.css" rel="stylesheet" />
 5 <body>
 6     <div class='container'>
 7         <div class='tab-menu-box1'>
 8             <div class='menu'>
 9                 <ul id='tab-menu-title'>
10                     <li class='current' content-to='1'>价格趋势</li>
11                     <li content-to='2'>市场分布</li>
12                     <li content-to='3'>其他</li>
13                 </ul>
14             </div>
15 
16             <div id='tab-menu-body' class='content'>
17                 <div content='1'>content1</div>
18                 <div content='2' class='hide'>content2</div>
19                 <div content='3' class='hide'>content3</div>
20             </div>
21         </div>
22     </div>
23     <script src="./jquery-1.8.2.js"></script>
24     <script type='text/javascript'>
25     $(function(){
26         ChangeTab('#tab-menu-title', '#tab-menu-body');
27     })
28     function ChangeTab(title, body) {
29             $(title).children().bind("click", function () {
30                 $menu = $(this);
31                 $content = $(body).find('div[content="' + $(this).attr("content-to") + '"]');
32                 $menu.addClass('current').siblings().removeClass('current');
33                 $content.removeClass('hide').siblings().addClass('hide');
34             });
35         }
36     </script>
37 </body>
38 </html>
html

滚动菜单

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title></title>
  6     <style>
  7 
  8         body{
  9             margin: 0px;
 10         }
 11         img {
 12             border: 0;
 13         }
 14         ul{
 15             padding: 0;
 16             margin: 0;
 17             list-style: none;
 18         }
 19         .clearfix:after {
 20             content: ".";
 21             display: block;
 22             height: 0;
 23             clear: both;
 24             visibility: hidden;
 25         }
 26 
 27         .wrap{
 28             width: 980px;
 29             margin: 0 auto;
 30         }
 31         
 32         .pg-header{
 33             background-color: #303a40;
 34             -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 35             -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
 36             box-shadow: 0 2px 5px rgba(0,0,0,.2);
 37         }
 38         .pg-header .logo{
 39             float: left;
 40             padding:5px 10px 5px 0px;
 41         }
 42         .pg-header .logo img{
 43             vertical-align: middle;
 44             width: 110px;
 45             height: 40px;
 46 
 47         }
 48         .pg-header .nav{
 49             line-height: 50px;
 50         }
 51         .pg-header .nav ul li{
 52             float: left;
 53         }
 54         .pg-header .nav ul li a{
 55             display: block;
 56             color: #ccc;
 57             padding: 0 20px;
 58             text-decoration: none;
 59             font-size: 14px;
 60         }
 61         .pg-header .nav ul li a:hover{
 62             color: #fff;
 63             background-color: #425a66;
 64         }
 65         .pg-body{
 66 
 67         }
 68         .pg-body .catalog{
 69             position: absolute;
 70             top:60px;
 71             width: 200px;
 72             background-color: #fafafa;
 73             bottom: 0px;
 74         }
 75         .pg-body .catalog.fixed{
 76             position: fixed;
 77             top:10px;
 78         }
 79 
 80         .pg-body .catalog .catalog-item.active{
 81             color: #fff;
 82             background-color: #425a66;
 83         }
 84 
 85         .pg-body .content{
 86             position: absolute;
 87             top:60px;
 88             width: 700px;
 89             margin-left: 210px;
 90             background-color: #fafafa;
 91             overflow: auto;
 92         }
 93         .pg-body .content .section{
 94             height: 500px;
 95         }
 96     </style>
 97 </head>
 98 <body>
 99 
100     <div class="pg-header">
101         <div class="wrap clearfix">
102             <div class="logo">
103                 <a href="#">
104                     <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn">
105                 </a>
106             </div>
107             <div class="nav">
108                 <ul>
109                     <li>
110                         <a  href="#">首页</a>
111                     </li>
112                     <li>
113                         <a  href="#">功能一</a>
114                     </li>
115                     <li>
116                         <a  href="#">功能二</a>
117                     </li>
118                 </ul>
119             </div>
120 
121         </div>
122     </div>
123     <div class="pg-body">
124         <div class="wrap">
125             <div class="catalog">
126                 <div class="catalog-item" auto-to="function1"><a>第1张</a></div>
127                 <div class="catalog-item" auto-to="function2"><a>第2张</a></div>
128                 <div class="catalog-item" auto-to="function3"><a>第3张</a></div>
129             </div>
130             <div class="content">
131                 <div menu="function1" class="section">
132                     <h1>第一章</h1>
133                 </div>
134                 <div menu="function2" class="section">
135                     <h1>第二章</h1>
136                 </div>
137                 <div menu="function3" class="section">
138                     <h1>第三章</h1>
139                 </div>
140             </div>
141         </div>
142 
143     </div>
144 
145     <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
146     <script type="text/javascript">
147         $(function(){
148             Init();
149         });
150         function Init(){
151             $(window).scroll(function() {
152                 var scrollTop = $(window).scrollTop();
153                 if(scrollTop > 50){
154                     $('.catalog').addClass('fixed');
155                 }else{
156                     $('.catalog').removeClass('fixed');
157                 }
158                 $('.content').children().each(function(){
159                     var offSet = $(this).offset();
160                     var offTop = offSet.top - scrollTop;
161                     var height = $(this).height();
162 
163                     if(offTop<=0 && offTop> -height){
164                         //去除其他
165                         //添加自己
166                         var docHeight = $(document).height();
167                         var winHeight = $(window).height();
168 
169                         if(docHeight == winHeight+scrollTop)
170                         {
171                             $('.catalog').find('div:last-child').addClass('active').siblings().removeClass('active');
172                         }else{
173                             var target = $(this).attr('menu');
174                             $('.catalog').find('div[auto-to="'+target+'"]').addClass('active').siblings().removeClass('active');
175                         }
176 
177 
178                     }
179                 });
180 
181             });
182 
183 
184         }
185 
186     </script>
187 </body>
188 </html>
滚动菜单

登陆注册验证

　　点击这里下载

更多实例

　　猛击这里下载

.

.

参阅文档：http://www.cnblogs.com/wupeiqi/articles/4457274.html　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/saneri/p/5188982.html