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. （纪录片）统计的乐趣 The Joy of Stats (2010)

    简介: 导演: 丹·希尔曼主演: Hans Rosling类型: 纪录片官方网站: www.bbc.co.uk/programmes/b00wgq0l制片国家/地区: 英国语言: 英语上映日期: 20 ...

  2. 修改mysql的默认端口号

    mysql的默认端口号是3306,修改端口号的话,找到mysql的安装目录,找到my.ini文件 修改这两处的3306值,重启mysql即可

  3. windows服务管理TopShelf

    http://docs.topshelf-project.com/en/latest/index.html 我曾经把名称错为Topself

  4. sql assist字符匹配智能提示

  5. loadrunner脚本001

    Action() { ; lr_start_transaction("login"); web_add_cookie("JSESSIONID=061460B7DFF2F7 ...

  6. Influxdb数据压缩

    环境: CentOS6.5_x64InfluxDB版本:1.1.0 数据压缩可以参考: https://docs.influxdata.com/influxdb/v1.1/concepts/stora ...

  7. leetcode笔记：Bulls and Cows

    一. 题目描写叙述 You are playing the following Bulls and Cows game with your friend: You write down a numbe ...

  8. Android中怎样做到自己定义的广播仅仅能有指定的app接收

    今天没吊事.又去面试了,详细哪家公司就不说了,由于我在之前的blog中注明了那些家公司的名字,结果人家给我私信说我泄露他们的题目.好吧,我错了... 事实上当我们已经在工作的时候.我们能够在空暇的时间 ...

  9. 【JMeter】初识JMeter（1）

    一.JMeter介绍 JMeter是一款开源桌面应用软件,可以用来模拟用户负载来完成性能测试工作.JMeter的功能在版本升级的过程中已经十分强大,现在多数互联网公司都在使用JMeter来完成产品或者 ...

  10. V-rep学习笔记：机器人逆运动学解算

    IK groups and IK elements VREP中使用IK groups和IK elements来进行正/逆运动学计算,一个IK group可以包含一个或者多个IK elements: I ...