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 相关文章推荐
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JS jQuery使用正则表达式去空字符的简单实现代码
May 20 jQuery
jQuery选择器之子元素选择器详解
Sep 18 jQuery
jQuery获取所有父级元素及同级元素及子元素的方法(推荐)
Jan 21 jQuery
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
jQuery实现的3D版图片轮播示例【滑动轮播】
Jan 18 jQuery
jQuery实现为table表格动态添加或删除tr功能示例
Feb 19 jQuery
Vue CLI3.0中使用jQuery和Bootstrap的方法
Feb 28 jQuery
jquery使用echarts实现有向图可视化功能示例
Nov 25 jQuery
jquery选择器和属性对象的操作实例分析
Jan 10 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
Zend的Registry机制的使用说明
2013/05/02 PHP
php预定义变量使用帮助(带实例)
2013/10/30 PHP
PHP+MYSQL会员系统的开发实例教程
2014/08/23 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
js和jquery对dom节点的操作(创建/追加)
2013/04/21 Javascript
解析vue中的$mount
2017/12/21 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
轻松学习JavaScript函数中的 Rest 参数
2019/05/30 Javascript
一个手写的vue放大镜效果
2019/08/09 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
详解python中的 is 操作符
2017/12/26 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Spring Cloud Feign高级应用实例详解
2019/12/10 Python
tensorflow ckpt模型和pb模型获取节点名称,及ckpt转pb模型实例
2020/01/21 Python
构建高效的python requests长连接池详解
2020/05/02 Python
python中如何写类
2020/06/29 Python
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
德国网上药房:Apotal
2017/04/04 全球购物
澳洲女装时尚在线:Blue Bungalow
2018/05/05 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
linux下进程间通信的方式
2014/12/23 面试题
大学本科毕业生求职信范文
2013/12/18 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
工商局调档介绍信
2015/10/22 职场文书
导游词之山西祁县乔家大院
2019/10/14 职场文书
抖音短视频(douyin)去水印工具的实现代码
2021/03/30 Javascript
mysql死锁和分库分表问题详解
2021/04/16 MySQL
基于Redis的List实现特价商品列表功能
2021/08/30 Redis
sass 常用备忘案例详解
2021/09/15 HTML / CSS
2021年国产动漫公司排行前十名,玄机科技上榜,第二推出过铠甲勇士
2022/03/18 杂记
mysql 获取时间方式
2022/03/20 MySQL
Python绘制散点图之可视化神器pyecharts
2022/07/07 Python