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