jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動效果
更新時間:2020年09月13日 16:34:38 作者:暗鎖讀客
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)鼠標(biāo)拖拽登錄框移動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jQuery鼠標(biāo)拖拽登錄框移動的具體代碼,供大家參考,具體內(nèi)容如下
1.jQuery代碼
<script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { // 點(diǎn)擊登錄跳轉(zhuǎn) $("a").click(function () { $("#bg,#login").css("display","block"); }) // 定義變量 var $mX; var $mY; var $move = false; // true是可以移動登錄框 // 鼠標(biāo)按下事件 $("#login").mousedown(function (event) { $(this).css("opacity",0.5); // 改變透明度 $move = true; // 得到鼠標(biāo)與登錄框原點(diǎn)之間的距離 $mX = event.pageX-parseInt($(this).css("left")); $mY = event.pageY-parseInt($(this).css("top")); }) // 鼠標(biāo)移動事件 $("#login").mousemove(function (event) { if($move){ // 得到登錄框要移動的量 $(this).css("left",(event.pageX-$mX)+"px") $(this).css("top",(event.pageY-$mY)+"px") } }).mouseup(function () { // 鼠標(biāo)彈起事件 $move = false; $(this).css("opacity",1); }) }) </script>
2.css
<style type="text/css"> *{ margin: 0; padding: 0; } h3{ display: block; width: 300px; height: 50px; text-align: center; line-height: 50px; background-color: #0076A9; } #login{ width: 300px; height: 200px; margin: 0 auto; position: absolute; top: 250px; left: 500px; border: 1px solid #000000; background-color: #FFFFFF; cursor: move; display: none; } table{ position: absolute; top: 50px; left: 0; width: 100%; height: 150px; text-align:center; } tr,td{ border: none; } tr{ height: 50px; } td{ padding: 0 5px 0 5px; } #bg{ width: 100%; height: 100%; background-color:#999999; position: absolute; top: 0; left: 0; display: none; } body{ width: 100%; height: 600px; } </style>
3.HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>登錄界面</title> </head> <body> <a href="javascript:;" >登錄</a> <div id="bg"></div> <form action="javascript:;" id="login" method=""> <h3>歡迎登錄!</h3> <table border="1" cellspacing="0" cellpadding="0"> <tr> <td align="right">用戶名:</td> <td align="left"><input type="text" name="userName"/></td> </tr> <tr> <td align="right">密碼:</td> <td align="left"><input type="password" name="pwd"/></td> </tr> <tr> <td align="center" colspan="2"> <input type="button" value="提交"/>       <input type="button" value="重置"/> </td> </tr> </table> </form> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery實(shí)現(xiàn)百度登錄框的動態(tài)切換效果
- JQuery Mobile 彈出式登錄框的實(shí)現(xiàn)方法
- jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
- jquery鼠標(biāo)放上去顯示懸浮層即彈出定位的div層
- jquery實(shí)現(xiàn)鼠標(biāo)懸浮停止輪播特效
- jquery懸浮提示框完整實(shí)例
- jquery-tips懸浮提示插件分享
- js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
- 使用jQuery UI的tooltip函數(shù)修飾title屬性的氣泡懸浮框
- jquery+CSS實(shí)現(xiàn)懸浮登錄框遮罩
相關(guān)文章
Jquery如何實(shí)現(xiàn)點(diǎn)擊時高亮顯示代碼
點(diǎn)擊時高亮顯示代碼的實(shí)現(xiàn)方法有很多,下面的示例使用jquery來實(shí)現(xiàn),需要的朋友可以了解下2014-01-01jquery 日期控件datepicker屬性詳細(xì)解析
本文是對jquery中日期控件datepicker的屬性進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-11-11JQuery選中checkbox方法代碼實(shí)例(全選、反選、全不選)
這篇文章主要介紹了JQuery選中checkbox方法代碼實(shí)例(全選、反選、全不選),本文直接給出代碼實(shí)例,需要的朋友可以參考下2015-04-04jquery插件star-rating.js實(shí)現(xiàn)星級評分特效
Bootstrap Star Rating是一個簡單而強(qiáng)大的jQuery插件實(shí)現(xiàn)星級分?jǐn)?shù)評級。支持像分?jǐn)?shù)星填充和RTL輸入先進(jìn)的功能。在利用純CSS-3造型使控制重點(diǎn)開發(fā)。該插件使用引導(dǎo)標(biāo)記和造型默認(rèn)情況下,但它可以覆蓋與其他任何CSS的標(biāo)記。2015-04-04