Vue+jquery+jquery.maphilight实现图片热区高亮以及点击效果

news2024/11/28 10:32:43
//鼠标悬浮效果
mounted() {
  this.setCurrentTask(0);
//对于id为mapAll的热区图,设置鼠标放置在上面有一个颜色 fillColor填充颜色 strokeColor边框颜色 strokeWidth边框宽度 fillOpacity 是设置热区填充颜色的不透明度的属性。 alwaysOn:true 保持常量
  $(function() {
    $('#mapAll').maphilight({
      fillColor: 'ff0000',
      strokeColor: "FFFFFF",
      strokeWidth: 3,
      fillOpacity: 0.6,
    });
  });
},
//点击效果
handleHighlight(id) {
  const escapedId = id;
  const $element = $(`#${escapedId}`);
  const data = $element.mouseout().data('maphilight') || {};
  data.alwaysOn = true;
  data.fillColor = "feeeed";
  $element.data('maphilight', data).trigger('alwaysOn.maphilight');
  setTimeout(() => {
    const data = $element.mouseout().data('maphilight') || {};
    data.fillColor = "ff0000";
    data.alwaysOn = false;
    $element.data('maphilight', data).trigger('alwaysOn.maphilight');
  }, 300);
},

好的设计思路:

​
<template>
  <div>
    <!-- Task Display -->
    <div>
      <h2>Task {{ currentTask.id }}: {{ currentTask.name }}</h2>
      <p>{{ currentTask.details }}</p>
      <img ref="mapAll" id="mapAll" src="../../assets/images/JIESHOUJI.png" usemap="#image-map">
      <map v-if="currentHotspots" name="image-map">
        <area v-for="(area, index) in currentHotspots" :key="index" :id="area.id" :title="area.title" :coords="area.coords" :shape="area.shape" @click="handleClick(area)">
      </map>
    </div>

    <!-- Global Navigation Buttons -->
    <div>
      <button @click="previousTask" :disabled="currentTaskIndex === 0">Previous</button>
      <button @click="nextTask" :disabled="currentTaskIndex === tasks.length - 1">Next</button>
    </div>
  </div>
</template>

<script>
import $ from "jquery"
import 'jquery/dist/jquery.maphilight'

export default {
  data() {
    return {
      tasks: [
        {
          id: 1,
          name: '开始实验',
          details: '按On->显示自检->出现屏幕',
          hotspots: [
            { id: 1, alt: 'Power', title: 'Power', coords: '133,34,178,86', shape: 'rect' },
            { id: 2, alt: 'LockTest', title: 'LockTest', coords: '1059,150,1096,205', shape: 'rect' }
          ]
        }
        // Add more tasks here if needed
      ],
      currentTaskIndex: 0,
      currentTask: {},
      currentHotspots: []
    };
  },
  methods: {
    setCurrentTask(index) {
      // Set current task and associated hotspots
      this.currentTaskIndex = index;
      this.currentTask = this.tasks[index];
      this.currentHotspots = this.currentTask.hotspots;
    },
    previousTask() {
      // Display previous task
      if (this.currentTaskIndex > 0) {
        this.setCurrentTask(this.currentTaskIndex - 1);
      }
    },
    nextTask() {
      // Display next task
      if (this.currentTaskIndex < this.tasks.length - 1) {
        this.setCurrentTask(this.currentTaskIndex + 1);
      }
    },
    handleClick(area) {
      // Handle click event for hotspot
      console.log('Clicked hotspot:', area);
      this.handleHighlight(area.id)
      // Add your custom logic here
    },

    // maplight处理按钮特效
    handleHighlight(id) {
      const $element = $(`#${id}`);
      const data = $element.mouseout().data('maphilight') || {};
      data.alwaysOn = true;
      data.fillColor = "feeeed";
      $element.data('maphilight', data).trigger('alwaysOn.maphilight');
      // 使用 setTimeout 来延迟还原状态
      setTimeout(() => {
        const data = $element.mouseout().data('maphilight') || {};
        data.fillColor = "ff0000";
        data.alwaysOn = false;
        $element.data('maphilight', data).trigger('alwaysOn.maphilight');
      }, 300);
    },
  },
  mounted() {
    // Initialize current task and hotspots
    this.setCurrentTask(0);
    // 对于id为mapAll的热区图,设置鼠标放置在上面有一个颜色 fillColor填充颜色 strokeColor边框颜色 strokeWidth边框宽度 fillOpacity 是设置热区填充颜色的不透明度的属性。 alwaysOn:true 保持常量
    $(function() {
      $('#mapAll').maphilight({
        fillColor: 'ff0000',
        strokeColor: "FFFFFF",
        strokeWidth: 3,
        fillOpacity: 0.6,
      });
    });
  },
};
</script>

