使用场景
show.jpg
用到的主要技术
1.因为考虑到要兼容到ie8，ccs3的transform:rotate方案只能放弃，这里采用map描点法;
2.该案例的描点很简单，不展开说了，描点可以用这个描点工具网站。
3.这里还有个难点，因为矩形块区域存在堆叠效果，每个div只能通过absolute来定位。因为平级元素的absolute,后面的元素的z-indx（层级）是高于前面元素的。导致后面的元素会遮住前面的div的一角。
demo1.jpg
解决方案
1.html css
//html
<div class="link-area one" data-type="icon1">
<img src="images/icon1.png" alt="" usemap="#icon1">
<map name="icon1" id="icon1">
<area alt="icon1" href="#" shape="poly" coords="105,210,209,106,105,1,0,104" />
</map>
</div>
//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
