jQuery插件EasyDrag轻松实现JS拖动的效果

jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html

实现效果图:

分布实现
一、页面Html标签元素定义

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面加载时弹出一个对话框</title>
<body>
    <div class="btn">
        <a href="#" >点击使用360安全卫士</a>
    </div>

    <br>
    <div class="box">
        <h1><span><a>关闭</a></span>360安全卫士</h1>
        <p>
            <span class="info">欢迎使用360安全卫士[苏若年提醒您]</span>
            <img src="images/tbinfo.png"/> 
        </p>
    </div>
</body>
</html

二、定义页面样式,完成模块布局

    <style type="text/css">
        *{    padding: 0;margin: 0;    }

        /*定义页面整体样式*/
        body{    font-size: 12px;padding: 100px;    font-family: "微软雅黑"，normal;}

        /*定义触发按钮样式*/
        .btn a{    
            text-decoration: none; 
            display: block; 
            color: #DEF1DA; 
            background-color:  #47A85B; 
            width: 160px; 
            height: 30px; 
            line-height: 30px; 
            text-align: center; 
            border: 1px solid #87CE7A;
        }
        .btn a:hover{     font-weight: 800; box-shadow: 1px 2px #47A85B; background-color: #59BA46;    }

        /*定义弹出窗体的样式*/
        .box{    width: 580px; height: 260px; border: 1px solid #000; display: none;    }
        /*--弹窗窗体标题栏--*/
        .box h1{    
            height: :30px; 
            line-height: 30px; 
            font-size: 14px; 
            background-color: #59BA46; 
            padding-left: 10px;  
            color: #DEF1DA;        
        }
        /*--弹窗窗体关闭标签--*/
        .box span a{    
            float: right; 
            cursor: pointer; 
            background-color: #59BA46; 
            width: 45px; 
            text-align: center; 
            margin-right: 10px;        
            color: #DEF1DA; 
            display: block;        
        }
        .box span a:hover{    background-color: #87CE7A;      }
        /*--弹窗窗体内容面板--*/
        .box p{    padding: 30px;    }
        .box p .info{ color: #707070; padding: 9px;    }
    </style>

三、引入jquery插件与jquery.easydrag插件,事先事件触发

    <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.easydrag.handler.beta2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            
            $(".btn").click(function(){
                //点击按钮标签,显示层
                $(".box").show();
            });

            $("span").click(function(){
                //点击关闭span,隐藏层
                $(".box").hide();
            });

            //使用jquer.easydrag插件
            $(".box").easydrag();
        });
    </script>

这样我们单击按钮就会弹出提示框,该提示框可以鼠标触控在页面中拖动.点击关闭按钮可以隐藏弹出框.

实例完整代码

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>页面加载时弹出一个对话框</title>
    <script type="text/javascript" src="scripts/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="scripts/jquery.easydrag.handler.beta2.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            
            $(".btn").click(function(){
                //点击按钮标签,显示层
                $(".box").show();
            });

            $("span").click(function(){
                //点击关闭span,隐藏层
                $(".box").hide();
            });

            //使用jquer.easydrag插件
            $(".box").easydrag();
        });
    </script>
    <style type="text/css">
        *{    padding: 0;margin: 0;    }

        /*定义页面整体样式*/
        body{    font-size: 12px;padding: 100px;    font-family: "微软雅黑"，normal;}

        /*定义触发按钮样式*/
        .btn a{    text-decoration: none; display: block; color: #DEF1DA; background-color:  #47A85B; width: 160px; height: 30px; line-height: 30px; text-align: center; border: 1px solid #87CE7A;     }
        .btn a:hover{     font-weight: 800; box-shadow: 1px 2px #47A85B; background-color: #59BA46;    }

        /*定义弹出窗体的样式*/
        .box{    width: 580px; height: 260px; border: 1px solid #000; display: none;    }
        /*--弹窗窗体标题栏--*/
        .box h1{    height: :30px; line-height: 30px; font-size: 14px; background-color: #59BA46; padding-left: 10px;  color: #DEF1DA;        }
        /*--弹窗窗体关闭标签--*/
        .box span a{    float: right; cursor: pointer; background-color: #59BA46; width: 45px; text-align: center; margin-right: 10px;        color: #DEF1DA; display: block;        }
        .box span a:hover{    background-color: #87CE7A;      }
        /*--弹窗窗体内容面板--*/
        .box p{    padding: 30px;    }
        .box p .info{ color: #707070; padding: 9px;    }
    </style>
</head>
<body>
    <div class="btn">
        <a href="#" >点击使用360安全卫士</a>
    </div>

    <br>
    <div class="box">
        <h1><span><a>关闭</a></span>360安全卫士</h1>
        <p>
            <span class="info">欢迎使用360安全卫士[苏若年提醒您]</span>
            <img src="images/tbinfo.png"/> 
        </p>
    </div>
</body>
</html>

View Code

转载请注明出处:[http://www.cnblogs.com/dennisit/p/3229085.html]