Question

50.00英镑，如果有人可以帮助我这个

我发现这个简单的滑动页脚 http://return-true.com/examples/slidefooter2.html

并想知道是否有人可以将其转换为从屏幕底部的屏幕左侧滑入目前的代码看起来像这样

的javascript

<script type="text/javascript"     src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
    jQuery(function($) {
        var open = false;
        $('#footerSlideButton').click(function () {
            if(open === false) {
                $('#footerSlideContent').animate({ height: '300px' });
                $(this).css('backgroundPosition', 'bottom left');
                open = true;
            } else {
                $('#footerSlideContent').animate({ height: '0px' });
                $(this).css('backgroundPosition', 'top left');
                open = false;
            }
        });     
    });
</script>

CSS

body {
    margin:0;
    padding:0;
    background: #EFEFEF;
}
#footerSlideContainer {
    position: fixed;
    bottom:0;
    width: 100%;
}
#footerSlideButton {
    background: url(sliderButton.png) top left no-repeat transparent;
    position: absolute;
    top: -55px;
    right: 20px;
    width:50px;
    height:50px;
    border: none;
    cursor: pointer;
}
#footerSlideContent {
    width: 100%;
    height: 0px;
    background: #251b15;
    color: #CCCCCC;
    font-size: 0.8em;
    border: none;
    font-family: DejaVuSansBook, Sans-Serif;
}
#footerSlideContent h3 {
    font-size: 36px;
    color: #9AC941;
    margin: 10px 0 10px 0;
}
#footerSlideContent ul {
    color: #EE8D40;
    list-style-type: none;
    line-height: 2em;
}
#footerSlideText {
    padding: 15px 10px 25px 25px;
}
#lookHere {
    font-family: DejaVuSansBook, Sans-Serif;
}
#lookHere h1, #lookHere h2 {
    font-size: 20em;
    padding: 0;
    margin: 0;
    color: #AAAAAA;
}
#lookHere h2 {
    font-size: 1.5em;
    margin: 0 0 0 30px;
}
#lookHere span.orange {
    color: #EE8D40;
}
#lookHere span.green {
    color: #9AC941;
}
</style>

HTML

<div id="lookHere">
<h1>Huh?!</h1>
<h2>This page isn't blank. Save some space. <span class="orange">Look</span> to the <span class="green">bottom right</span>.</h2>
</div>
<div id="footerSlideContainer">
    <div id="footerSlideButton"></div>
    <div id="footerSlideContent">
        <div id="footerSlideText">
            <h3>Hey! I'm a Sliding Footer</h3>
            <p>What's a Sliding Footer? Well I'm a cool little element which can be hidden from view, and revealed when the user wants to see me.</p>
            <p>What can you use me for? Well look at all this stuff:</p>
            <ul>
                <li>Sales information</li>
                <li>Important updates</li>
                <li>Unobtrusive about panel</li>
                <li>Or just a good ol' footer</li>
            </ul>
            <p>There are obviously many other uses, but these are the few useful ones I can think of.</p>
        </div>
    </div>

Answer 1

用这个替换你的代码......当用户将鼠标悬停在屏幕右下角的5％左右时，当它们离开页脚时，会在1秒内再次慢慢返回...

$(document).ready(function(){ $('#footerSlideContainer').css({position:'fixed',left:'95%',bottom:'0',height:'100px'}); $('#footerSlideContainer').mouseover(function(){ $('#footerSlideContainer').animate({left: '0%'}); }); $('#footerSlideContainer').mouseleave(function(){ $('#footerSlideContainer').animate({left: '95%'},1000); }); });

转换滑动页脚以滑入

1 个答案: