今天有空稍微看了下Jquery动画函数animate这个方法,发现可以用这个方法来做下简单的右侧浮动菜单 因为经常做淘宝页面时候会碰到这样的效果 以前都是用人家的javascript组件代码 发现老是用人家也不好,所以今天有空用jqeury中的animate这个方法写了一个简单的浮动菜单!原理非常的简单,就是当滚动条滚动时候 让他运行一个方法 然后在那个方法里面简单的计算下 动画元素的top 计算方法是:window的高度-元素的高度 再除以2 就可以让元素在页面上是剧中的 然后在加上元素滚动的高度 !!!
核心代码:
CSS样式:
<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>
HTML代码:
<div class="test"></div>
<div class="float">aaaa</div>
JS代码:
<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>
下一篇:js 上传图片、预览
讨论数量:0