Jquery简单的右侧浮动菜单

发布时间：2020-06-04 12:53:51 作者：涂根华
来源：网络阅读：3352

今天有空稍微看了下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 xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<style> 
.test{ height:8400px;}  
.float{ width:103px; height:213px; background: url(p_w_picpaths/float.png) no-repeat; overflow:hidden; position:absolute; right:10px; top:100px;}  
</style> 
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>   
</head> 
 
<body> 
<div class="test"></div> 
    <div class="float">aaaa</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)/2+sH},{ queue: false, duration: 900 });    
        }  
    })  
</script> 
</body> 
</html>

当窗口一加载的时候我让当前文档一个相对定位那么浮动元素就相对文档来说他是绝对定位所以不管窗口缩小时候还是移动窗口那个浮动元素都不会改变位置！

附件：http://down.51cto.com/data/2359405

Jquery简单的右侧浮动菜单

相关阅读