您现在的位置是:首页 > 学无止境> JS网站首页学无止境JS

达到指定位置出现效果

js  
简介达到指定位置出现效果

HTML:

<div  id="dw"></div>
<div class="gbxd">
        <a href="">
        <i><img src="images/logo.png"></i>
        <div class="gbcon">
            <h3>学习分享网</h3>
            <p>即刻了解更多相关资助内容</p>
        </div>
        <div class="bddh">拨打电话</div>
        </a>
        <div class="clear"></div>
    </div>
<script type="text/javascript"> 
$(document).ready(function(){
$(window).scroll(function(){//开始监听滚动条
var wh = $(window).height();
var ot = $("#dw").offset().top;
var topp = $(document).scrollTop();
var dd = ot - wh -topp;
if(dd<0){
    $(".gbxd").css('display','block');
}
})
})
</script>

CSS:

.gbxd{width:580px;height:100px; background:#f1f1f1; border-radius:10px; position:fixed; bottom:20px; left:50%; margin-left:-290px; opacity:0.9; display:none; animation:myfirst 0.2s;-webkit-animation:myfirst 0.2s;animation-fill-mode: forwards;overflow: hidden;}
.gbxd i{width:70px;height:70px; border-radius:5px; background:#fff; display:inline-block; position:absolute;left:15pxm; top:10px;padding:5px;}
.gbxd i img{width:100%}
.gbxd .gbcon{width:300px;height:60px; position:absolute; left:120px; top:25px;}
.gbxd .gbcon h3{ font-size:26px; color:#171717; line-height:32px;}
.gbxd .gbcon p{ font-size:18pxm; color:#a2a2a2; line-height:28px;}
.gbxd .bddh{width:120px;height:60px; line-height:60px; position:absolute;right:20px; top:20px; background:#06c261; color:#fff; text-align:center; border-radius:10px}

@-webkit-keyframes myfirst
{
0% {height:20px;}
25% {height:40px;}
50% {height:60px;}
75% {height:80px; }
100% {height:100px;}
}

@-moz-keyframes myfirst
{
0% {height:20px;}
25% {height:40px;}
50% {height:60px;}
75% {height:80px; }
100% {height:100px;}
}

@keyframes myfirst
{
0% {height:20px;}
25% {height:40px;}
50% {height:60px;}
75% {height:80px; }
100% {height:100px;}
}
Top