资讯专栏INFORMATION COLUMN

坑爹的三角形导航实现思路

mingde / 328人阅读

摘要:使用监听中的元素的与事件,然后在中显示第二层中相同索引的元素,从而实现高亮,事件用于清除高亮

坑爹的三角形导航终于制作完成了,下面分享一下思路,先看最终效果:
http://mall.juesheng.com/act/butie3

基本思路:使用古老的 Image Mapping 技术,在图片上定义多边形锚点,然后监听每个锚点的鼠标事件,显示指定的元素,实现锚点的高亮,由于 Image Mapping 中的多边形锚点不支持样式化,需要用其他手段进行高亮,先贴出 DOM 结构:

/mall/act/butie3/tri_lt.png" width="110" height="109"> 古筝
/mall/act/butie3/tri_rb.png" width="114" height="114"> 钢琴
/mall/act/butie3/tri_lt.png" width="147" height="147"> 瑜伽
/mall/act/butie3/tri_lt.png" width="147" height="147"> 雅思
/mall/act/butie3/tri_rb.png" width="147" height="147"> 英语思维
/mall/act/butie3/tri_tr.png" width="147" height="147"> 舞蹈
/mall/act/butie3/tri_rb.png" width="147" height="147"> 吉他
/mall/act/butie3/tri_lt.png" width="146" height="146"> 少儿街舞
/mall/act/butie3/tri_lt.png" width="147" height="147"> 素描
/mall/act/butie3/tri_rb.png" width="113" height="112"> 艺考
/10x10.gif" width="639" height="359" usemap="#navMap" class="map-img" alt="导航图"> 钢琴 音乐 舞蹈 跆拳道 少儿英语 架子鼓 艺考 寒假强化班 跆拳道 钢琴

从 DOM 结构中可以看出,我们使用了三层结构:
一、map-layout-0,空元素,但它的样式中,定义了其背景图片为:

这是一个半透明的 PNG 图片

二、map-layout-1,这一层用来高亮锚点,每一个锚点对应一个高亮元素,用脚本控制显示隐藏,其中使用的 元素,即是高亮的三角形,其中,bt3_tri_lt.png、bt3_tri_tr.png、bt3_tri_rb.png 分别为:

之所以使用 img 元素而非 background,是因为需要对这些三角形进行缩放

三、class 为 map-img 的 img 元素及 map 元素,用来定义多边形锚点(这里全部是三角形),map 中的 area 数据,是用古董级网页设计软件 Dreamweaver 生成的,如图:

另外,这一层的 img 元素的 src 为一个 10 x 10 像素的透明 gif 图片,真正用于导航的地图,是第一层的背景图片

下面看看样式,用 LESS 写成:

.map-box {
    position: absolute;
    right: 10px;
    bottom: -3px;
    width: 639px;
    height: 359px;
}

.map-layout-0,
.map-layout-1,
.map-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.map-layout-0 {
    background: url("@{img}/mall/act/butie3/map.png") no-repeat;
}

.map-node {
    position: absolute;
    width: 169px;
    height: 169px;
    img {
        position: absolute;
        display: none;
    }
    em {
        position: absolute;
        color: #fff;
        font-size: 20px;
        .yahei;
    }
}
.map-node-0 {
    left: 119px;
    top: 64px;
    em {
        left: 15px;
        top: 20px;
    }
}
.map-node-1 {
    left: 94px;
    top: 85px;
    em {
        left: 57px;
        top: 67px;
    }
}
.map-node-2 {
    left: 61px;
    top: 197px;
    em {
        left: 27px;
        top: 28px;
    }
}
.map-node-3 {
    left: 243px;
    top: 15px;
    em {
        left: 28px;
        top: 26px;
    }
}
.map-node-4 {
    left: 204px;
    top: 52px;
    em {
        left: 54px;
        top: 99px;
    }
}
.map-node-5 {
    left: 204px;
    top: 197px;
    em {
        left: 80px;
        top: 26px;
    }
}
.map-node-6 {
    left: 349px;
    top: 34px;
    em {
        left: 82px;
        top: 89px;
    }
}
.map-node-7 {
    left: 350px;
    top: 180px;
    em {
        left: 7px;
        top: 28px;
    }
}
.map-node-8 {
    left: 494px;
    top: 67px;
    em {
        left: 26px;
        top: 28px;
    }
}
.map-node-9 {
    left: 443px;
    top: 152px;
    em {
        left: 59px;
        top: 64px;
    }
}

上面已经解释过,样式代码就不解释了,再看看脚本:

define(function(require) {
    "use strict"
    var event = require("j/fn/event")

    function toggle(el, act) {
        var index = $(el).index()
        $("#mapNodeList").find("img").eq(index)[act]()
        act == "show" && event.fire("mapIndexChange", index)
    }

    $("#navMap").on("mouseenter", "area", function() {
        toggle(this, "show")
    })
    .on("mouseleave", "area", function() {
        toggle(this, "hide")
    })
})

define 是 SeaJS 提供的模块定义函数,SeaJS 是模块化管理前端脚本,非常 Nice 的工具,但这不是重点。
使用 jQuery 监听 map 中的 area 元素的 mouseenter 与 mouseleave 事件,然后在 mouseenter 中显示第二层中相同索引的 img 元素,从而实现高亮,mouseleave 事件用于清除高亮

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/85489.html

相关文章

  • 爹的角形导航实现思路

    摘要:使用监听中的元素的与事件,然后在中显示第二层中相同索引的元素,从而实现高亮,事件用于清除高亮 坑爹的三角形导航终于制作完成了,下面分享一下思路,先看最终效果:http://mall.juesheng.com/act/butie3showImg(https://segmentfault.com/img/bVkFK9); 基本思路:使用古老的 Image Mapping 技术,在图片上定义...

    leap_frog 评论0 收藏0
  • 一次搞清楚移动端适配这几个爹的单位慨念

    摘要:真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...

    objc94 评论0 收藏0
  • 一次搞清楚移动端适配这几个爹的单位慨念

    摘要:真的是给我们新手学习移动端适配造成不少困惑英语真的很重要呀。细节高清屏上的处理其实并不是所有做移动端适配的人都一定会遇到这个问题。 一次搞清楚移动端这几个坑爹的单位慨念 目录: 一、让坑爹的单位,不再坑爹 二、需要准备什么样的设计稿 三、rem方案的原理和细节 高清屏上,位图的处理 高清屏上,关于border: 1px的处理 移动端屏幕的自动适配的处理 移动端屏幕上字体大小的处理...

    elva 评论0 收藏0

发表评论

0条评论

mingde

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<