網(wǎng)站首頁 編程語言 正文
使用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
相關(guān)推薦
- 2022-08-20 docker鏡像alpine中安裝oracle客戶端_docker
- 2022-10-14 VS Code注釋插件doxygen documentation generator
- 2022-05-08 Python與C語言分別完成排序流程_python
- 2022-04-26 Android?Jetpack?Compose實現(xiàn)列表吸頂效果_Android
- 2022-07-19 Linux ifconfig命令配置和顯示Linux系統(tǒng)網(wǎng)卡的網(wǎng)絡(luò)參數(shù)
- 2022-05-31 Python學(xué)習(xí)之加密模塊使用詳解_python
- 2022-05-12 寶塔面板配置SSL證書
- 2022-09-18 Python中Parser的超詳細(xì)用法實例_python
- 最近更新
-
- window11 系統(tǒng)安裝 yarn
- 超詳細(xì)win安裝深度學(xué)習(xí)環(huán)境2025年最新版(
- Linux 中運行的top命令 怎么退出?
- MySQL 中decimal 的用法? 存儲小
- get 、set 、toString 方法的使
- @Resource和 @Autowired注解
- Java基礎(chǔ)操作-- 運算符,流程控制 Flo
- 1. Int 和Integer 的區(qū)別,Jav
- spring @retryable不生效的一種
- Spring Security之認(rèn)證信息的處理
- Spring Security之認(rèn)證過濾器
- Spring Security概述快速入門
- Spring Security之配置體系
- 【SpringBoot】SpringCache
- Spring Security之基于方法配置權(quán)
- redisson分布式鎖中waittime的設(shè)
- maven:解決release錯誤:Artif
- restTemplate使用總結(jié)
- Spring Security之安全異常處理
- MybatisPlus優(yōu)雅實現(xiàn)加密?
- Spring ioc容器與Bean的生命周期。
- 【探索SpringCloud】服務(wù)發(fā)現(xiàn)-Nac
- Spring Security之基于HttpR
- Redis 底層數(shù)據(jù)結(jié)構(gòu)-簡單動態(tài)字符串(SD
- arthas操作spring被代理目標(biāo)對象命令
- Spring中的單例模式應(yīng)用詳解
- 聊聊消息隊列,發(fā)送消息的4種方式
- bootspring第三方資源配置管理
- GIT同步修改后的遠(yuǎn)程分支