菱形块超链接的解决方案

使用场景

show.jpg

用到的主要技术

1.因为考虑到要兼容到ie8，ccs3的transform:rotate方案只能放弃，这里采用map描点法;
2.该案例的描点很简单，不展开说了，描点可以用这个描点工具网站。
3.这里还有个难点，因为矩形块区域存在堆叠效果，每个div只能通过absolute来定位。因为平级元素的absolute,后面的元素的z-indx（层级）是高于前面元素的。导致后面的元素会遮住前面的div的一角。

demo1.jpg

解决方案

1.html css

//html

            
            
        
//css
.link-area {
 position: absolute;
 width: 210px;
 height: 210px;
}
//这个css 是必要的 
.link-area:hover {
    z-index: 100;
}

这就实现了一个简单的area区域，usemap是和map标签的name属性来进行绑定的，和锚点的效果类似。其他参数参照map area参数查看。
.link-area:hover { z-index: 100; } //解决当前元素被后面元素遮掉问题
这里因为要map描点依赖img所以不能用背景图。hover改变图片的效果由后面的js动态拼接改变src。

2.js部分

(function(win, $) {
    var $block = $('#link-block'),
        $linkDiv = $block.children('div'),
        $area = $('area', $block); //area标签 即描出的菱形区域
    //菱形效果X
    $area.hover(function() {
        //找出类名为link-area最近的祖先元素
        var $link = $(this).closest('.link-area'), 
            type = $link.data('type'), //获取data-type值
            $img = $('img', $link);
        $img[0].src = 'images/' + type + 'h.png';
        //鼠标移入去掉所有link-area的z200
        $linkDiv.removeClass('z200'); 
    }, function() {
        var $link = $(this).closest('.link-area'),
            type = $link.data('type'),
            $img = $('img', $link);
        $img[0].src = 'images/' + type + '.png';
        //鼠标移出把当前元素的兄弟元素全部加上z-index:200
        //解决之前提出的后面元素覆盖前面的问题
        $link.siblings().addClass('z200');
    })
}(this, jQuery));

3.到这里效果已经实现，后来发现有个小bug，鼠标移至中间原路返回，无法触发`$link.siblings().addClass('z200');事件管理的左下角还是被事务管理盖住。

bug.jpg

• 实例参考