<style scoped>
/* Add styles for task layout */
</style>

​

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1535907.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

txt、pdf等文件转为一行一行的doccano数据集输入格式

文章目录 doccano 数据集导入简介代码实现代码运行结果代码公开 doccano 数据集导入 在Doccano 导入数据集时&#xff0c;使用TextLine的文件格式&#xff0c;导入的文件需要为一行一行文本的数据格式&#xff0c;每一行文本在导入Doccano后就是一条数据。 简介 主要工作说明…

【图像分类】基于深度学习的杂草类型识别(9种类别,ResNet网络)

写在前面: 首先感谢兄弟们的关注和订阅,让我有创作的动力,在创作过程我会尽最大能力,保证作品的质量,如果有问题,可以私信我,让我们携手共进,共创辉煌。(专栏订阅用户订阅专栏后免费提供数据集和源码一份,超级VIP用户不在服务范围之内,不想订阅专栏的兄弟们可以私信…

27-4 文件上传漏洞 - 黑名单绕过

环境准备:构建完善的安全渗透测试环境:推荐工具、资源和下载链接_渗透测试靶机下载-CSDN博客 一、黑名单绕过和黑白名单机制: 黑名单:黑名单中的文件不允许通过。白名单:白名单中的文件允许通过。二、黑白名单判断: 当输入一串后缀如"sfahkfhakj"时,黑名单不…

26 OpenCV 查找边缘

文章目录 findContours 发现边缘drawContours 绘制边缘大致流程示例 findContours 发现边缘 cv::findContours( InputOutputArray binImg, // 输入图像&#xff0c;非0的像素被看成1,0的像素值保持不变&#xff0c;8-bitOutputArrayOfArrays contours,// 全部发现的轮廓对象…

Linux服务器免密登录配置

假如有如下三台服务器&#xff1a; 192.168.32.101&#xff0c;192.168.32.102&#xff0c;192.168.32.103 第一步&#xff1a;每一台机器都执行如下命令&#xff0c;生成密钥文件&#xff0c;一路回车到底即可第二步&#xff1a;每一台机器都执行如下命令&#xff0c;设置主…

线程池实现“线程复用”的原理

线程池实现“线程复用”的原理 学习线程复用的原理&#xff0c;以及对线程池的 execute 这个非常重要的方法进行源码解析。 线程复用原理 我们知道线程池会使用固定数量或可变数量的线程来执行任务&#xff0c;但无论是固定数量或可变数量的线程&#xff0c;其线程数量都远远…

k8s-kubectl命令详解、Pod创建过程、Pod的生命周期、定制Pod、资源对象文件

集群管理 一、如何管理集群 kubectl是用于管理Kubernetes集群的命令行工具 二、语法格式&#xff1a; kubectl [command] [TYPE] [NAME] [flags] command&#xff1a;子命令&#xff0c;如create&#xff0c;get&#xff0c;describe&#xff0c;delete type&#xff1a;…

拼多多2023年实现营收2476亿 助力品质好物与消费升级双向奔赴

拼多多集团近日发布了截至去年12月31日的财务业绩报告&#xff0c;拼多多在2023年第四季度实现了889亿元的营收&#xff0c;同比增长了惊人的123%。而在全年范围内&#xff0c;拼多多的营收更是高达2476亿元&#xff0c;同比增长了90%。 去年是拼多多全面拥抱高质量发展的元年…

流水灯的实现

#include<reg51.h> //点亮一个LED灯&#xff0c;并使其闪烁 sbit LED0P2^0; void delay(int n) {int i;for(i0;i<n;i); } void main() {while(1){LED00; //亮delay(6000);LED01;delay(6000);} } #include<reg51.h> //实现流水灯 void delay(int n) {int i;fo…

Jenkins安装 Linux 更换镜像 安装插件

Jenkins安装 Linux 更换镜像 安装插件 前言 下面叙述了三种jenkins安装的方式,jenkins安装之前必须有java环境因为他是java写的… yum安装只能安装最新版本的jenkins,但是jenkins是java写的所以他强依赖java版本,当你的服务器的java版本与jenkins版本冲突时还需要给jenkins重…

学浪视频怎么保存到本地

现在随着知识付费的兴起&#xff0c;抖音也下场做知识付费&#xff0c;做了一个学浪平台&#xff0c;可是它却不提供下载按钮&#xff0c;但我们又需要把学浪视频保存到本地 这里就教大家如何将学浪视频保存到本地 由于有些小白不懂技术&#xff0c;他只想下载下来视频&#…

UnityShader(十九) AlphaBlend

上代码&#xff1a; Shader "Shader入门/透明度效果/AlphaBlendShader" {Properties{_MainTex ("Texture", 2D) "white" {}_AlphaScale("AlphaScale",Range(0,1))1.0}SubShader{Tags { "RenderType""Transparent&quo…

删除列表中指定索引对应的元素删除字典中指定键对应的元素operator.delitem(d, p)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 删除列表中指定索引对应的元素 删除字典中指定键对应的元素 operator.delitem(d, p) [太阳]选择题 关于operator.delitem()的使用方法和功能正确的是 import operator list [11, 22, 33, 44,…

实体框架EF(Entity Framework)简介

实体框架EF&#xff08;Entity Framework&#xff09;简介 文章目录 实体框架EF&#xff08;Entity Framework&#xff09;简介一、概述二、O/R Mapping是什么采用O/R Mapping带来哪些好处 三、Entity Framework架构3.1 下图展示了Entity Framework的整体架构3.2 Entity Framew…

STL中 function 源码解析

1. function 本文基于 GCC 9.4 function 的作用就是将各种仿函数的调用统一起来&#xff1b; 1.1 类中非静态成员函数指针为什么是16字节 auto cptr &A::myfunc; 类中非静态成员函数 &#xff0c;其类型为 void (A::*)(int) auto rptr print_num; 普通函数对应汇…

MyBatis-Plus 实用工具:SqlHelper 让你的数据库操作更得心应手

一、SqlHelper是什么&#xff1f; SqlHelper 是MyBatis-Plus的一款SQL 辅助工具类&#xff0c;提供了一些常用的方法&#xff0c;简便我们的操作&#xff0c;提高开发效率。文档 二、示例代码 public class SqlHelperDemo {public static void main(String[] args) {// 示例…

【spring】@Lazy注解学习

Lazy介绍 Lazy 注解是一个配置注解&#xff0c;用于指示 Spring 容器在创建 bean 时采用延迟初始化的策略。这意味着&#xff0c;除非 bean 被实际使用&#xff0c;否则不会被创建和初始化。 在 Spring 框架中&#xff0c;默认情况下&#xff0c;所有的单例 bean 在容器启动时…

运用YOLOv5实时监测并预警行人社交距离违规情况

YOLO&#xff08;You Only Look Once&#xff09;作为一种先进的实时物体检测算法&#xff0c;在全球范围内因其高效的实时性能和较高的检测精度受到广泛关注。近年来&#xff0c;随着新冠疫情对社交距离管控的重要性日益凸显&#xff0c;研究人员开始将YOLO算法应用于社交距离…

关于Count,FPKM,TPM,RPKM等表达量的计算及转换 | 干货

原文链接:关于Count,FPKM,TPM,RPKM等表达量的计算及转换 | 干货 写在前面 今天使用count值转化TPM,或是使用FPKM转换成TPM。这样的教程,我们在前面已经出国一起相对比较详细的教程了,一文了解Count、FPKM、RPKM、TPM | 相互间的转化,在这个教程中,我们也归纳了各个数…

【力扣hot100】128.最长连续序列

给定一个未排序的整数数组 nums &#xff0c;找出数字连续的最长序列&#xff08;不要求序列元素在原数组中连续&#xff09;的长度。 请你设计并实现时间复杂度为 O(n) 的算法解决此问题。 示例 1&#xff1a; 输入&#xff1a;nums [100,4,200,1,3,2] 输出&#xff1a;4 解…