jquery插件实现图片悬浮


Posted in jQuery onApril 16, 2021

本文实例为大家分享了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>

思路解释

就是从一个状态变道另外一个状态,给予和拿走一个类的事

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery操作之效果详解
May 19 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jQuery实现html table行Tr的复制、删除、计算功能
Jul 10 jQuery
jQuery列表检索功能实现代码
Jul 17 jQuery
vue单页应用中如何使用jquery的方法示例
Jul 27 jQuery
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
jQuery实现获取table中鼠标click点击位置行号与列号的方法
Oct 09 jQuery
jQuery 导航自动跟随滚动的实现代码
May 30 jQuery
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
Jquery $.map使用方法实例详解
Sep 01 jQuery
jquery插件实现轮播图效果
Oct 19 jQuery
jQuery实现影院选座订座效果
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
jQuery treeview树形结构应用
Mar 24 #jQuery
jQuery实现鼠标拖动图片功能
Mar 04 #jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 #jQuery
jquery实现广告上下滚动效果
Mar 04 #jQuery
html5以及jQuery实现本地图片上传前的预览代码实例讲解
Mar 01 #jQuery
You might like
PHP编程与应用
2006/10/09 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
php实现图片局部打马赛克的方法
2015/02/11 PHP
让Laravel API永远返回JSON格式响应的方法示例
2018/09/05 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
js 有框架页面跳转(target)三种情况下的应用
2013/04/09 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
jquery实现左右轮播图效果
2017/09/28 jQuery
快速搭建React的环境步骤详解
2017/11/06 Javascript
Vue的双向数据绑定实现原理解析
2020/02/17 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
2020/09/09 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
python非递归全排列实现方法
2017/04/10 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
python TKinter获取文本框内容的方法
2018/10/11 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
django迁移文件migrations的实现
2020/03/31 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
Python如何使用ConfigParser读取配置文件
2020/11/12 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
使用HTML和CSS实现的标签云效果(附demo)
2021/02/03 HTML / CSS
英国虚拟主机服务商:eUKhost
2016/08/16 全球购物
美国睫毛、眉毛精华液领导品牌:RevitaLash Cosmetics
2018/03/26 全球购物
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
艺术家策划的室内设计:Curious Egg
2019/03/06 全球购物
企划主管岗位职责
2013/12/12 职场文书
会计专业职业规划:规划自我赢取未来
2014/02/12 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
2015年检验科工作总结
2015/04/27 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
教师学习心得体会范文
2016/01/21 职场文书