我要实现窗体最大化,最小化,拖动,拉伸的特效谁有代码给我啊?


例如我打开一个页面后,在页面上面有一个类似于一个聊天窗体的这么一个东西吧,上面有最大话,最小化,按钮,并且可以拖动和拉伸



最主要的是最小化的时候可以让这个窗体并不是那种有一长方体而已变成一个小小的方块,然后我在点击这个方块的时候在展开。

8 个解决方案

#1


比较简单的…有一个jquery-easyui的window控件,这些功能倒是齐全

#2


百度一下,网上有很多

#3


我搜了是有很多,但是这个无法满足


最主要的是最小化的时候可以让这个窗体并不是那种有一长方体而已变成一个小小的方块,然后我在点击这个方块的时候在展开。

#4


谁帮我看看啊?都回家过年去了吗?

#5


jquery实现form窗口
http://www.jb51.net/article/24898.htm

#6



<!--临时写了个!不过拉伸的没实现,还没试验过!-->
<!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>
    <title>窗体最大化最小化拖动</title>
    <style type="text/css">
        #form{position:absolute;width:200px;top:0px;left:0px;display:none;z-index:2;}
        #formtop{height:20px;background:lightblue;width:200px;text-align:right;cursor:all-scroll;z-index:3}
        #formcontent{height:180px;background:yellow;}
        span{font-size:12px;background:red;color:White;cursor:pointer;}
    </style>
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
            var mini = false;
        $(document).ready(function(){
            var $form = $("#form");
            var $formtop = $("#formtop");
            var $formcontent = $("#formcontent");
            var $miniform = $("#miniform");
            var clientw = $(window).width();
            var clienth = $(window).height();
            var formw = $form.width();
            var formh = $form.height();
            var minitop;
            var move = false;
            $("a").click(function(){
                $form.css({"display":"block","top":(clienth-formh)/2,"left":(clientw-formw)/2})
            })
            $formtop.mousedown(function(e){
                move=true;
                e=e||window.event;
                var x = e.pageX;
                var y = e.pageY;
                var l = parseInt($form.css("left"));
                var t = parseInt($form.css("top"));
                var mousex = x-l;
                var mousey = y-t;
                $(document).mousemove(function(e1){
                    if(move){
                        e1=e1||window.event;
                        var x1 = e1.pageX;
                        var y1 = e1.pageY;
                        var resultx = x1-mousex;
                        var resulty = y1-mousey;
                        $form.css({"top":resulty,"left":resultx});
                    }
                })
                $(document).mouseup(function(){
                    move=false;
                })
            })
            $miniform.toggle(function(){
                mini=true;
                $form.animate({"top":clienth-$formtop.height(),"left":0-($form.width()-$miniform.width())},"fast",function(){
                    minitop = parseInt($form.css("top"));
                    $formcontent.css("display","none");
                    $miniform.html("最大化");
                })
            },function(){
                mini=false;
                $form.animate({"top":(clienth-formh)/2,"left":(clientw-formw)/2},"fast",function(){
                    $formcontent.css("display","block");
                    $miniform.html("最小化");
                })
            })
        })
    </script>
</head>
<body>
<a>弹出</a>
<div id="form">
    <div id="formtop"><span id="miniform">最小化</span></div>
    <div id="formcontent"></div>
</div>
</body>
</html>

#7


引用 6 楼 huangwenquan123 的回复:
HTML code

<!--临时写了个!不过拉伸的没实现,还没试验过!-->
<!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/1……





您的这个运行不了啊?页面只有两个字“弹出” 什么都没有啊?

#8


有引用jq库了吗?

注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
© 2014-2018 ITdaan.com 粤ICP备14056181号