欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

页面滑到底端弹出提示表单

程序员文章站 2022-04-27 21:15:36
...

页面滑到底端弹出提示表单
            
    
    博客分类: JavaScript/Jquery htmlcssjqueryjsweb 

 

<p id="last">
    Some paragraph text
</p>

<div id="slidebox">
    <a class="close"></a>
    <p>More in Technology & Science (4 of 23 articles)</p>
    <h2>The Social Impact of Scientific Research and new Technologies</h2>
    <a class="more">Read More »</a>
</div>


 

#slidebox{
    width:400px;
    height:100px;
    padding:10px;
    background-color:#fff;
    border-top:3px solid #E28409;
    position:fixed;
    bottom:0px;
    right:-430px;
    -moz-box-shadow:-2px 0px 5px #aaa;
    -webkit-box-shadow:-2px 0px 5px #aaa;
    box-shadow:-2px 0px 5px #aaa;
}
#slidebox p, a.more{
    font-size:11px;
    text-transform:uppercase;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing:1px;
    color:#555;
}
a.more{
    cursor:pointer;
    color:#E28409;
}
a.more:hover{
    text-decoration:underline;
}
#slidebox h2{
    color:#E28409;
    font-size:18px;
    margin:10px 20px 10px 0px;
}

a.close{
    background:transparent url(../images/close.gif) no-repeat top left;
    width:13px;
    height:13px;
    position:absolute;
    cursor:pointer;
    top:10px;
    right:10px;
}
a.close:hover{
    background-position:0px -13px;
}

 

<script type="text/javascript">
$(function() {
    $(window).scroll(function(){
        var distanceTop = $('#last').offset().top - $(window).height();
 
        if  ($(window).scrollTop() > distanceTop)
            $('#slidebox').animate({'right':'0px'},300);
        else
            $('#slidebox').stop(true).animate({'right':'-430px'},100);
    });
 
    $('#slidebox .close').bind('click',function(){
        $(this).parent().remove();
    });
});
</script>

 

  • 页面滑到底端弹出提示表单
            
    
    博客分类: JavaScript/Jquery htmlcssjqueryjsweb 
  • 大小: 37.9 KB