js实现超棒的字母链接文字效果 |
| 2021-01-21 23:00:57 35资源网(www.35d.net) |
| js |
下载本资源原文网址：http://www.daima.org/js/js17219.html 在字母内写上链接的文字，字母的空白区不可点击，效果非常不错
在网页<head>区添加样式定义
[code]
<style type="text/css">
ul#off {list-style-type:none; padding:0; margin:0; width:750px; height:130px; margin:2em auto; position:relative;}
ul#off li {display:block; width:75px; height:100px; margin:10px; position:relative; float:left;}
ul#off li.gap {margin-right:75px;}
ul#off a {display:block; width:0; height:0; text-decoration:none; position:absolute; left:0; top:0;}
ul#off a em {cursor:pointer; font-style:normal; font-weight:bold;}
ul#off a span {display:none;}
ul#off a em.hz {position:absolute; display:block; height:20px; width:75px; cursor:pointer; text-align:center; line-height:20px; color:#fff;}
ul#off a em.vtc {position:absolute; display:block; height:60px; width:25px; cursor:pointer; left:0; top:20px;}
ul#off a em.vtl {position:absolute; display:block; height:80px; width:25px; cursor:pointer; left:0; top:0;}
ul#off a em.vtp {position:absolute; display:block; height:40px; width:25px; cursor:pointer;}
ul#off a em.bk {position:absolute; display:block; height:25px; width:25px; cursor:pointer;}
ul#off a em.toph {top:0; left:0;}
ul#off a em.midh {top:40px; left:0;}
ul#off a em.both {top:80px; left:0;}
ul#off a em.topr {top:0; left:50px;}
ul#off a em.bktl {top:20px; left:0;}
ul#off a em.bktr {top:20px; left:50px;}
ul#off a em.bkbl {top:60px; left:0;}
ul#off a em.bkbr {top:60px; left:50px;}
.ccc em {background:#939;}
.sss em {background:#939;}
.ppp em {background:#39b;}
.lll em {background:#39b;}
.aaa em {background:#333;}
.yyy em {background:#39b;}
ul#off a:hover {color:#c00; background:#ddd;}
ul#off a.ccc:hover em {background:#606; color:#c6c;}
ul#off a.sss:hover em {background:#606; color:#c6c;}
ul#off a.ppp:hover em {background:#069; color:#6ce;}
ul#off a.lll:hover em {background:#069; color:#6ce;}
ul#off a.aaa:hover em {background:#000; color:#888;}
ul#off a.yyy:hover em {background:#069; color:#6ce;}
ul#off a:hover span {display:block; width:75px; height:1px; font-size:3px; position:absolute; top:110px; left:0; border-top:5px dashed #000;}
ul#off a:active, ul#off a:focus {background:#eee;}
ul#off a:active em, ul#off a:focus em {background:#f0ca93; color:#000;}
ul#off a:active span, ul#off a:focus span {border-top:5px solid #f0ca93;}
</style>
[/code]
在网页<body>区添加以下HTML代码定义
[code]
<ul id="off">
<li><a class="ccc" href="//www.sharejs.com"><em class="hz toph"></em><em class="vtc"></em><em class="hz both">DEMOS</em><span></span></a></li>
<li><a class="sss" href="index.html"><em class="hz toph"></em><em class="bk bktl"></em><em class="hz midh">MENUS</em><em class="bk bkbr"></em><em class="hz both"></em><span></span></a></li>
<li class="gap"><a class="sss" href="../layouts/index.html"><em class="hz toph"></em><em class="bk bktl"></em><em class="hz midh">LAYOUTS</em><em class="bk bkbr"></em><em class="hz both"></em><span></span></a></li>
<li><a class="ppp" href="../boxes/index.html"><em class="hz toph"></em><em class="bk bktl"></em><em class="bk bktr"></em><em class="hz midh">BOXES</em><em class="vtp bkbl"></em><span></span></a></li>
<li><a class="lll" href="../mozilla/index.html"><em class="vtl"></em><em class="hz both">MOZILLA</em><span></span></a></li>
<li><a class="aaa" href="../ie/index.html"><em class="hz toph"></em><em class="bk bktr"></em><em class="hz midh">EXPLORER</em><em class="bk bkbl"></em><em class="bk bkbr"></em><em class="hz both"></em><span></span></a></li>
<li><a class="yyy" href="../opacity/index.html"><em class="vtp toph"></em><em class="vtp topr"></em><em class="hz midh">OPACITY</em><em class="bk bkbr"></em><em class="hz both"></em><span></span></a></li>
</ul>
[/code] |
|
|
|
|
|
资源大全_资源下载网站：www.35d.net 本站资源仅限研究学习使用，如需商用请联系版权方， 本站事务联系QQ：939804642
|
|
