您的位置：首页 > Web前端 > JQuery

jQuery插件EasyDrag轻松实现JS拖动的效果

2013-07-31 23:37 841 查看

jquery.easydrag下载地址:http://ishare.iask.sina.com.cn/f/34289681.html

实现效果图:

<!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="images/tbinfo.png"/>
</p>
</div>
</body>
</html>

View Code

转载请注明出处:[/article/4929382.html]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航