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简单绑定单个事件的方法示例
Jun 10 jQuery
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
JQuery实现table中tr上移下移的示例(超简单)
Jan 08 jQuery
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery表单元素过滤选择器用法实例分析
Feb 20 jQuery
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
jquery实现轮播图特效
Apr 12 jQuery
jQuery开发仿QQ版音乐播放器
Jul 10 jQuery
详解jQuery的核心函数和事件处理
Feb 18 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发送短信代码分享
2015/08/11 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
2011/01/09 Javascript
js中字符替换函数String.replace()使用技巧
2011/08/14 Javascript
JS正则表达式获取分组内容的方法详解
2013/11/15 Javascript
用jQuery toggleClass 实现鼠标移上变色
2014/05/14 Javascript
深入理解JavaScript系列(31):设计模式之代理模式详解
2015/03/03 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
一个仿微博登陆邮箱提示框js开发案例
2016/07/28 Javascript
bootstrap实现每隔5秒自动轮播效果
2016/12/20 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
2017/03/08 Javascript
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
JS简单获得节点元素的方法示例
2018/02/10 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
Layui组件Table绑定行点击事件和获取行数据的方法
2018/08/19 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
微信小程序常用赋值方法小结
2019/04/30 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
Vue 同步异步存值取值实现案例
2020/08/05 Javascript
python进行文件对比的方法
2018/12/24 Python
Python GUI编程完整示例
2019/04/04 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
使用jupyter notebook运行python和R的步骤
2020/08/13 Python
python空元组在all中返回结果详解
2020/12/15 Python
阿玛尼美国官方网站:Armani.com
2016/11/25 全球购物
中学门卫岗位职责
2013/12/26 职场文书
春节活动策划方案
2014/01/24 职场文书
公司薪酬管理制度
2014/01/31 职场文书
吨的认识教学反思
2014/04/27 职场文书
投标人廉洁自律承诺书
2014/05/26 职场文书
大学生求职信例文
2014/06/29 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
公司离职证明范本(汇总)
2014/09/10 职场文书
党员干部反四风民主生活会对照检查材料思想汇报
2014/10/12 职场文书