当前位置：首页 > 网页特效 > 窗口特效 >

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

时间：2013-05-09 11:40 来源：互联网作者：源码搜藏收藏推荐

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>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在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>

网页特效

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

窗口特效下载排行

最新文章