今天要扒的是腾讯网站地图页面(http://www.qq.com/map/)页卡滚动效果,见下图
有兴趣的童鞋可以去那页面试一试,其动画效果见下图:
那么先理下思路:上方的按钮对应下方的某个栏目,点击某按钮时,其对应的栏目(暂且称为A吧)滚到最上方,原本在A前方的栏目则在滚动结束后自动跳到最后面(这里要注意顺序,比如在A前面有2个栏目B和C,那么B滚完便跳到最后,然后C开始滚,C滚完跳到最后面)。
咱这里说的“跳”可以用append实现,即把前面的元素有序地移到最后。至于滚动,可以在全部栏目外围包一个overflow:hidden的父元素,再让所有栏目一起向上滚动,每次只滚动一个要滚动的栏目高度,且该栏目滚动完再append到父元素后面,次序的问题可以通过数组+animate的callback实现。
先写原型:
<head> style> .mapWrap{margin:10px auto 0px auto; padding20px width940px background-colorwhite} .map_listWrapwidth overflowhidden .map_titleWrap span displayinline-block193pxyellow bordersolid 1px white text-aligncenter .map_listWrap div positionrelative margin-top10px908px 0 15px 15px 15pxsolid 1px black .map_listWrap div h3displayblock6px 0 6px 21pxfont-size15px colorred} </script src="jq.js"></scriptmeta charset="utf-8"title>网站地图> bodydiv class="mapWrap"> ="map_titleWrap " id="map_titleWrap"> span>业务中心><>账户中心>介绍中心>帮助中心div><!--map_titleWrap结束--> ="map_listWrap"="map_listWrap"id="map_item0"h3p 内容br/>内容123123/></>内容/>1111内容/> > > ="map_item1" 内容22222/>占位符占位符占位符占位符占位符/>内容 ="map_item2"="map_item3" 11111map_listWrap结束--> mapWrap结束--> >
接着是脚本。为了方便日后扩展更多栏目,我们得动态地获取、挪动元素,而不是把代码写死。
感觉这里比较难处理的是获取需要滚动的栏目元素,如果单纯地获取被选中栏目元素A的索引i,再把所有栏目索引小于i的元素依次append到后面,这种做法行不通,因为每滚动-append一次之后,所有元素都是打乱重排了,你无法确定你后续再重排出来的顺序能保持如下规则:
0-1-2-3、1-2-3-0、2-3-0-1、3-0-1-2
所以我们可以抛弃对栏目索引的依赖,转而从不变的、固定的元素id入手。我们可以建立一个[0,1,2,3]的数组元素,其数值跟每个栏目的id名(map_item0,map_item1,....,map_item3)后缀对应起来,每次点击上方按钮时,获取按钮的索引i(按钮的索引是固定不变的,可以放心用),然后截取数组第i个元素前面的元素,将其push到数组后面,形成新的栏目队列排序,接着要求栏目按照这个顺序来做重排。
初步脚本如下:
$(document).ready(function() { var $wrap = $("#map_listWrap"); var $listItems = $("#map_listWrap div"); //全部列表栏目 var wrap_h = $wrap.height();$wrap.css({"height":wrap_h}); 固定Wrap的高,以便overflow生效 var def_t = $listItems.eq(0).offset().top; 第一个div的偏移 var items_l = $listItems.length; var arr = new Array(); j = 0; 定义并初始化数组 while(j<items_l){ arr[j]=j++; } $("span","#map_titleWrap").click((){ var i= $(this).index("#map_titleWrap span"); for(var k=0;k<arr.length;k++){ if(arr[k]==i){ var index = k; 获取被选中的栏目A的索引 continue; } } var arr_front = arr.slice(0,index); 获取要滚动的元素(即栏目A前面的元素)的id名后缀 arr.splice(0,index); arr = arr.concat(arr_front); var k=0;k<arr_front.length;k++){ 按顺序遍历来获得要滚动的元素 var $item_k = $("#map_item"+arr_front[k]); 第k个要滚动的元素 var item_k_h = $item_k.height(); $listItems.animate({"top":-item_k_h},300,function(){ 栏目整体滚动后才执行下方代码 $("#map_item"+arr_front[k]).appendTo($wrap);$listItems.css("top","0");}) 滚动后append到最后,同时重置栏目整体top值 } }) });
但该代码在运行时并没有按预期效果实现。在点多几次后会出现顺序错乱。
这是因为animate是异步执行的,在animate执行的300毫秒里,可能for循环已早早就执行完结束了,而最后一句代码存在动态对象arr_front[k],其索引k经过for循环已改变了它的值,从而导致我们要append的元素不再是一开始确定好的元素。
解决方法是在外面写个带参函数来代入索引,防止元素被更改:
$(document).ready(var $listItems = $("#map_listWrap div"); var wrap_h = $wrap.height();$wrap.css({"height":wrap_h}); var def_t = $listItems.eq(0).offset().top; new Array(); j = 0; var index = k; var arr_front = arr.slice(0var callFun = function(i){ 在for外部定义要执行的函数 $listItems.animate({"top":-item_k_h},1)">(){ $("#map_item"+arr_front[i]).appendTo($wrap);$listItems.css("top","0"); }); } var k=0;k<arr_front.length;k++){ var $item_k = $("#map_item"+arr_front[k]); $item_k.height(); callFun(k); 调用函数 } }) });
OK,问题解决。 共勉~
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。