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. A Complete ActiveX Web Control Tutorial

    A Complete ActiveX Web Control Tutorial From: https://www.codeproject.com/Articles/14533/A-Complete- ...

  2. 使用FractionSlider生成的视差幻灯效果原型

    在线演示 本地下载 非常棒的jQuery插件,帮助你创建超酷的视差效果幻灯!

  3. EventSource 对象用于接收服务器发送事件通知,是网页自动获取来自服务器的更新

    //--------------------------------客户端代码----------------------------- if(typeof(EventSource) !== &quo ...

  4. XWindow、Server、Client和QT、GTK之间的关系

    X WINDOW X Window从逻辑上分为三层:X Server.X Client和X协议.最底层的X Server(X服务器)主要处理输入/输出信息并维护相关资源,它接受来自键盘.鼠标的操作并将 ...

  5. Javascript中怎样获取统一管理的Java提示语

    项目开发中,各个页面.各个业务操作都会使用提示语.面对这么多message,更好的方式是统一管理这些消息. 这样在做国际化的时候进行统一处理也变的方便. 推荐方案使用数据库来管理全部提示语,在项目启动 ...

  6. bootstrap设计站点中加入代码高亮插件

    这款插件的名字叫做google-code-prettify 使用该插件之前的效果: 使用插件之后的效果: 接下来说步骤: (1)下载两个文件 http://codecloud.sinaapp.com/ ...

  7. Java JDBC编程套路教程

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/5847020.html  学习Java开发,一个必须掌握的知识点,就是数据库操作.当程序需要用到的数据达到一定程 ...

  8. Spring Boot 启动载入数据 CommandLineRunner

    实际应用中,我们会有在项目服务启动的时候就去载入一些数据或做一些事情这种需求. 为了解决这种问题.Spring Boot 为我们提供了一个方法.通过实现接口 CommandLineRunner 来实现 ...

  9. 用python导出csv文件

    # coding: utf-8 import csv csvfile = open('csv.csv', 'wb') #打开方式还可以使用file对象 writer = csv.writer(csvf ...

  10. Oracle用分区表分区交换做历史数据迁移

    一. 说明: OLTP库中有些表数据量大,且每月有持续的大量数据添加.因为历史数据在此库中不再做訪问,而是在另1个OLAP库中做分析.所以会对历史数据迁移至OLAP库中.对这样的历史数据迁移的操作.较 ...