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. How to Sign in as a Different User in SharePoint 2013

    SharePoint used to have a menu option called "Sign in as Different User" in the top-right ...

  2. 理解JavaScript函数参数

    前面的话 javascript函数的参数与大多数其他语言的函数的参数有所不同.函数不介意传递进来多少个参数,也不在乎传进来的参数是什么数据类型,甚至可以不传参数. arguments javascri ...

  3. 【Nodejs】外研社一年级起各年级英语音频下载(缺456年级上)

    在 https://news.21cnjy.com/A/130/235/V729768.shtml 有各年级英语音频下载,用爬虫把能下的都下了,除了四五六年级上册的. 爬虫 http://www.cn ...

  4. 【Python】使用torrentParser1.02对单文件torrent的分析结果

    C:\Users\horn1\Desktop\python\41-torrentParser>python torrentParser.py 文件名=./5.torrent 文件结构: anno ...

  5. 阿里云centos 6安装iRedmail过程

    全新系统 yum update cd /root wget http://www.iredmail.com/iRedMail-0.8.7.tar.bz2 tar xvf iRedMail-0.8.7. ...

  6. 壮士断腕！WordPress宣布停止使用React

    WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站,也可以把WordPress当作一个内容管理系统(CMS)来使用. WordPr ...

  7. jQuery动画animate方法使用介绍

    用于创建自定义动画的函数. 返回值:jQuery animate(params, [duration], [easing], [callback]) 如果使用的是“hide”.“show”或“togg ...

  8. 机器学习中，使用NMS对框取优

    一.NMS实现代码 # http://www.pyimagesearch.com/2015/02/16/faster-non-maximum-suppression-python/ import nu ...

  9. [转]Spring MVC之@RequestMapping 详解

    前段时间项目中用到了REST风格来开发程序,但是当用POST.PUT模式提交数据时,发现服务器端接受不到提交的数据(服务器端参数绑定没有加任何注解),查看了提交方式为application/json, ...

  10. 利用 pywin32 操作 excel

    from win32com.client import Dispatch import win32com.client import time # 获取excel 对象 excel = win32co ...