CSS3和JS制作菱形特效

准备素材，主要是几个菱形块图片以及鼠标移上去的效果图片（鼠标移上去，替换一张蓝色透明图片）

先上效果，鼠标移到菱形区域显示产品名称

思路

1. 首先将几个菱形图片绝对布局，使其在相应的位置

2. 对每个图片进行图片热点设置，热点区域为图片中菱形区域

3. 写脚本使得鼠标以上菱形区域后显示另外一张图片

以下是代码

<div class="awsome">
<img id="d1img" src="images/d1.png" class="d d0" usemap="#d1" style="top:40px;left:220px;">
<img src="images/d1s.png" class="d" usemap="#d1" style="top:40px;left:220px;display:none;z-index:99;">
<img id="d2img" src="images/d2.png" class="d d0" usemap="#d2" style="top:250px;left:220px;">
<img src="images/d2s.png" class="d" usemap="#d2" style="top:250px;left:220px;display:none;z-index:99;">
<img id="d3img" src="images/d3.png" class="d d0" usemap="#d3" style="top:145px;left:115px;">
<img src="images/d3s.png" class="d" usemap="#d3" style="top:145px;left:115px;display:none;z-index:99;">
<img id="d4img" src="images/d4.png" class="d d0" usemap="#d4" style="top:145px;left:325px;">
<img src="images/d4s.png" class="d" usemap="#d4" style="top:145px;left:325px;display:none;z-index:99;">
<img id="d5img" src="images/d5.png" class="d d0" usemap="#d5" style="top:250px;left:10px;">
<img src="images/d5s.png" class="d" usemap="#d5" style="top:250px;left:10px;display:none;z-index:99;">
<map name="d1" id="d1">
<area shape="polygon"
coords="100,0,200,100,100,200,0,100"
href="#" οnmοuseοver="javascript:showHref('#d1img')" οnmοuseοut="javascript:hideHref('#d1img')" target="_blank" alt=""/>
</map>
<map name="d2" id="d1">
<area shape="polygon"
coords="100,0,200,100,100,200,0,100"
href="#" οnmοuseοver="javascript:showHref('#d2img')" οnmοuseοut="javascript:hideHref('#d2img')" target="_blank" alt=""/>
</map>
<map name="d3" id="d1">
<area shape="polygon"
coords="100,0,200,100,100,200,0,100"
href="#" οnmοuseοver="javascript:showHref('#d3img')" οnmοuseοut="javascript:hideHref('#d3img')" target="_blank" alt=""/>
</map>
<map name="d4" id="d1">
<area shape="polygon"
coords="100,0,200,100,100,200,0,100"
href="#" οnmοuseοver="javascript:showHref('#d4img')" οnmοuseοut="javascript:hideHref('#d4img')" target="_blank" alt=""/>
</map>
<map name="d5" id="d1">
<area shape="polygon"
coords="100,0,200,100,100,200,0,100"
href="#" οnmοuseοver="javascript:showHref('#d5img')" οnmοuseοut="javascript:hideHref('#d5img')" target="_blank" alt=""/>
</map>
</div>

function showHref($id){
$($id).next("img").show();
}
function hideHref($id){
$($id).next("img").hide();
}

最后

以上就是阔达小霸王为你收集整理的CSS3和JS制作菱形特效的全部内容，希望文章能够帮你解决CSS3和JS制作菱形特效所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。