- 所在位置：
- 首页 >
- 编程技术 >
- JavaScript >
- 使用jquery怎样实现图片悬浮的效果？
使用jquery怎样实现图片悬浮的效果？
Admin 2021-08-30 群英技术资讯 663 次浏览
这篇文章给大家分享的是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>
思路解释
就是从一个状态变道另外一个状态，给予和拿走一个类的事。
关于jquery实现图片悬浮就介绍到这，上述实例具有一定的参考价值，感兴趣的朋友可以参考学习，希望能对大家有帮助，想要了解更多jquery实现图片展示的炫酷效果，大家可以关注群英网络其它相关文章。
文本转载自脚本之家
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。
猜你喜欢
-
用three.js画地铁逃生三维带箭头路线的方法及代码是什么
遇到一个需求，在一个地铁场景里展示逃生路线，为了画这个箭头，我花费了很多时间精力，下面基于使用three.js 绘制三维带箭头线的详细过程分享给大家，感兴趣的朋友一起看看吧
-
vue中怎样安装和导入wavesurfer解决音频问题
目录1.安装wavesurfer2.在页面导入3.上源码4.注释：之前给大家介绍过vue中音频wavesurfer.js的使用方法，感兴趣的朋友可以点击查看，今天继续给大家普及vue解决音频可视化播放，使用wavesurfer.js问题，效果图如下所示：上效果：1.安装wavesurfernpm install wav
-
Vue分页组件封装的实现是怎样的，代码是什么
这篇文章主要为大家详细介绍了Vue分页组件的封装方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
-
基于Vue如何制作记住账号密码功能，方法及过程是什么
这篇文章主要介绍了Vue实现记住账号密码功能,用户登录时若勾选“记住我”功能选项，则将登录名和密码（加密后）存入本地缓存，下次登录页面加载时自动获取保存好的账号和密码（需解密），回显到登录输入框中，下面分享我实现的具体步骤，需要的朋友可以参考下
-
React路由传参方法有哪些？怎样实现？
React路由传参方法有哪些？我们知道React中传参方式有很多，通过路由传参的方式也是必不可少的一种。因此，这篇文章就给大家分享一下React路由传参方法及实现，感兴趣的朋友就继续往下看吧。
推荐内容
成为群英会员,开启智能安全云计算之旅
立即注册
Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008
