jquery插件實現圖片懸浮
本文實例為大傢分享瞭jquery插件實現圖片懸浮的具體代碼,供大傢參考,具體內容如下
很常見的一個效果,就是點擊之後圖片懸浮出來展示
效果如下
代碼部分
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>做圖片懸浮</title> <script src="js/jquery-3.4.1.min.js"></script> <style> * { margin: 0px; padding: 0px; user-select: none; } ul { margin-left: 20px; } ul li{ width: 200px; } li img { width: 100%; } .float{ position: fixed; top: 10%; left: 10%; width: 80%; list-style: none; z-index: 99; } .float::before{ content: ''; position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 98; } </style> </head> <body> <ul> <li class="li"><img src="img/1.png" /></li> <li class="li"><img src="img/2.png" /></li> <li class="li"><img src="img/3.png" /></li> <li class="li"><img src="img/4.png" /></li> </ul> </body> </html> <script> $(".li").click(function() { $(this).toggleClass('float') }) </script>
思路解釋
就是從一個狀態變道另外一個狀態,給予和拿走一個類的事
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- None Found