参考连接 ：http://interface.eyecon.ro/demos/fisheye.html
这里有更多参考： http://interface.eyecon.ro/demos/?page=demos
因为用jq和vue3结合，会比较麻烦，于是乎就自己拿代码，手动改造了一个
顶部fisheye效果
image.png
底部fisheye效果
image.png
以上效果是完全没有加入图片和样式的效果，如果需要，可以根据自己的需要调整样式
上代码：MacDockFishEyeMenu.vue
<template>
<template v-if="direction === 'top'">
<div class="fisheye" id="fisheye" ref="dockRef">
<div class="fisheyeContainter" ref="containerRef">
<a v-for="item in itemMenus" :key="item.id" class="fisheyeItem" href="javascript:void(0)" @click="item.click">
<div>
{{ item.title }}
<div style="height: 15px"> </div>
</div>
</a>
</div>
</div>
</template>
<template v-if="direction === 'bottom'">
<div class="fisheye" id="fisheye2" ref="dockRef">
<div class="fisheyeContainter" ref="containerRef">
<a v-for="item in itemMenus" :key="item.id" class="fisheyeItem2" href="javascript:void(0)" @click="item.click">
<div>
{{ item.title }}
<div style="height: 15px"> </div>
</div>
</a>
</div>
</div>
</template>
</template>
<script setup lang="ts">
import { nextTick } from "process";
import { ref, onMounted } from "vue";
const dockRef = ref();
const containerRef = ref();
const itemMenus = ref([]);
const direction = ref('bottom')
const build = (itemMenuList ,options , valign="bottom")=> {
itemMenus.value = itemMenuList;
direction.value =valign;
nextTick(() => {
const el = dockRef.value;
el.fisheyeCfg = {
items: containerRef.value.getElementsByTagName("a"),
container: containerRef.value,
pos: getPosition(el),
...options,
};
positionContainer(el, 0);
window.addEventListener("resize", () => {
el.fisheyeCfg.pos = getPosition(el);
positionContainer(el, 0);
positionItems(el);
});
positionItems(el);
// 如果是图片，可以考虑使用这个，鼠标移入显示文字
// el.fisheyeCfg.items.forEach((item) => {
// item.getElementsByTagName(el.fisheyeCfg.itemsText)[0].style.display =
// "none";
// // mouseover
// item.addEventListener("mouseover", () => {
// item.getElementsByTagName(el.fisheyeCfg.itemsText)[0].style.display =
// "block";
// });
// // mouseout
// item.addEventListener("mouseout", () => {
// item.getElementsByTagName(el.fisheyeCfg.itemsText)[0].style.display =
// "none";
// });
// });
document.addEventListener("mousemove", (e) => {
var pointer = getPointer(e);
var toAdd = 0;
if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == "center") {
var posx =
pointer.x -
el.fisheyeCfg.pos.x -
(el.offsetWidth -
el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length) /
2 -
el.fisheyeCfg.itemWidth / 2;
} else if (el.fisheyeCfg.halign && el.fisheyeCfg.halign == "right") {
var posx =
pointer.x -
el.fisheyeCfg.pos.x -
el.offsetWidth +
el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length;
} else {
var posx = pointer.x - el.fisheyeCfg.pos.x;
}
var posy = Math.pow(
pointer.y - el.fisheyeCfg.pos.y - el.offsetHeight / 2,
2
);
for (let i = 0; i < el.fisheyeCfg.items.length; i++) {
const nr = el.fisheyeCfg.items[i];
var distance = Math.sqrt(
Math.pow(posx - i * el.fisheyeCfg.itemWidth, 2) + posy
);
distance -= el.fisheyeCfg.itemWidth / 2;
distance = distance < 0 ? 0 : distance;
distance =
distance > el.fisheyeCfg.proximity
? el.fisheyeCfg.proximity
: distance;
distance = el.fisheyeCfg.proximity - distance;
var extraWidth =
(el.fisheyeCfg.maxWidth * distance) / el.fisheyeCfg.proximity;
var extraHeight =
(el.fisheyeCfg.maxHeight * distance) / el.fisheyeCfg.proximity;
nr.style.width = el.fisheyeCfg.itemWidth + extraWidth + "px";
nr.style.height = el.fisheyeCfg.itemHeight + extraHeight + "px";
nr.style.left =
el.fisheyeCfg.itemWidth * i + i * el.fisheyeCfg.gap + toAdd + "px";
toAdd += extraWidth;
}
// positionContainer(el, toAdd);
});
dockRef.value.addEventListener("mouseout", (e) => {
positionItems(el);
});
window.addEventListener("mouseleave", function () {
positionItems(el);
});
document.addEventListener("mouseleave", function () {
positionItems(el);
});
});
};
const getPointer = (event) => {
var x =
event.pageX ||
event.clientX +
(document.documentElement.scrollLeft || document.body.scrollLeft) ||
0;
var y =
event.pageY ||
event.clientY +
(document.documentElement.scrollTop || document.body.scrollTop) ||
0;
return { x: x, y: y };
};
const getPosition = (e) => {
var x = 0;
var y = 0;
var es = e.style;
var restoreStyles = false;
if (e.style.display == "none") {
var oldVisibility = es.visibility;
var oldPosition = es.position;
restoreStyles = true;
es.visibility = "hidden";
es.display = "block";
es.position = "absolute";
}
var el = e;
while (el) {
x +=
el.offsetLeft +
(el.currentStyle && !isOpera()
? parseInt(el.currentStyle.borderLeftWidth) || 0
: 0);
y +=
el.offsetTop +
(el.currentStyle && !isOpera()
? parseInt(el.currentStyle.borderTopWidth) || 0
: 0);
el = el.offsetParent;
}
el = e;
while (el && el.tagName && el.tagName.toLowerCase() != "body") {
x -= el.scrollLeft || 0;
y -= el.scrollTop || 0;
el = el.parentNode;
}
if (restoreStyles == true) {
es.display = "none";
es.position = oldPosition;
es.visibility = oldVisibility;
}
return { x: x, y: y };
};
const positionContainer = (el, toAdd) => {
if (el.fisheyeCfg.halign)
if (el.fisheyeCfg.halign == "center")
el.fisheyeCfg.items[0].style.left =
(el.offsetWidth -
el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length) /
2 -
toAdd / 2 +
"px";
else if (el.fisheyeCfg.halign == "left")
el.fisheyeCfg.items[0].style.left =
-toAdd / el.fisheyeCfg.items.length + "px";
else if (el.fisheyeCfg.halign == "right")
el.fisheyeCfg.items[0].style.left =
el.offsetWidth -
el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length -
toAdd / 2 +
"px";
el.fisheyeCfg.items[0].style.width =
el.fisheyeCfg.itemWidth * el.fisheyeCfg.items.length + toAdd + "px";
};
const positionItems = (el) => {
if (itemMenus.value.length > 0) {
for (let i = 0; i < el.fisheyeCfg.items.length; i++) {
const nr = el.fisheyeCfg.items[i];
nr.style.width = el.fisheyeCfg.itemWidth + "px";
nr.style.left = el.fisheyeCfg.itemWidth * i + i * el.fisheyeCfg.gap + "px";
}
}
};
const myBrowser = () => {
var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
var isOpera = userAgent.indexOf("Opera") > -1;
if (isOpera) {
return "Opera";
} //判断是否Opera浏览器
if (userAgent.indexOf("Firefox") > -1) {
return "FF";
} //判断是否Firefox浏览器
if (userAgent.indexOf("Chrome") > -1) {
return "Chrome";
}
if (userAgent.indexOf("Safari") > -1) {
return "Safari";
} //判断是否Safari浏览器
if (
userAgent.indexOf("compatible") > -1 &&
userAgent.indexOf("MSIE") > -1 &&
!isOpera
) {
return "IE";
} //判断是否IE浏览器
};
const isOpera = () => {
return myBrowser() === "Opera";
};
defineExpose({
initFishEye: build
})
onMounted(() => {
});
</script>
<style scoped>
.fisheye {
text-align: center;
position: relative;
}
a.fisheyeItem2 {
text-align: center;
color: #e9f6f9;
font-weight: bold;
text-decoration: none;
bottom: 0;
/* background-image: url("/imgs/appcenter/group_default.png");
background-repeat: no-repeat;
background-size: 100% 100%; */
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
a.fisheyeItem2:hover {
/* background-image: url("/imgs/appcenter/group_select.png");
background-repeat: no-repeat;
background-size: 100% 100%; */
background-color: aquamarine;
}
.fisheyeItem2 img {
border: none;
margin: 5px auto 0 auto;
width: 100%;
}
.fisheyeContainter {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
}
#fisheye2 {
position: absolute;
width: 100%;
bottom: 50px;
display: flex;
justify-content: center;
align-items: center;
overflow: auto;
}
.fisheyeItem span,
.fisheyeItem2 span {
display: none;
}
a.fisheyeItem {
text-align: center;
color: #000;
font-weight: bold;
text-decoration: none;
background-color: green;
display: flex;
justify-content: center;
align-items: center;
}
a.fisheyeItem:hover {
background-color: aquamarine;
}
.fisheyeItem img {
border: none;
margin: 0 auto 5px auto;
width: 100%;
}
</style>
菜单测试代码 Test.vue
<template>
<div>
<MacDockFishEyeMenu ref="macDockMenuRef"></MacDockFishEyeMenu>
</div>
</template>
<script setup lang="ts">
import { onMounted ,ref} from 'vue';
import MacDockFishEyeMenu from './MacDockFishEyeMenu.vue'
const macDockMenuRef = ref();
onMounted(()=>{
setTimeout(() => {
//模拟请求
const itemMenus = [
{
id: 1,
icon: null,
title: "1111",
click: (evt) => { },
},
{
id: 2,
icon: null,
title: "2222",
click: (evt) => { },
},
{
id: 3,
icon: null,
title: "3333",
click: (evt) => { },
},
{
id: 4,
icon: null,
title: "4444",
click: (evt) => { },
},
{
id: 5,
icon: null,
title: "5555",
click: (evt) => { },
},
];
const options = {
maxWidth: 96, //单个菜单项，最大宽度
maxHeight: 65, //单个菜单项最大高度
itemsText: "span", //图片时，用这个来显示字符
itemWidth: 85, //单个菜单项默认宽度
itemHeight: 56, //单个菜单项默认高度
proximity: 80, // 不用改
alignment: "left", //不用改
halign: "center", // 不用改
gap: 10, // 两个菜单之间间距
}
macDockMenuRef.value.initFishEye(itemMenus,options,'top') ; //顶部
// macDockMenuRef.value.initFishEye(itemMenus,options,'bottom'); //底部
}, 100)
})
</script>
