jQuery插件EasyDrag轻松实现JS拖动的效果
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拖动的效果的更多相关文章
- 自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6
阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能 ...
- jQuery插件实例三:图片滚动[切换]效果一
图片切换效果在很多网站上都能看到,是一种常见的广告/活动宣传方式,通常位于网页上端.这个插件是众多图片切换效果的形式中的一种,数据源可在前端配置,也可从后台通JSON格式传输数据,当然,数据格式是固定 ...
- html select美化模拟jquery插件select2.js
代码展示:http://www.51xuediannao.com/demo.php 代码说明: select2.js是一个html select美化模拟类jquery插件,但是select2.js又远 ...
- 50个jQuery插件可将你的网站带到另一个高度
Web领域一直在发生变化并且其边界在过去的每一天都在发生变化(甚至不能以小时为计),随着其边界的扩展取得了许多新发展.在这些进步之中,开发者的不断工作创造了更大和更好的脚本,这些脚本以插件方式带来更好 ...
- 【转】2014年25款最好的jQuery插件
2014年25款最好的jQuery插件 来源:Specs' Blog-就爱PHP 时间:2014-12-30 10:24:10 阅读数:2267 分享到: 0 http://www.php10 ...
- 全屏滚动-jQuery插件实现
全屏滚动 <---很久没写了,这段忙了点,以后还是每周尽量写点东西---> 在很多情况下,我们需要页面的全屏滚动,尤其是移动端.今天简要的介绍一下全屏滚动的知识. 一.全屏滚动的原理 1. ...
- jquery 插件大全
1.jquery.roundabout.js 超棒的左右3D旋转式幻灯片jQuery插件 2.jquery validate.js 验证表单 3.jquery ui插件 对话框 日期 4.lhgdia ...
- 推荐60个jQuery插件(转)
jQuery插件jQuery Spin Button自定义文本框数值自增或自减 jQuery插件JQuery Pager分页器实现javascript分页功能 jQuery插件FontSizer实现J ...
- 16款创建CSS3动画的jQuery插件
jQuery插件是用来扩展jQuery原型对象的方法. 本文搜集了用来为你的站点创建CSS3动画的一些jQuery插件. 1. jQuery Smoove Smoove 简化了CSS3转换效果.使得页 ...
随机推荐
- 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 ...
- SpringBoot添加对jsp的支持
1.在pom.xml添加如下内容: <dependency> <groupId>org.apache.tomcat.embed</groupId> <arti ...
- HDS推出HUS中端阵列 文件、块和对象统一存储
http://storage.chinabyte.com/86/12320086.shtml http://storage.chinabyte.com/134/12324134.shtml 日立数据系 ...
- C++ 第二课:操作符号的优先级
优先级 操作符 1 () [] -> . :: ! ~ ++ -- 2 - (unary) * (dereference) & (addre ...
- 远程IPC种植木马
要实现代码例如以下: ///////////////////////////////////////////////////////////////////////////////////// typ ...
- Android 使用DDMS查看内存使用情况
- Openwrt15.05网关后pptp外拨失败的解决办法
路由器升级openwrt chaos_calmer 15.05版后发现NAT后面的客户端外拨pptp vpn服务器失败,经google后得知,在14.07版本中默认安装的又一个叫做 kmod-ipt- ...
- oracle批量更新之使用游标进行分批次更新的5种方式及速度比对
1.情景展示 一共有22w条数据, 需要将A表的主键更新至B表的指定字段,如何快速完成更新? 2.解决方案 声明: 解决方案不只一种,该文章只介绍快速游标法及代码实现: 两张表的ID和ID_CAR ...
- Publish to a Linux Production Environment
Publish to a Linux Production Environment By Sourabh Shirhatti In this guide, we will cover setting ...
- Win10激活KMS2.0
目前,发现的唯一能激活Window10的纯净版. 下载地址: http://pan.baidu.com/s/1bpvMRBx 好孩子看不见: http://pan.baidu.com/s/1bo8xP ...