前台是个什么东西---JQuery---几种控制div的UI操作 -

metallica_1860

浏览: 33611 次
性别:
来自: 天津

最近访客更多访客>>

Gin_Scotch

caiyuanmao

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

前台是个什么东西---JQuery---几种控制div的UI操作

博客分类：

前端技术

UI jQuery CSS JavaScript HTML

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script type="text/javascript" src="./jQuery_1_4.js">
        </script>
        <script>
            $(function(){
                //动画速度
                var speed = 2000;
                //*******************************************
                //弹出与收回 toggle
                //*******************************************
                //绑定事件处理
                $("#btnShow").click(function(event){
                    if ($("#btnShow").attr("aa") == "out") {
                        $("#btnShow").attr("aa", "in");
                        $("#btnShow").html("收回文字");
                    }
                    else {
                        $("#btnShow").attr("aa", "out");
                        $("#btnShow").html("弹出文字");
                    }
                    //取消事件冒泡
                    event.stopPropagation();
                    //设置弹出层位置
                    var offset = $(event.target).offset();
                    $("#divPop").css({
                        top: offset.top + $(event.target).height() + "px",
                        left: offset.left
                    });
                    //切换弹出层的显示状态
                    $("#divPop").toggle(speed);
                });
                //*******************************************
                //弹出,透明,消失 fadeTo
                //*******************************************
                $("#btnTm").click(function(event){
                    //设置弹出层的透明度
                    $("#divTm").fadeTo(0, 0.66);
                    //让弹出层透明显示
                    if ($("#divTm").css("display") == "none") {
                        $("#divTm").fadeIn(speed);
                    }
                    else {
                        $("#divTm").fadeOut(speed);
                    }
                });
                //*******************************************
                //弹出,透明,消失 animate
                //*******************************************
                $("#btnTmani").click(function(event){
					$("#divTmani").animate({
						"opacity": 'toggle',
						"top":$(window).height - $("#divTmani").height() - $("#divTmani").position().top
 					}, speed, function(){
						//回调函数,隐藏div
						$("#divTmani").hide();
					});
                });
                //*******************************************
                //逐渐变大 最后消失 animate
                //*******************************************
                $("#btnBig").click(function(){
                    $("#divBig").animate({
                        "opacity": "toggle",
                        "width": $(window).width() - 100,
                        "height": $(window).height() - 100
                    }, speed,function(){
						//回调函数,隐藏div
						$("#divBig").hide();
					});
                });
                
            });
        </script>
    </head>
    <body>
        <div>
            <br/>
            <br/>
            <br/>
            <button id="btnShow" aa="out">
                弹出文字
            </button>
            <button id="btnTm">
                透明消失
            </button>
            <button id="btnTmani">
                透明消失
            </button>
            <button id="btnBig">
                变大消失
            </button>
        </div>
        <!-- 弹出收回 -->
        <div id="divPop" style="background-color: #f0f0f0; 
 border: solid 1px #000000;
 position: absolute;
 display:none;
 width: 300px;
 height: 100px;">
            <div style="text-align: center;">
                弹出收回
            </div>
        </div>
        <!-- 透明消失 -->
        <div id="divTm" style="background-color: #f0f0f0; 
 border: solid 1px #000000;
 position: absolute;
 display:none;
 width: 300px;
 height: 100px;">
            <div style="text-align: center;">
                透明消失
            </div>
        </div>
        <!-- 透明消失 -->
        <div id="divTmani" style="background-color: #f0f0f0; 
 border: solid 1px #000000;
 position: absolute;
 display:none;
 width: 300px;
 height: 100px;">
            <div style="text-align: center;">
                透明消失
            </div>
        </div>
        <!-- 变大消失 -->
        <div id="divBig" style="background-color: #f0f0f0; 
 border: solid 1px #000000;
 position: absolute;
 display:none;
 width: 300px;
 height: 100px;">
            <div style="text-align: center;">
                变大消失
            </div>
        </div>
    </body>
</html>

分享到：

前台是个什么东西---JavaScript---页面上的 ... | 前台是个什么东西---JQuery---导航菜单

2010-05-21 11:43
浏览 1358
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

前台是个什么东西---JQuery---几种控制div的UI操作

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

前台是个什么东西---JQuery---几种控制div的UI操作

评论

发表评论

相关推荐

前台是个什么东西---JavaScript---一个验证码的小程序

前台是个什么东西---JQ&JS---一个排班的程序(JAVASWT改版)

前台是个什么东西---JavaScript---站在CSDN的肩膀上-->页面上的滚动广告图

前台是个什么东西---JavaScript---页面上的"今天是X年X月X日"

前台是个什么东西---JQuery---导航菜单

前台是个什么东西---JavaScript---JQuery简单测试ajax

前台是个什么东西---JavaScript---JS面向对象

前台是个什么东西---JavaScript---执行

前台是个什么东西---JavaScript语法集锦

最近访客更多访客>>