使用場景
show.jpg
用到的主要技術
1.因為考慮到要兼容到ie8覆履，ccs3的transform:rotate方案只能放棄，這里采用map描點法;
2.該案例的描點很簡單着憨，不展開說了柄瑰，描點可以用這個描點工具網站。
3.這里還有個難點泌霍，因為矩形塊區(qū)域存在堆疊效果货抄，每個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;
}
這就實現(xiàn)了一個簡單的area區(qū)域，usemap是和map標簽的name屬性來進行綁定的藤为，和錨點的效果類似怪与。其他參數(shù)參照map area參數(shù)查看。
.link-area:hover { z-index: 100; }//解決當前元素被后面元素遮掉問題
這里因為要map描點依賴img所以不能用背景圖缅疟。hover改變圖片的效果由后面的js動態(tài)拼接改變src分别。
2.js部分
(function(win, $) {
var $block = $('#link-block'),
$linkDiv = $block.children('div'),
$area = $('area', $block); //area標簽 即描出的菱形區(qū)域
//菱形效果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';
//鼠標移入去掉所有l(wèi)ink-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.到這里效果已經實現(xiàn)，后來發(fā)現(xiàn)有個小bug窿吩，鼠標移至中間原路返回茎杂，無法觸發(fā)`$link.siblings().addClass('z200');事件管理的左下角還是被事務管理蓋住。
bug.jpg
