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转换效果.使得页 ...
随机推荐
- "Value does not fall within the expected range" with managed metadata fields
From: http://geekswithblogs.net/claraoscura/archive/2011/01/21/143569.aspx The problem: I have an ...
- .NET Framework 工具
您可以使用 .NET Framework 工具轻松创建.部署和管理面向 .NET Framework 的应用程序和组件. 此节中介绍的大部分 .NET Framework 工具将自动随 Visual ...
- Python爬虫实战(二):爬百度贴吧
代码: # _*_ coding:utf-8 _*_ import urllib import urllib2 import re class Tool: removingImg = re.compi ...
- 使用CocoaPods来做iOS程序的包依赖管理
前言 每种语言发展到一个阶段,就会出现相应的依赖管理工具, 或者是中央代码仓库.比如 Java: maven,Ivy Ruby: gems Python: pip, easy_install Node ...
- 微信小程序 - 使用字体图标(阿里云库)
实现 阿里图库:https://www.iconfont.cn/ CSS3:[attribute*=value] 选择器 步骤 1. 加入购物车 2. 下载代码解压,复制iconfont.css ap ...
- Spring ActiveMQ Caused By: javax.jms.IllegalStateException: Connection closed
根据 http://www.cnblogs.com/yshyee/p/7448808.html 进行JMS操作时,发送跟监听放到不同的项目中进行时,出现以下异常信息: org.springframew ...
- hibernate 02之helloworld
1.安装插件 安装方法说明(hibernatetools-.Final): Help --> Install New Software... Click Add... In dialog Add ...
- python unittest case运行失败重试
因为使用unittest进行管理case的运行.有时case因为偶然因素,会随机的失败.通过重试机制能够补充保持case的稳定性.查阅资料后发现,python的unittest自身无失败重试机制,可以 ...
- cnpm的使用
npm npm服务在国外,很多时候需要FQ才能正常使用,为此淘宝弄了一个国内的镜像,于是有了cnpm 安装cnpm 说明:因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,如果npm的 ...
- 给go程序添加命令行参数
操作系统: CentOS 6.9_x64 go语言版本: 1.8.3 问题描述 需要应用程序根据不同的配置文件访问不同的服务器,希望程序启动时可以指定配置文件. 解决方案 package main i ...