この記事では、JSマウスのマスク層をサーフィンする方法について説明します。参照のためにそれを共有してください。特定の実装方法は次のとおりです。
HTMLページコード:
次のようにコードをコピーします:<ul>
<li> <a data-title = "science" href = "#"> <i style = "background-image:url(images/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i> <span>科学</span> </a> </li>
<li> <a data-title = "animation" href = "#"> <i style = "background-image:url(images/xiaozhan/main_nh8v_2e310001ebd1118e.jpg)">
</i> <span> anime </span> </a> </li>
<li> <a data-title = "life" href = "#"> <i style = "background-image:url(images/xiaozhan/main_otnr_43a60000050a118c.jpg)">
</i> <span> life </span> </a> </li>
<li> <A Data-Title = "Illustration" href = "#"> <i style = "background-image:url(images/xiaozhan/main_ud3z_2e510002074f118e.jpg)">
</i> <span>イラスト</span> </a> </li>
<li> <a data-title = "music" href = "#"> <i style = "background-image:url(images/xiaozhan/main_krfk_6323000018bd125d.jpg)">
</i> <span>音楽</span> </a> </li>
<li> <a data-title = "natural" href = "#"> <i style = "background-image:url(images/xiaozhan/main_uabs_764f0001ff601190.jpg)">
</i> <span>自然</span> </a> </li>
</ul>
JSコード:
次のようにコードをコピーします。<script type = "text/javascript">
$(function(){
//マスク層、マウスが上昇してより明確になると高さが変化します
var $ site_li = $( "。site-tag li");
$ site_li.hover(function(){
var indexs = $ site_li.index(this);
$(this).css( "height"、 "90")
//すべてのli要素で現在のクリックli要素のインデックスを取得します
// alert(indexs+1);
$(this).prev()。css( "height"、 "30");
$(this).next()。css( "height"、 "30");
}、 関数 () {
$ site_li.css( "height"、 "50");
});
});
</script>
CSSコード:
次のようにコードをコピーします:ul li {list-style:none;}
.site-tag {width:200px;オーバーフロー:隠し; z-index:5;}
.site-tag li {position:relative;幅:200px;高さ:50px;マージンボトム:1px;オーバーフロー:隠し;
遷移:高さ0.5秒の容易さ。 -webkit-transition:高さ0.5秒の容易さ。
-moz-transition:高さ0.5秒の容易さ。 -o-Transition:高さ0.5秒簡単;}
.site-tag li a {color:#666;フォントサイズ:16px; font-weight:bold; line-height:50px;}
.site-tag li i {display:block;高さ:90px;バックグラウンドポジション:センターセンター。
不透明:0.3;フィルター:アルファ(不透明度= 3); /*透明度を設定*/
-webkit-transition:不透明度0.5容易さ。 /**/
-webkit-filter:grayscale(60%); /**/
}
.site-tag li:Hover I {Opacity:0.9; -webkit-filter:grayscale(0%);トランジション:不透明度0.5s容易さ;}
.tag-tit {display:block;高さ:100px;幅:700px;色:#666; font-size:14px;}
.site-tag li .tag-tit {position:absolute;上:0px;左:10px; Text-Shadow:1PX 1PX 1PX RGB(0,0,0,0.1);}
A:HOVER .TAG-TIT {TEXT-SHADOW:1PX 1PX 1PX RGB(0,0,0,0.5);}
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。