直播短视频源码,动态需要用到点击图片展示预览效果的功能

简介: 直播短视频源码,动态需要用到点击图片展示预览效果的功能

直播短视频源码,动态需要用到点击图片展示预览效果的功能,具体实现此功能的代码如下:

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>图片点击效果</title>
  <style>
    .imgViewDom {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      z-index: 99999999;
      background: rgba(255, 255, 255, 0.8);
      overflow: auto;
      -webkit-box-align: center;
      -webkit-box-pack: center;
    }
    .clickimg img {
        cursor: -webkit-zoom-in;
        cursor: zoom-in;
    }
    .imgViewDom img {
      cursor: zoom-out;
  }
  </style>
</head>
 
<body>
 
  <div class="clickimg">
    <img alt="" height="642" src="https://ucc.alicdn.com/images/user-upload-01/20200730113910621.png" width="998">
    <img alt="" height="638" src="https://ucc.alicdn.com/images/user-upload-01/20200730113910632.png" width="1025">
  </div>
  <div class="imgViewDom"><img src="" alt=""></div>
</body>
 
</html>
<script src="./js/jquery-2.2.3.min.js"></script>
<script>
  $(function(){
    $(".clickimg img").click(function(){
      var imgs = this;
      var imgSrc=$(imgs).attr("src");
      //var imgStr='<img src="'+imgSrc+'">';
      $(".imgViewDom img").attr("src",imgSrc);
      $(".imgViewDom").css("display","-webkit-box");
    });
 
 
    
    $(".imgViewDom").click(function(){
      var box = this;
      $(box).find("img").attr("src","");
      $(box).hide();
    });
 
   
  })
  
</script>

以上就是关于直播短视频源码中点击图片展示预览效果的相关代码,更多内容欢迎关注之后的文章

目录
相关文章
|
8月前
|
搜索推荐 安全 数据挖掘
深度解析:销售易CRM、神州云动CRM与纷享销客CRM的品牌特色与核心优势
销售易CRM是销售易公司推出的一款专注于提升销售效率和客户满意度的客户关系管理软件。成立于2011年,总部位于北京,是国内领先的企业级CRM服务商之一。销售易CRM以“连接客户、赋能销售”为使命,提供移动化办公、全流程管理、数据分析与洞察及集成与扩展等核心功能,助力企业实现销售流程的数字化转型和客户关系的精细化管理。 神州云动CRM隶属于神州数码集团,提供全面的CRM解决方案,特别适合大中型企业。依托集团强大的技术实力,神州云动CRM具备多行业适配、智能数据分析、灵活定制化和稳定可靠的云服务等优势,帮助企业构建高效的客户管理体系,实现客户价值的最大化。
|
11月前
|
机器学习/深度学习 人工智能 自然语言处理
人工智能与机器学习:探索未来的技术边界
【10月更文挑战第18天】 在这篇文章中,我们将深入探讨人工智能(AI)和机器学习(ML)的基础知识、应用领域以及未来趋势。通过对比分析,我们将揭示这些技术如何改变我们的生活和工作方式,并预测它们在未来可能带来的影响。文章旨在为读者提供一个全面而深入的理解,帮助他们更好地把握这一领域的发展趋势。
|
7月前
|
缓存 运维 监控
Anolis OS深度集成运维利器 阿里云操作系统控制台上线
阿里云在百万服务器运维领域的丰富经验打造。
Anolis OS深度集成运维利器 阿里云操作系统控制台上线
|
图形学 开发者 搜索推荐
Unity Asset Store资源大解密:自制与现成素材的优劣对比分析,教你如何巧用海量资产加速游戏开发进度
【8月更文挑战第31天】游戏开发充满挑战,尤其对独立开发者或小团队而言。Unity Asset Store 提供了丰富的资源库,涵盖美术、模板、音频和脚本等,能显著加快开发进度。自制资源虽具个性化,但耗时长且需专业技能;而 Asset Store 的资源经官方审核,质量可靠,可大幅缩短开发周期,使开发者更专注于核心玩法。然而,使用第三方资源需注意版权问题,且可能需调整以适应特定需求。总体而言,合理利用 Asset Store 能显著提升开发效率和项目质量。
377 0
|
存储 Python
链表中插入节点
链表中插入节点
|
11月前
|
网络协议 JavaScript 数据安全/隐私保护
深入浅出:使用WebSocket打造实时Web应用
【10月更文挑战第2天】本文介绍了WebSocket的基本概念、工作原理以及如何在项目中实现WebSocket通信。希望通过本文,读者能够掌握WebSocket,并考虑在自己的项目中实现实时功能。
|
存储 自然语言处理 机器人
ROS2教程06 ROS2行动
这篇文章是关于ROS2(Robot Operating System 2)行动(Action)通信机制的教程,包括行动的概念、特点、命令行工具的使用,以及如何编写行动的客户端和服务器代码,并介绍了如何测试行动通信。
400 4
ROS2教程06 ROS2行动
|
算法 搜索推荐 Unix
快速指南: Go 1.19功能
快速指南: Go 1.19功能
|
边缘计算 Cloud Native
“论SOA在企业集成架构设计中的应用”必过范文,突击2024软考高项论文
SOA架构,即面向服务的架构,它将系统中的所有功能都拆分为一个个独立的服务单元。这些服务通过相互间的沟通与配合,共同完成了整体业务逻辑的运作。在SOA架构中有几个核心概念:服务提供者、服务使用者、服务注册中心、服务规范、服务合同,这些概念清晰地阐述了服务应如何被提
401 6
“论SOA在企业集成架构设计中的应用”必过范文,突击2024软考高项论文
|
SQL Java 调度
实时计算 Flink版产品使用问题之使用Spring Boot启动Flink处理任务时,使用Spring Boot的@Scheduled注解进行定时任务调度,出现内存占用过高,该怎么办
实时计算Flink版作为一种强大的流处理和批处理统一的计算框架,广泛应用于各种需要实时数据处理和分析的场景。实时计算Flink版通常结合SQL接口、DataStream API、以及与上下游数据源和存储系统的丰富连接器,提供了一套全面的解决方案,以应对各种实时计算需求。其低延迟、高吞吐、容错性强的特点,使其成为众多企业和组织实时数据处理首选的技术平台。以下是实时计算Flink版的一些典型使用合集。