我是靠谱客的博主 阔达小霸王,这篇文章主要介绍CSS3和JS制作菱形特效,现在分享给大家,希望可以做个参考。

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


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


思路

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

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

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

以下是代码

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
JS脚本

复制代码
1
2
3
4
5
6
function showHref($id){ $($id).next("img").show(); } function hideHref($id){ $($id).next("img").hide(); }



最后

以上就是阔达小霸王最近收集整理的关于CSS3和JS制作菱形特效的全部内容,更多相关CSS3和JS制作菱形特效内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(61)

评论列表共有 0 条评论

立即
投稿
返回
顶部