jQuery实现鼠标滚动条到页面底部浮动层滑动弹出信息
学习了一个效果,当滚动条滚动到页面底部时,弹出一个元素
html:
1 <h1 >请向下滚动页面 ↓</h1>
2 <div ></div>
3 <div ></div>
4 <div >
5 <a class="close" title="关闭">close</a>
6 <h2>华生_</h2>
7 <p>分享一些前端的笔记_ <br /><a href="http://www.cnblogs.com/jmjweb">http://www.cnblogs.com/jmjweb</a></p>
8 </div>
css:
初始化,主要是把#slidebox 固定在页面的底部
1 #slidebox{
2 width:400px;height:100px;overflow:hidden;padding:10px;background-color:#fff;border-top:3px solid #159;position:fixed;left:0;bottom:0px;_position:absolute;margin-left:-430px;
3 -moz-box-shadow:-2px 0px 10px #aaa;
4 -webkit-box-shadow:-2px 0px 10px #aaa;
5 box-shadow:-2px 0px 10px #aaa;
6 }
7 #slidebox p{color:#555;line-height:22px;font-size:12px;margin:10px 0;}
8 a.more{cursor:pointer;color:#159;font-size:12px;}
9 a.more:hover{text-decoration:underline;}
10 #slidebox h2{color:#159;font-size:18px;margin:5px 20px 5px 0px;}
11 a.close{overflow:hidden;position:absolute;cursor:pointer;top:10px;right:10px;color:#aaa}
12 a.close:hover{color:#159}
javascript:
通过 offset()、 height()、scrollTop()这三个函数判断滚动条是否在页面底部,如果是,将#slidebox 滑出
1 $(function(){
2 $(window).scroll(function(){3
4 var distanceTop = $('#last').offset().top - $(window).height();
5
6 if($(window).scrollTop() > distanceTop){ //判断是否滚动到页面底部
7 $('#slidebox').animate({'marginLeft':'0px'},300);
8 }else{
9 $('#slidebox').stop(true).animate({'marginLeft':'-430px'},100);
10 }
11
12 });
13
14 $('#slidebox .close').bind('click',function(){ //关闭按钮
15 $(this).parent("#slidebox").stop(true).animate({'marginLeft':'-430px'},100);
16 });
17 });
至此,效果已经完成!