浮窗插件

時間  2019-11-17
標籤 插件 简体版
原文   原文鏈接

<!DOCTYPE html>
<html lang="en">css

    <head>
        <meta charset="UTF-8">
        <title>移動窗口</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 1000px;
                background: #eee;
            }
            /*示例1*/
            
            #move_port {
                position: fixed;
                width: 15%;
                min-height: 150px;
                left: 0;
                top: 0;
                cursor: pointer;
                background: #2aabd2;
                z-index: 10000; //調整層級
            }
            /*示例2*/
            
            .move_div {
                position: fixed;
                width: 360px;
                height: 200px;
                left: 0;
                top: 0;
                cursor: pointer;
                background: #d2435c;
            }
            /*示例3*/
            
            .d0 {
                position: relative;
                width: 600px;
                height: 500px;
                margin: 50px auto;
                background: #ddd;
            }
            
            .d1 {
                position: absolute;
                width: 120px;
                min-height: 80px;
                left: 0;
                top: 0;
                cursor: pointer;
                background: #d2a12e;
            }
            /*示例4*/
            
            .d2 {
                position: fixed;
                left: 0;
                top: 0;
                width: 500px;
                height: 300px;
                background: #cc90c9;
            }
            
            .d3 {
                position: absolute;
                width: 60px;
                min-height: 80px;
                left: 0;
                top: 0;
                cursor: pointer;
                background: #74d233;
            }
        </style>
    </head>html

    <body>
        <div id="move_port">
            <h3>示例一:相對於body,從左上角開始移動</h3>
            <p>
                id爲:move_port
                <br> 調用方法時傳一個參數,其餘默認:
                <br> move_obj("#move_port");
            </p>
        </div>
        <div class="move_div">
            <h3>示例二:相對於body,從指定位置開始移動</h3>
            <p>
                class爲:move_div
                <br> 調用方法時傳部分參數,空字符項爲默認:
                <br> move_obj(".move_div",'','',10,10,800,500,100);
                <br> 空字串僅起佔位做用,參數將設置爲默認值
            </p>
        </div>
        <div class="d0">
            <h3>示例三:相對於父級容器,從默認位置開始移動</h3>
            <p>
                class爲:d0
                <br> 調用方法時傳前三個參數,其餘默認:
                <br> move_obj(".d1",600,500);
                <br> 600,500爲父級容器大小,缺省參數將設置爲默認值
            </p>
            <p style="color: red">
                <b>傳參時,請注意起始位置參數不要超過移動範圍!</b>
            </p>
            <div class="d1">
                子級相對父級移動
            </div>
        </div>
        <div class="d2">
            <h3>示例四:自身相對body移動,子級相對父級移動</h3>
            <p>多個浮窗可用 <b>z-index</b> 調整顯示層級</p>
            <p>
                自身class爲:d2
                <br> 子級class爲:d3
                <br> 調用方法時分別調用:
                <br> move_obj(".d2",'','','','','',300,200);
                <br> move_obj(".d3",500,300);
                <br> 本身移動範圍爲父級容器大小
            </p>
            <div class="d3">
                子級
            </div>
        </div>
        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="js/move_port.js"></script>
        <script>
            /*調用移動浮窗方法並按順序傳入正確參數["obj",x,y,l,t,m],obj必填*/
            //示例:
            move_obj("#move_port");
            move_obj(".move_div", '', '', 10, 10, 800, 500, 100);
            move_obj(".d1", 600, 500);
            move_obj(".d2", '', '', '', '', '', 300, 200);
            move_obj(".d3", 500, 300);
        </script>
    </body>
</html>jquery

 

插件的move_port.jsapp

function move_obj(obj, move_w, move_h, x, y, l, t, m) {
    if (obj == undefined) {
        alert("方法調用錯誤,請傳入正確參數!");
        return;
    }
    move_w = (move_w == undefined || move_w == '') ? $(window).width() : move_w;
    move_h = (move_h == undefined || move_h == '') ? $(window).height() : move_h;
    x = (x == undefined || x == '') ? 3 : x;
    y = (y == undefined || y == '') ? 3 : y;
    l = (l == undefined || l == '') ? 0 : l;
    t = (t == undefined || t == '') ? 0 : t;
    m = (m == undefined || m == '') ? 80 : m;
    function moving() {
        x = (l >= move_w - $(obj).width() || l < 0) ? -x : x;
        y = (t >= move_h - $(obj).height() || t < 0) ? -y : y;
        l += x;
        t += y;
        $(obj).css({
            left: l,
            top: t
        });
    }
    var timer_move = setInterval(function() {
        moving();
    }, m);
    $(obj).mouseover(function() {
        $(this).children(".close_port").show();
        clearInterval(timer_move);
    });
    $(obj).mouseout(function() {
        $(this).children(".close_port").hide();
        timer_move = setInterval(function() {
            moving();
        }, m);
    });
    var close = "<div class=\"close_port\">×</div>";
    $(obj).append(close);
    $(".close_port").css({
        position: 'absolute',
        display: 'none',
        width: '20px',
        height: '20px',
        top: 0,
        right: 0,
        color: 'red',
        border: '1px solid red',
        background: '#ccc',
        textAlign: 'center',
        lineHeight: '20px',
        cursor: 'pointer'
    });
    $(obj).on('click', '.close_port', function() {
        $(obj).find('.close_port').trigger('mouseover');
        clearInterval(timer_move);
        $(this).parent().remove();
    })
}ide

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程