溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

Jquery 仿手機(jī)操作彈出動(dòng)畫

發(fā)布時(shí)間：2020-07-18 17:04:00 來源：網(wǎng)絡(luò) 閱讀：327 作者：1120173856 欄目：web開發(fā)

 實(shí)現(xiàn)功能：

1、當(dāng)點(diǎn)擊按鈕的時(shí)，模仿手機(jī)操作欄彈出的效果！

Jquery代碼：

 

 

<script type="text/javascript">

$(document).ready(function(){

$(".btn1").click(function(){

if(flag){

flag = false;

$("#box").css("display","block").animate({top:"-=180px"});

}

 

 }); 

 });

var flag = true;

</script>

 

HTML代碼：

 

<body>

<div style="position:relative;">

<!--呢個(gè)系裝住全部內(nèi)容的DIV，調(diào)成相對！！ 滾動(dòng)條就會(huì)為呢個(gè)左上角的x y軸為始點(diǎn)開始計(jì)算 top left ;-->

    <div id="box" style="position:absolute; display:none; left:0px; top:180px; background:#999; height:60px; width:200px; ">

    <!--left,top的數(shù)值自己微調(diào)-->

    </div>

    

    <img src="p_w_picpaths/1.jpg" ><br>

    <button class="btn1">藍(lán)牙</button>

</div>

</body>

 

 

 

-----上傳了源文件，有需要的自己下載下來看看吧！

附件：http://down.51cto.com/data/2362188
向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手