土豆右下角弹出层效果

效果图：

所用的图片：

前台代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="js/51tab.js" type="text/javascript"></script>
    <link href="css/51tab2.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        window.onload = function () {
            var oBtn = document.getElementById('but');
            var oBottom = document.getElementById('miaov_bottom');
            var oBox = document.getElementById('miaov_box');
            var oBtnClose = document.getElementById('btn_close');

            var initBottomRight = parseInt(getStyle(oBottom, 'right'));
            var initBoxBottom = parseInt(getStyle(oBox, 'bottom'));

            oBtn.onclick = openHandler;
            oBtnClose.onclick = closeHandler;

            function openHandler() {
                startMove(oBottom, { right: 0 }, function () {
                    oBox.style.display = 'block';
                    startMove(oBox, { bottom: 0 });
                });
                oBtn.className = 'but_hide';
                oBtn.onclick = closeHandler;
            }

            function closeHandler() {
                startMove(oBox, { bottom: initBoxBottom }, function () {
                    oBox.style.display = 'none';
                    startMove(oBottom, { right: initBottomRight }, function () {
                        oBtn.className = 'but_show';
                    });
                });
                oBtn.onclick = openHandler;
            }
        };
    </script>
</head>
<body>
    <div class="page">
        <div id="miaov_bottom">
            <ul id='nav'>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
            <h2 class="miaov"><a href="#">彼此无可替代</a></h2>
        </div>
        <a class="but_show" id="but" href="#"></a>
        <div id="miaov_box">
            <div class="bg">
            </div>
            <div class="nav2_bg">
            </div>
            <ul id="list_nav">
                <li id="m1" class="on"><a href="#" onmouseover="javascript:gopage(1)">相关</a></li>
                <li id="m2"><a href="#" onmouseover="javascript:gopage(2)">最新</a></li>
                <li id="m3"><a href="#" onmouseover="javascript:gopage(3)">随机</a></li>
                <li id="m4"><a href="#" onmouseover="javascript:gopage(4)">标签</a></li>
            </ul>
            <a class='clos' id="btn_close"></a>
            <!--右边内容层-->
            <div class="box_right" id="content">
                <div id="c1" class="tablist">
                    <var>相关文章</var>
                </div>
                <div id="c2" class="tablist" style="display: none">
                    <var> 最新文章</var>
                    <a href='' title="">自适应宽度的html+css图片提交按钮代码</a>
                    <a href='' title="">图片大小固定的html+css图片提交按钮代码</a>
                    <a href='' title="">为网站增加圣诞节祝福动画百度的圣诞老人动画</a>
                    <a href='' title="">日期时间带星期农历js代码特效</a>
                    <a href='' title="">仿腾讯|新浪微博的文本向下滚动JS特效代码</a>
                </div>
                <div id="c3" class="tablist" style="display: none">
                    <var>随机推荐</var>
                    <a href='' title="">仿当当网JS+CSS图书列表鼠标滑过显示缩略图</a> 
                    <a href='' title="">给网页添加放大缩小功能按钮</a>
                    <a href='' title="">CSS+js div ul 结构选项卡</a> 
                    <a href='' title="">点击链接后弹出提示层</a>
                    <a href='' title="">JS实现flash效果的竖向折叠二级菜单(HTML+CSS+JS)</a>
                </div>
                <div id="c4" class="tabtag" style="display: none">
                    <var>热门标签</var>
                    <a href=''>弹出层</a> <a href=''>jQuery</a>
                    <a href=''>图片展示</a> <a href=''>下拉菜单</a>
                    <a href=''>HTML+CSS</a>
                </div>
            </div>
            <!--//右边内容层-->
        </div>
</body>
</html>

css：

