广东个人 网站备案,sakai wordpress,抖音代运营合同陷阱,青海中小企业网站建设今天有空稍微看了下Jquery动画函数animate这个方法#xff0c;发现可以用这个方法来做下简单的右侧浮动菜单 因为经常做淘宝页面时候会碰到这样的效果 以前都是用人家的javascript组件代码 发现老是用人家也不好#xff0c;所以今天有空用jqeury中的animate这个方法写了一个简… 今天有空稍微看了下Jquery动画函数animate这个方法发现可以用这个方法来做下简单的右侧浮动菜单 因为经常做淘宝页面时候会碰到这样的效果 以前都是用人家的javascript组件代码 发现老是用人家也不好所以今天有空用jqeury中的animate这个方法写了一个简单的浮动菜单原理非常的简单 就是当滚动条滚动时候 让他运行一个方法 然后在那个方法里面简单的计算下 动画元素的top 计算方法是window的高度-元素的高度 再除以2 就可以让元素在页面上是剧中的 然后在加上元素滚动的高度 代码如下 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd html xmlnshttp://www.w3.org/1999/xhtml head meta http-equivContent-Type contenttext/html; charsetutf-8 / title无标题文档/title style .test{ height:8400px;} .float{ width:103px; height:213px; background: url(images/float.png) no-repeat; overflow:hidden; position:absolute; right:10px; top:100px;} /style script typetext/javascript srchttp://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js/script /head body div classtest/div div classfloataaaa/div script $(function(){ $(document).css({position : relative}) $(.float).css({position : absolute,top : 100px,right : 10px}) $(window).scroll(function(){ rightScroll(); }) function rightScroll(){ var wH $(window).height(), eH $(.float).height(), sH $(window).scrollTop(); $(.float).animate({top : (wH-eH)/2sH},{ queue: false, duration: 900 }); } }) /script /body /html 当窗口一加载的时候 我让当前文档 一个相对定位 那么浮动元素就相对文档来说 他是绝对定位 所以不管窗口缩小时候还是移动窗口 那个浮动元素都不会改变位置 附件http://down.51cto.com/data/2359405 本文转自 涂根华 51CTO博客原文链接http://blog.51cto.com/tugenhua/732639如需转载请自行联系原作者
