您好,欢迎来到源码搜藏!分享精神,快乐你我!提示:担心找不到本站?在百度搜索“源码搜藏”,网址永远不丢失!
  • 首 页
  • 在线工具
  • 当前位置:首页 > 网页特效 > 窗口特效 >

    一个简单又漂亮的弹出层窗口效果

    时间:2013-05-09 11:40 来源:互联网 作者:源码搜藏 浏览:收藏 挑错 推荐 打印

    运行代码保存代码复制代码 提示:您可以先修改部分代码再运行,保存代码功能在Firefox下无效。

    一个只作了一些简单的弹出显示和隐藏。主要是想把一个标题和一个弹出菜单当成一个类来考虑

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="css/style.css" type="text/css" id="cssStyle"/>
    <style>
    .list{
     position:relative;;
     background:#eee;
     border:1px #ccc solid;
     margin:10px;
     height:30px;
     width:100px;
     cursor :pointer ;
    }
    .listShow{
     position:relative;
     background:#eff;
     border:1px #ddd solid;
     margin:10px;
     height:30px;
     width:100px;
     cursor :pointer ;
    }
    .comment{
     position:absolute;
     left:0;
     display:none;
     position:absolute;
     border:1px #ccc solid;
     background:#fee;
     width:200px;
     height:200px;
     overflow:hidden;
     z-index:100;
    }
    </style>
    </head>
    <body>
    <div class="" id="show">
    0
    </div>
    <div class="list" id="list1">1
     <div class="comment" id="comment1">aaaaaaaaaaaaffffffffff<br/>
     ddddddddddddddddd<br/>
     ddddddddddddd<br/>
     dddddddddd<br/>
     aaaaa</div>
    </div>
    <div class="list" id="list2">2
     <div class="comment" id="comment2">aaaaaaaaaaaaaaaaa</div>
    </div>
    <div class="list" id="list3">3
     <div class="comment" id="comment3">aaaaaaaaaaaaaaaaa</div>
    </div>
    <div class="list" id="list4">4
     <div class="comment" id="comment4">aaaaaaaaaaaaaaaaa</div>
    </div>
    <div class="list" id="list5">5
     <div class="comment" id="comment5">aaaaaaaaaaaaaaaaa</div>
    </div>
    <div class="list" id="list6">6
     <div class="comment" id="comment6">aaaaaaaaaaaaaaaaa</div>
    </div>
    </body>
    </html>
    <script>
        var zindex = 0;
        function $id(id)
        {
            return document.getElementById(id);
        }
        var Bind = function (object, fun)
        {
            var args = Array.prototype.slice.call(arguments).slice(2);
            return function ()
            {
                return fun.apply(object, args);
            }
        }
        function addEventHandler(oTarget, sEventType, fnHandler)
        {
            if (oTarget.addEventListener) { oTarget.addEventListener(sEventType, fnHandler, false); }
            else if (oTarget.attachEvent) { oTarget.attachEvent('on' + sEventType, fnHandler); }
            else { oTarget['on' + sEventType] = fnHandler; }
        }
        var Shower = function ()
        {
            this.list = null;
            this.comment = null;
            this.moveLeft = 80;   //弹出div的水平偏移距离
            this.moveTop = 20; //弹出div的竖直偏移距离
            this.height = 150; //弹出div的高
            this.width = 250;  //弹出div的宽
            this.time = 800;  //弹出div所用时间
            this.init = function (lisObj, comObj)
            {
                this.list = lisObj;
                this.comment = comObj;
                var _this = this;
                this._fnMove = Bind(this, this.move);
                (function ()
                {
                    var obj = _this;


                    addEventHandler(obj.list, "click", obj._fnMove);
                })();
            };
            this.move = function ()
            {
                var _this = this;
                var w = 0; //水平偏移
                var h = 0; //竖直偏移
                var height = 0; //弹出div的高
                var width = 0;  //弹出div的宽
                var t = 0;
                var startTime = new Date().getTime(); //开始执行的时间
                if (!_this.comment.style.display || _this.comment.style.display == "none")
                {
                    _this.comment.style.display = "block";
                    _this.comment.style.height = 0 + "px";
                    _this.comment.style.width = 0 + "px";
                    _this.list.style.zIndex = ++zindex;
                    _this.list.className = "listShow";
                    var comment = _this.comment.innerHTML;
                    _this.comment.innerHTML = "";  //去掉显示内容
                    var timer = setInterval(function ()
                    {
                        var newTime = new Date().getTime();
                        var timestamp = newTime - startTime;
                        _this.comment.style.left = Math.ceil(w) + "px";
                        _this.comment.style.top = Math.ceil(h) + "px";
                        _this.comment.style.height = height + "px";
                        _this.comment.style.width = width + "px";
                        t++;
                        var change = (Math.pow((timestamp / _this.time - 1), 3) + 1); //根据运行时间得到基础变化量
                        w = _this.moveLeft * change;
                        h = _this.moveTop * change;
                        height = _this.height * change;
                        width = _this.width * change;
                        $id("show").innerHTML = w;
                        if (w > _this.moveLeft)
                        {
                            clearInterval(timer);
                            _this.comment.style.left = _this.moveLeft + "px";
                            _this.comment.style.top = _this.moveTop + "px";
                            _this.comment.style.height = _this.height + "px";
                            _this.comment.style.width = _this.width + "px";
                            _this.comment.innerHTML = comment; //回复显示内容
                        }
                    }, 1, _this.comment);


                } else
                {
                    _this.hidden();


                }
            }
            this.hidden = function ()
            {
                var _this = this;
                var flag = 1;
                var hiddenTimer = setInterval(function ()
                {
                    if (flag == 1)
                    {
                        _this.comment.style.height = parseInt(_this.comment.style.height) - 10 + "px";
                    } else
                    {
                        _this.comment.style.width = parseInt(_this.comment.style.width) - 15 + "px";
                        _this.comment.style.left = parseInt(_this.comment.style.left) + 5 + "px";
                    }
                    if (flag == 1 && parseInt(_this.comment.style.height) < 10)
                    {
                        flag = -flag;
                    }


                    if (parseInt(_this.comment.style.width) < 20)
                    {
                        clearInterval(hiddenTimer);
                        _this.comment.style.left = "0px";
                        _this.comment.style.top = "0px";
                        _this.comment.style.height = "0px";
                        _this.comment.style.width = "0px";
                        _this.comment.style.display = "none";
                        if (_this.list.style.zIndex == zindex)
                        {
                            zindex--;
                        };
                        _this.list.style.zIndex = 0;
                        _this.list.className = "list";
                    }
                }, 1)
            }
        }
        window.onload = function ()
        {
            //建立各个菜单对象
            var shower1 = new Shower();
            shower1.init($id("list1"), $id("comment1"));
            var shower2 = new Shower();
            shower2.init($id("list2"), $id("comment2"));
            var shower3 = new Shower();
            shower3.init($id("list3"), $id("comment3"));
            var shower4 = new Shower();
            shower4.init($id("list4"), $id("comment4"));
            var shower5 = new Shower();
            shower5.init($id("list5"), $id("comment5"));
            var shower6 = new Shower();
            shower6.init($id("list6"), $id("comment6"));
        }
    </script>

    一个简单又漂亮的弹出层窗口效果由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/chuangkou/4658.html
    标签:网站源码