福彩网站开发,申请电子邮箱免费注册,外包工好还是派遣工好,纯静态企业网站//鼠标悬浮效果
mounted() {this.setCurrentTask(0);
//对于id为mapAll的热区图#xff0c;设置鼠标放置在上面有一个颜色 fillColor填充颜色 strokeColor边框颜色 strokeWidth边框宽度 fillOpacity 是设置热区填充颜色的不透明度的属性。 alwaysOn:true 保持常量$(function(…//鼠标悬浮效果
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);
},
好的设计思路
templatediv!-- Task Display --divh2Task {{ currentTask.id }}: {{ currentTask.name }}/h2p{{ currentTask.details }}/pimg refmapAll idmapAll src../../assets/images/JIESHOUJI.png usemap#image-mapmap v-ifcurrentHotspots nameimage-maparea v-for(area, index) in currentHotspots :keyindex :idarea.id :titlearea.title :coordsarea.coords :shapearea.shape clickhandleClick(area)/map/div!-- Global Navigation Buttons --divbutton clickpreviousTask :disabledcurrentTaskIndex 0Previous/buttonbutton clicknextTask :disabledcurrentTaskIndex tasks.length - 1Next/button/div/div
/templatescript
import $ from jquery
import jquery/dist/jquery.maphilightexport 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 hotspotsthis.currentTaskIndex index;this.currentTask this.tasks[index];this.currentHotspots this.currentTask.hotspots;},previousTask() {// Display previous taskif (this.currentTaskIndex 0) {this.setCurrentTask(this.currentTaskIndex - 1);}},nextTask() {// Display next taskif (this.currentTaskIndex this.tasks.length - 1) {this.setCurrentTask(this.currentTaskIndex 1);}},handleClick(area) {// Handle click event for hotspotconsole.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 hotspotsthis.setCurrentTask(0);// 对于id为mapAll的热区图设置鼠标放置在上面有一个颜色 fillColor填充颜色 strokeColor边框颜色 strokeWidth边框宽度 fillOpacity 是设置热区填充颜色的不透明度的属性。 alwaysOn:true 保持常量$(function() {$(#mapAll).maphilight({fillColor: ff0000,strokeColor: FFFFFF,strokeWidth: 3,fillOpacity: 0.6,});});},
};
/scriptstyle scoped
/* Add styles for task layout */
/style
