用jQuery怎样实现点击图片悬浮展示效果-群英

上一篇：CocosCreator预制体prefab的作用和用法是什么下一篇：CocosCreator消息分发是什么样的，如何理解

在实际应用中，我们有时候会遇到“用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 >