*{margin:0;padding:0;font: 12px/1.25 tahoma,arial,宋体,sans-serif;}
li{list-style:none;}
a{text-decoration:none;}
body{width:100%;height:100%;background:#000;_position:relative;overflow:hidden;}
.page{position:fixed;_position:absolute;right:0;bottom:0;}
#miaov_bottom{width:203px;height: 50px;background:url(minibar.png) no-repeat 0 0;position:absolute;right:-165px;bottom:0;z-index: 20001;}
#nav{height: 22px;margin: 5px 0 0 43px;width: 125px;}
#nav li{float: left;width: 25px;}


.miaov{color: #FFFFFF;height:16px; line-height:16px; text-indent:8px;overflow: hidden;width: 160px; font-size:14px;}

#but{ bottom: 0;display: block;height: 50px;position: absolute;right: 0;width: 33px;z-index:20002;}
.but_hide{background: url(minibar.png) no-repeat -170px 0;}
.but_hide:hover{background-position:-203px 0;}
.but_show{background: url(minibar.png) no-repeat -236px 0;}
.but_show:hover{background-position:-269px 0;}
#miaov_box{bottom:-315px;display:none;height: 315px;padding: 0 0 48px;position: absolute;right: 1px;width: 200px; z-index: 20000;}
.bg{background: url(mini_jpgs.jpg) no-repeat 0 0;height: 315px;opacity: 0.9;position: absolute;right: 0;top: 0;width: 200px;}
.nav2_bg{bottom: 48px;height: 176px;left: 0;position: absolute;width: 34px;background: url(mini_jpgs.jpg) no-repeat 0 -139px;}
#list_nav{background: url(minibar.png) no-repeat scroll 0 -255px transparent;height: 139px;left: 0;position: absolute;top: 2px;width: 34px;}
#list_nav a{ color: #FFFFFF;display: block;height: 27px;line-height: 25px;text-align: center;text-decoration: none;}
#list_nav .show{color: #FF9900;}
#list_nav a:hover{color:#FFFF00;}
.clos{ background: url(minibar.png) no-repeat 0 -76px ;cursor: pointer;height: 9px;position: absolute;right: 10px;top: 14px;width: 9px;}
.box_right{color: #FFFFFF;height: 285px;overflow: hidden; position: absolute;right: 6px;top: 28px;width: 150px;}

.tablist a{ width:100%; height:24px; line-height:24px; display:block; text-indent:12px; overflow:hidden; white-space:nowrap;
            background: url(../images/jia.png) no-repeat left center;}

js:

function startMove(obj, json, fnEnd) {
    if (obj.timer) {
        clearInterval(obj.timer);
    }
    obj.timer = setInterval(function () {
        doMove(obj, json, fnEnd);
    }, 30);

    var oDate = new Date();

    if (oDate.getTime() - obj.lastMove > 30) {
        doMove(obj, json, fnEnd);
    }
}

function getStyle(obj, attr) {
    if (obj.currentStyle) {
        return obj.currentStyle[attr];
    }
    else {
        return getComputedStyle(obj, false)[attr];
    }
}
function doMove(obj, json, fnEnd) {
    var iCur = 0;
    var attr = '';
    var bStop = true; //假设运动已经该停止了

    for (attr in json) {
        if (attr == 'opacity') {
            iCur = parseInt(100 * parseFloat(getStyle(obj, 'opacity')));
        }
        else {
            iCur = parseInt(getStyle(obj, attr));
        }

        if (isNaN(iCur)) {
            iCur = 0;
        }

        var iSpeed = (json[attr] - iCur) / 8;
        iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

        if (parseInt(json[attr]) != iCur) {
            bStop = false;
        }

        if (attr == 'opacity') {
            obj.style.filter = "alpha(opacity:" + (iCur + iSpeed) + ")";
            obj.style.opacity = (iCur + iSpeed) / 100;
        }
        else {
            obj.style[attr] = iCur + iSpeed + 'px';
        }
    }

    if (bStop) {
        clearInterval(obj.timer);
        obj.timer = null;

        if (fnEnd) {
            fnEnd();
        }
    }

    obj.lastMove = (new Date()).getTime();
}
///////////////////////
window.onload = function () {
    var oBtn = document.getElementById('but');
    var oBottom = document.getElementById('miaov_bottom');
    var oBox = document.getElementById('miaov_box');
    var oBtnClose = document.getElementById('btn_close');

    var initBottomRight = parseInt(getStyle(oBottom, 'right'));
    var initBoxBottom = parseInt(getStyle(oBox, 'bottom'));

    oBtn.onclick = function () {
        startMove(oBottom, { right: 0 }, function () {
            oBox.style.display = 'block';
            startMove(oBox, { bottom: 0 });
        });
        oBtn.className = 'but_hide';
    };
    oBtnClose.onclick = function () {
        startMove(oBox, { bottom: initBoxBottom }, function () {
            oBox.style.display = 'none';
            startMove(oBottom, { right: initBottomRight }, function () {
                oBtn.className = 'but_show';
            });
        });
    };
};
/////切换选项卡
function gopage(n) {
    var tag = document.getElementById("list_nav").getElementsByTagName("li");
    var taglength = tag.length;

    for (i = 1; i <= taglength; i++) {
        document.getElementById("m" + i).className = "";
        document.getElementById("c" + i).style.display = 'none';
    }
    document.getElementById("m" + n).className = "on";
    document.getElementById("c" + n).style.display = '';
}

posted @ 2012-05-03 10:31 Jimmy-Lee 阅读(556) 评论(0) 编辑收藏举报

刷新页面返回顶部

Angelov

你所浪费的今天，是昨天死去的人奢望的明天。你所厌恶的现在，是未来的你回不去的曾经

土豆右下角弹出层效果

公告