利用SVG制作不规矩背景的链接导航

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_34015336

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量149

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/tbd/blog/645806

版权

为什么80%的码农都做不了架构师？>>>

我们先看效果：

默认样式布局

hover到一个连接上

利用svg制作非常的简单，如果我们利用图片热区或者换背景法相对会麻烦，因为带了hover的背景变化效果，

利用svg可以制作各种不规矩形状，不单单局限在这种处理上，svg可自行脑补，同样在我的博客里也有简单介绍http://my.oschina.net/tbd/blog/607604。

下面是程序代码：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>demo</title>
</head>
<body>
    <div style="width:520px; height:448px; margin:50px auto; border:#999 solid 1px; background:#1895c3">
        <svg width="320" height="408" version="1.1"
        xmlns="http://www.w3.org/2000/svg" style="margin:20px 100px;">
        <a xlink:href="https://www.baidu.com/" target="_blank">
        <path d="M6 7 L102 5 L102 97 L5 95 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="26" y="57">百度</text> 
        </a>
  <a xlink:href="http://www.qq.com/" target="_blank">
        <path d="M109 5 L207 3 L207 99 L109 97 Z" stroke="#72c6de" fill="#93d5e7"/></path> 
  <text style="font-size:16px" fill="#fff" x="129" y="55">腾讯</text> 
        </a>
  <a xlink:href="https://www.1688.com/index.html" target="_blank">       
  <path d="M214 3 L310 0 L311 101 L214 99 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="234" y="53">阿里</text> 
        </a>
  <a xlink:href="http://www.sina.com.cn/" target="_blank">
  <path d="M5 102 L102 103 L102 201 L4 203 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="25" y="152">新浪</text> 
        </a>
  <a xlink:href="http://www.sohu.com/" target="_blank">
  <path d="M109 103 L207 105 L207 199 L109 201 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="129" y="153">搜狐</text> 
        </a>
  <a xlink:href="http://www.163.com/" target="_blank">
  <path d="M214 105 L312 107 L313 198 L214 199 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="234" y="155">网易</text> 
        </a>
  <a xlink:href="https://www.taobao.com/" target="_blank">
  <path d="M4 209 L102 208 L102 300 L3 298 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="24" y="259">淘宝</text> 
        </a>
  <a xlink:href="http://www.renren.com/" target="_blank">
  <path d="M109 208 L207 206 L207 303 L109 300 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="129" y="258">人人网</text> 
        </a>
  <a xlink:href="http://my.oschina.net/tbd" target="_blank">
  <path d="M214 206 L313 204 L314 306 L214 303 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="234" y="256">透笔度博客</text> 
        </a>
  <a xlink:href="http://www.oschina.net/code/list_by_user?id=2352644" target="_blank">
  <path d="M3 304 L314 312 L316 406 L1 406 Z" stroke="#72c6de" fill="#93d5e7"/></path>
   <text style="font-size:16px" fill="#fff" x="23" y="354">透笔度博客分享实例</text> 
        </a>           
        </svg>
    </div>
</body>
<script type="text/javascript"> 
window.onload=function(){
   
 var bcolor="#93d5e7",bhcolor="#fff";
 var tcolor="#fff",thcolor="#72c6de";
 
 var listp=document.getElementsByTagName("path"); 
 var listt=document.getElementsByTagName("text");   
 for(var i=0;i<listp.length;i++){
  
  listp[i].onmouseover=function(){
   this.setAttribute("fill",bhcolor);
   for(var j=0;j<listp.length;j++){
    if(this==listp[j]){
     listt[j].setAttribute("fill",thcolor);
    }else{
     listt[j].setAttribute("fill",tcolor);
    };
   };
  };
  
  listp[i].onmouseleave=function(){
   this.setAttribute("fill",bcolor);
   for(var j=0;j<listt.length;j++){
     listt[j].setAttribute("fill",tcolor);
   };
  };
  
  listt[i].onmouseover=function(){
   this.setAttribute("fill",thcolor);
   for(var j=0;j<listt.length;j++){
    if(this==listt[j]){
     listp[j].setAttribute("fill",bhcolor);
    }else{
     listp[j].setAttribute("fill",bcolor);
    };
   };
  };
  
  listt[i].onmouseleave=function(){
   this.setAttribute("fill",tcolor);
     for(var j=0;j<listt.length;j++){
     listp[j].setAttribute("fill",bcolor);
   };
  };  
 };
   
};
</script>
</html>

类似效果，有什么更改调整样式和坐标即可。

转载于:https://my.oschina.net/tbd/blog/645806