تصف هذه المقالة طريقة تصفح طبقة القناع في MS Mouse. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
رمز صفحة HTML:
انسخ الرمز على النحو التالي: <ul>
<li> <a data-title = "science" href = "#"> <i style = "background-image: url (صور/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i> <span> العلوم </span> </a> </li>
<li> <a data-title = "Animation" href = "#"> <i style = "background-image: url (صور/xiaozhan/main_nh8v_2e310001ebd1118e.jpg)">
</i> <span> Anime </aa> </li>
<li> <a data-title = "life" href = "#"> <i style = "background-image: url (صور/xiaozhan/main_otnr_43a60000050a118c.jpg)">
</i> <span> الحياة </span> </a> </li>
<li> <a data-title = "Illustration" href = "#"> <i style = "background-image: url (صور/xiaozhan/main_ud3z_2e510002074f118e.jpg)">
</i> <span> التوضيح </span> </a> </li>
<li> <a data-title = "music" href = "#"> <i style = "background-image: url (صور/xiaozhan/main_krfk_6323000018bd125d.jpg)">
</i> <span> الموسيقى </span> </a> </li>
<li> <a data-title = "natural" href = "#"> <i style = "background-image: url (صور/xiaozhan/main_uabs_764f0001ff601190.jpg)">
</i> <span> طبيعي </span> </a> </li>
</ul>
رمز JS:
انسخ الرمز كما يلي: <script type = "text/javaScript">
$ (function () {
// طبقة القناع ، يتغير الارتفاع عندما يتحرك الماوس ، ويصبح أكثر وضوحًا
var $ site_li = $ (".
$ site_li.hover (function () {
فهرس var = $ site_li.index (هذا) ؛
$ (this) .css ("height" ، "90"). find (". tag-tit"). css ("top" ، "30").
// احصل على فهرس عنصر النقر الحالي في جميع عناصر LI
// ALERT (فهرسات+1) ؛
$ (هذا) .prev (). css ("الارتفاع" ، "30") ؛
$ (هذا) .next (). css ("الارتفاع" ، "30") ؛
}، وظيفة () {
$ site_li.css ("الارتفاع" ، "50") ؛
}) ؛
}) ؛
</script>
رمز CSS:
انسخ الرمز كما يلي: ul li {style style: none ؛}
.site-tag {width: 200px ؛ الفائض: مخفي. z-index: 5 ؛}
.site-tag li {الموضع: النسبي ؛ العرض: 200 بكسل ؛ الارتفاع: 50 بكسل ؛ هامش القاع: 1px ؛ الفائض: مخفي.
الانتقال: ارتفاع 0.5s سهولة. -بكيت الانتقال: ارتفاع 0.5s سهولة ؛
-الموز انتقال: ارتفاع 0.5s سهولة ؛ -الران: ارتفاع 0.5s سهولة ؛}
.site-tag li a {color: #666 ؛ حجم الخط: 16 بكسل ؛ خط الوسط: BOLD ؛ Line-Line: 50px ؛}
.site-tag li i {display: block ؛ الارتفاع: 90 بكسل ؛ خلفية الموضع: مركز المركز ؛
العتامة: 0.3 ؛ مرشح: ألفا (عتامة = 3) ؛ /*تعيين الشفافية*/
-بكيت الانتقال: التعتيم 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 ؛ العرض: 700 بكسل ؛ اللون:#666 ؛ حجم الخط: 14px ؛}
.site-tag li .tag-tit {position: absolute ؛ أعلى: 0px ؛ اليسار: 10 بكسل ؛ النص الشادو: 1px 1px 1px RGB (0،0،0،0.1) ؛}
a: hover .tag-tit {text-shadow: 1px 1px 1px rgb (0،0،0،5) ؛}
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.