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. Python代码规范（PEP8）问题及解决

    转载:https://blog.csdn.net/Jason_Lewis/article/details/75386598 最近刚刚接触Python,为了养成好习惯,尽量保证自己写的代码符合PEP8代 ...

  2. 我们为什么要使用Spring Cloud？简介

    转载:https://blog.csdn.net/smallsunl/article/details/78778790 单体架构 在网站开发的前期,项目面临的流量相对较少,单一应用可以实现我们所需要的 ...

  3. ES6 箭头函数（arrow function）

    例行声明:接下来的文字内容全部来自 Understanding ECMAScript 6,作者是Nicholas C.Zakas,也就是大名鼎鼎的Professional JavaScript for ...

  4. Windows上Boost的编译步骤

    一.FQ下载Boost最新版本 官网:http://www.boost.org/ 假设解压到:D:\Applicaton\DevTools\boost\boost_1_65_1 二.使用VS编译器 c ...

  5. 通过HttpClient4.5模拟Form表单文件上传

    public static void main(String[] args) { CloseableHttpClient httpclient = HttpClients.createDefault( ...

  6. Nginx 访问日志分析

    0:Nginx日志格式配置 # vim nginx.conf ## # Logging Settings ## log_format access '$remote_addr - $remote_us ...

  7. JAVA遍历HashMap和ArrayList

    List Map 基础信息 HashMap 最近写程序经常需要遍历集合,所以总结一下内容: 一.简单实现 Map map = new HashMap(); for(Object o : map.key ...

  8. tcp线程聊天

    .ServerThread package serverclient; import java.io.BufferedReader; import java.io.InputStreamReader; ...

  9. Linux文件的软链接和硬链接

    1.Linux链接概念 Linux链接分两种,一种被称为硬链接(Hard Link).还有一种被称为符号链接(Symbolic Link).默认情况下.ln命令产生硬链接. 1.1索引节点 索引节点是 ...

  10. Shell与Bash

    1:Shell编程的本质 Shell的意思是“壳程序”,它是一个视窗,供我们交互. 系统中有许多负责不同功能的可执行文件,他们被添加到PATH变量后,我们就可以在Shell中通过命令行调用.这些这些可 ...