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="data: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="data:images/tbinfo.png"/>

        </p>

    </div>

</body>

</html>

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

jQuery插件EasyDrag轻松实现JS拖动的效果的更多相关文章

  1. 自写图片遮罩层放大功能jquery插件源代码，photobox.js 1.0版，不兼容IE6

    阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...

  2. jQuery插件实例三：图片滚动[切换]效果一

    图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...

  3. html select美化模拟jquery插件select2.js

    代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...

  4. 50个jQuery插件可将你的网站带到另一个高度

    Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...

  5. 【转】2014年25款最好的jQuery插件

    2014年25款最好的jQuery插件 来源:Specs' Blog-就爱PHP   时间:2014-12-30 10:24:10   阅读数:2267 分享到: 0 http://www.php10 ...

  6. 全屏滚动-jQuery插件实现

    全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...

  7. jquery 插件大全

    1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...

  8. 推荐60个jQuery插件(转)

    jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...

  9. 16款创建CSS3动画的jQuery插件

    jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...

随机推荐

  1. CentOS6.5安装nginx1.5.8时出现“cp: "conf/koi-win" 与"/usr/local/nginx/conf/koi-win" 为同一文件”的解决方法

    安装方法主要参考了:http://www.cnblogs.com/zhoulf/archive/2013/02/09/2909653.html这篇文章,出现“cp: "conf/koi-wi ...

  2. SpringBoot添加对jsp的支持

    1.在pom.xml添加如下内容: <dependency> <groupId>org.apache.tomcat.embed</groupId> <arti ...

  3. HDS推出HUS中端阵列 文件、块和对象统一存储

    http://storage.chinabyte.com/86/12320086.shtml http://storage.chinabyte.com/134/12324134.shtml 日立数据系 ...

  4. C++ 第二课：操作符号的优先级

           优先级     操作符 1 () [] -> .   ::         ! ~ ++ -- 2 - (unary) * (dereference)   & (addre ...

  5. 远程IPC种植木马

    要实现代码例如以下: ///////////////////////////////////////////////////////////////////////////////////// typ ...

  6. Android 使用DDMS查看内存使用情况

  7. Openwrt15.05网关后pptp外拨失败的解决办法

    路由器升级openwrt chaos_calmer 15.05版后发现NAT后面的客户端外拨pptp vpn服务器失败,经google后得知,在14.07版本中默认安装的又一个叫做 kmod-ipt- ...

  8. oracle批量更新之使用游标进行分批次更新的5种方式及速度比对

      1.情景展示 一共有22w条数据, 需要将A表的主键更新至B表的指定字段,如何快速完成更新? 2.解决方案 声明: 解决方案不只一种,该文章只介绍快速游标法及代码实现: 两张表的ID和ID_CAR ...

  9. Publish to a Linux Production Environment

    Publish to a Linux Production Environment By Sourabh Shirhatti In this guide, we will cover setting ...

  10. Win10激活KMS2.0

    目前,发现的唯一能激活Window10的纯净版. 下载地址: http://pan.baidu.com/s/1bpvMRBx 好孩子看不见: http://pan.baidu.com/s/1bo8xP ...