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用noConflict代替$的实现方法
Apr 12 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQuery Autocomplete简介_动力节点Java学院整理
Jul 17 jQuery
jQuery接受后台传递的List的实例详解
Aug 02 jQuery
jQuery实现的简单动态添加、删除表格功能示例
Sep 21 jQuery
[原创]jQuery实现合并/追加数组并去除重复项的方法
Apr 11 jQuery
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
jquery实现垂直手风琴导航栏
Feb 18 jQuery
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
Jquery cookie插件实现原理代码解析
Aug 04 jQuery
jQuery实现动态加载瀑布流
Sep 01 jQuery
jquery实现简易验证插件封装
Sep 13 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框架的优缺点对比分析
2014/12/25 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP基于简单递归函数求一个数阶乘的方法示例
2017/04/26 PHP
PHP中Cookie的使用详解(简单易懂)
2017/04/28 PHP
简单时间提示DEMO从0开始一直进行计时
2013/11/19 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
2014/09/28 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
jquery+html5制作超酷的圆盘时钟表
2015/04/14 Javascript
js数组去重的方法汇总
2015/07/29 Javascript
学习JavaScript设计模式之迭代器模式
2016/01/19 Javascript
VUE项目axios请求头更改Content-Type操作
2020/07/24 Javascript
[03:16]DOTA2完美大师赛小组赛精彩集锦
2017/11/22 DOTA
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python简单的函数定义和用法实例
2015/05/07 Python
简单理解Python中的装饰器
2015/07/31 Python
详解python 发送邮件实例代码
2016/12/22 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
python re模块findall()函数实例解析
2018/01/19 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
使用python求解二次规划的问题
2020/02/29 Python
Python pytesseract验证码识别库用法解析
2020/06/29 Python
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
Java servlet面试题
2012/03/04 面试题
银行实习自我鉴定
2013/10/12 职场文书
鲜花方阵解说词
2014/02/13 职场文书
《中国的气候》教学反思
2014/02/23 职场文书
2014年销售部工作总结
2014/12/01 职场文书
迎新生欢迎词
2015/01/23 职场文书
行政人事专员岗位职责
2015/04/07 职场文书
学校教师师德师风承诺书
2015/04/28 职场文书
python如何读取.mtx文件
2021/04/22 Python
JavaScript实现登录窗体
2021/06/22 Javascript
MySQL学习必备条件查询数据
2022/03/25 MySQL
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技