日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學(xué)無先后,達(dá)者為師

網(wǎng)站首頁 編程語言 正文

jquery實現(xiàn)移動端懸浮拖拽框_jquery

作者:暖初?? ? 更新時間: 2022-04-27 編程語言

使用jquery 實現(xiàn)了一個基礎(chǔ)的懸浮彈拖拽窗, 根據(jù)自己的需求去完善動效。 分享給大家供大家參考,具體如下:

演示效果

代碼塊

需要引入jquery , 引入本地或線上根據(jù)自己的情況修改





? 
? 
? 
? 移動端 拖拽按鈕
? 
? 

? 
? 



? 
? ?
? ? ?
? ?
?

CSS

基礎(chǔ)css 根據(jù)自己需求修改

.main {
? position: relative;
? overflow: hidden;
? width: 100vw;
? height: 100vh;
? background: pink;
? padding: 1px;
? box-sizing: border-box;
}
.circle-box {
? position: absolute;
? top: 200px;
? bottom: 0;
/* 如果初始化設(shè)置right, 需先隱藏left, left級別大于right*/
? /* left: 0; */
? right: 1px;
? width: 40px;
? height: 40px;
? line-height: 40px;
? border-radius: 50%;
? background-color: transparent;
? display: flex;
? justify-content: center;
? align-items: center;
? box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
? z-index: 999;
}
.circle-box .circle {
? width: 30px;
? height: 30px;
? border-radius: 50%;
? box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
? background-color: #fff;
? opacity: 0.5;

}

原文鏈接:https://blog.csdn.net/weixin_44406888/article/details/118159162

欄目分類
最近更新