[原创作品]web网页中的描点

　　因为近来在从事web前端开发的工作，所以写的文章也都是关于web这一块。以后将分享算法和web高级编程的内容，很多公司的web前端不够重视，以为是很low-level，给的待遇也很一般，其实，这都是很狭隘的理解。软件开发是一种很谨慎的工作，每一个环节都需要足够的重视。好了，不扯淡。需要扯淡的，点击左边信息栏加群按钮。

　　今天分享的内容是网页描点效果，就是在网页滚动到某个位置时，菜单有相应的变化。如图，

就是在滚动时，菜单会有相应的选中效果，点击菜单时，定位到网页内容。

菜单代码：

1         <ul class="menu">
2             <li><a href="#about-us">关于我们</a></li>
3             <li><a href="#dynamic">动态</a></li>
4             <li><a href="#case">案例</a></li>
5             <li><a href="#service">服务</a></li>
6             <li class="select"><a href="#index">首页</a></li>
7         </ul>

描点的话就是在网页相应的位置加上id属性，这里是在section标签加的id，就行。重点看js代码：

 1    $(window).scroll(function () {
 2
 3             $(‘section[id]‘).each(function(){
 4                 var id = $(this).attr(‘id‘);
 5                 var offsetTop = document.getElementById(id).getBoundingClientRect().top;
 6                 var offsetBtm = document.getElementById(id).getBoundingClientRect().bottom;
 7
 8                 if(offsetTop < 0 && offsetBtm > 0) {
 9                     $(‘.menu li a[href]‘).parent().removeClass(‘select‘);
10                     $(‘.menu li a[href=#‘+id+‘]‘).parent().addClass(‘select‘);
11                 }
12             });
13
14         });

　　上面代码中getBoundingClientRect()的作用的将选取的dom元素作为矩形，其相对的位置是浏览器窗口的大小。.top是dom元素上边距距离浏览器窗口上边的距离，.bottom是dom元素下边距距离窗口上边距的距离。说白了，就是以浏览器左边，上边为基准。还有.left, .right，这个，博友应该明白什么意思了。当上边距小于等于0，且下边距大于0说明该元素在当前浏览器视图中。改变菜单的选中状态。

　　因为a标签在li里面，而选中状态在li class="select"，所以点击时应该这样写，

1   $(‘.menu li‘).click(function(){
2             window.location = $(this).find(‘a‘).attr(‘href‘);
3             $(this).siblings().removeClass(‘select‘);
4             $(this).addClass(‘select‘);
5         });

就是加上window.location，让页面跳转到相应的元素。

好了，这部分不是难点，不做多余解释。原创作品，转载请注明出处：http://zhutty.cnblogs.com