`
metallica_1860
  • 浏览: 32323 次
  • 性别: Icon_minigender_1
  • 来自: 天津
社区版块
存档分类
最新评论

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

UIjQueryCSSJavaScriptHTML 
阅读更多 

<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>
 
分享到：
| 前台是个什么东西---JQuery---导航菜单
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics