酷屏门户-鼠标悬停更换背景图片

复制链接 | 收藏本帖

1926

楼主

需求场景：酷屏门户的链接组件上，鼠标悬停时背景图片更换成另一张图片，移出后变回原图。

设置方法：
Step1：酷屏门户中拖入链接组件设置背景图片为原图

Step2：门户page页属性中设置加载完成脚本

//支持移入移出的组件信息，
//id:链接组件id；enterurl:移入url地址，例如"url('../../vfs/root/products/eportal/pcportal/resources/templates/menu/top_right_bg1.jpg')";leaveurl:移出url地址，和移入相同的写法。
var mouseEven = [
{
id:"anchor1",
enterurl:"url('../../vfs/root/products/eportal/tupian/图标1.png')",
leaveurl:"url('../../vfs/root/products/eportal/tupian/图标2.png')"
},
{
id:"anchor2",
enterurl:"url('../../vfs/root/products/eportal/tupian/悬停图标.png')",
leaveurl:"url('../../vfs/root/products/eportal/tupian/移出图标.png')"
}
];
var anchorDom = $("div[widget-id='widget_anchor']");
anchorDom.hover(function(e){
var dataId = this.getAttribute("data-id");
for(var x=0,len=mouseEven.length;x<len;x++){
var oper = mouseEven[x];
if(dataId == oper.id){
this.style.backgroundImage = oper.enterurl;
}
}
},function(e){
var dataId = this.getAttribute("data-id");
for(var x=0,len=mouseEven.length;x<len;x++){
var oper = mouseEven[x];
if(dataId == oper.id){
this.style.backgroundImage = oper.leaveurl;
}
}
});