日期:2014-05-17  浏览次数:20764 次

实现一个右侧显示和隐藏的功能,想请教各位
http://developer.51cto.com/art/201208/354987.htm
像这个里面右侧有一个分享的按钮,我想实现它的效果,有相对浏览器固定,还有滑出隐藏功能,我试过很久都没有达到预期的效果,希望能有高手指点。。最好有源码示例。。。新手万分感激。。。。

------解决方案--------------------
这种效果主要考虑mouseover和mouseout的冒泡事件,根据网上解决冒泡的方法给楼主简单的整了下,希望对楼主有所帮助:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>滑动与滑出效果</title>
        <style type="text/css">
            body,html{
                padding: 0px;
                margin: 0px;
            }
            .mainContent{
                margin: 0 auto;
                width: 800px;
                height: 2000px;
            }
            #bdshare{
                position: fixed;
                right: -215px; 
                top: 195px;  
                overflow: hidden; 
                cursor: pointer;
            }
            .shareContent{
                float: left;
                margin-top: 50px;
            }
            .shareRight{
                float: left;
                width: 208px;
                height: 328px; 
                border: 1px solid blue;
            }
        </style>
    </head>
    <body>
        <div class="mainContent">
            <div i