快捷導(dǎo)航

js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法

更新時間：2015年01月28日 14:46:12 投稿：shichen2014

這篇文章主要介紹了js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法,以實例形式較為詳細(xì)的分析了html及css頁面布局與js特效的實現(xiàn)方法,是非常實用的技巧,需要的朋友可以參考下

本文實例講述了js鼠標(biāo)懸浮出現(xiàn)遮罩層的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：

html頁面代碼：

<ul class="site-tag fl">  

        <li><a data-title="科學(xué)" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa6000200891260.jpg)">  

        </i><span class="tag-tit">科學(xué)</span> </a></li>  

        <li><a data-title="動漫" href="#"><i style="background-image: url(images/xiaozhan/main_NH8v_2e310001ebd1118e.jpg)">  

        </i><span class="tag-tit">動漫</span> </a></li>  

        <li><a data-title="生活" href="#"><i style="background-image: url(images/xiaozhan/main_OtnR_43a60000050a118c.jpg)">  

        </i><span class="tag-tit">生活</span> </a></li>  

        <li><a data-title="插畫" href="#"><i style="background-image: url(images/xiaozhan/main_UD3z_2e510002074f118e.jpg)">  

        </i><span class="tag-tit">插畫</span> </a></li>  

        <li><a data-title="音樂" href="#"><i style="background-image: url(images/xiaozhan/main_krFk_6323000018bd125d.jpg)">  

        </i><span class="tag-tit">音樂</span> </a></li>  

        <li><a data-title="自然" href="#"><i style="background-image: url(images/xiaozhan/main_UAbs_764f0001ff601190.jpg)">  

        </i><span class="tag-tit">自然</span> </a></li>  

</ul>

js代碼：

復(fù)制代碼代碼如下:

<script type="text/javascript">  

        $(function () {  

            //遮罩層，鼠標(biāo)移動上去高度變化，變清晰  

            var $site_li = $(".site-tag li");  

            $site_li.hover(function () {  

                var indexs = $site_li.index(this);  

                $(this).css("height", "90").find(".tag-tit").css("top", "30").css("color", "#fff");  

                //獲取當(dāng)前點擊li元素在全部li元素中的索引  

                //alert(indexs+1);  

                $(this).prev().css("height", "30");  

                $(this).next().css("height", "30");  

            }, function () {  

                $site_li.css("height", "50");  

            });  

        });  

 </script>

css代碼：

復(fù)制代碼代碼如下:

ul li{ list-style:none;}  

.site-tag{ width:200px; overflow:hidden; z-index:5;}  

.site-tag li{ position:relative; width:200px; height:50px; margin-bottom:1px; overflow:hidden;   

transition:height 0.5s ease; -webkit-transition:height 0.5s ease;   

-moz-transition:height 0.5s ease; -o-transition:height 0.5s ease;}  

.site-tag li a { color: #666; font-size: 16px; font-weight: bold;line-height: 50px;}  

.site-tag li i{ display:block; height:90px; background-position:center center;  

opacity:0.3; filter:alpha(opacity=3);  /*設(shè)置透明度*/  

-webkit-transition:opacity 0.5 ease;   /**/  

-webkit-filter:grayscale(60%);         /**/  

}  

.site-tag li:hover i { opacity:0.9; -webkit-filter:grayscale(0%); transition:opacity 0.5s ease;}  

.tag-tit{ display:block; height:100px; width:700px; color:#666; font-size:14px;}                   

.site-tag li .tag-tit{ position:absolute; top:0px; left: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程序設(shè)計有所幫助。

您可能感興趣的文章:

相關(guān)文章

基于canvas實現(xiàn)的鐘擺效果完整實例
這篇文章主要介紹了基于canvas實現(xiàn)的鐘擺效果,以完整實例形式分析了JavaScript結(jié)合html5的canvas技術(shù)實現(xiàn)鐘擺動態(tài)旋轉(zhuǎn)效果的方法,需要的朋友可以參考下
2016-01-01
JavaScript中的集合及效率
由于 JavaScript 的語言特性，我們可以向通用對象動態(tài)添加和刪除屬性。所以 Object 也可以看成是 JS 的一種特殊的集合。
2010-01-01
js+html5實現(xiàn)canvas繪制鏤空字體文本的方法
這篇文章主要介紹了js+html5實現(xiàn)canvas繪制鏤空字體文本的方法,涉及html5文字效果的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
紅米手機搶購的js代碼
這篇文章主要介紹了紅米手機搶購時返回的js代碼，制作紅米搶購軟件時可以用到，,需要的朋友可以參考下
2014-03-03
JS利用window.print()實現(xiàn)網(wǎng)頁打印功能
print作為瀏覽已經(jīng)比較成熟的技術(shù)可以經(jīng)常被用來打印頁面的部分內(nèi)容。本文將在JS中調(diào)用window.print()方法實現(xiàn)網(wǎng)頁打印功能，感興趣的可以跟隨小編一起學(xué)習(xí)一下
2022-04-04
javascript實現(xiàn)網(wǎng)頁子頁面遍歷回調(diào)的方法（涉及 window.frames、遞歸函數(shù)、函數(shù)上下文）
這篇文章主要介紹了javascript實現(xiàn)網(wǎng)頁子頁面遍歷回調(diào)的方法（涉及 window.frames、遞歸函數(shù)、函數(shù)上下文）,涉及javascript回調(diào)、遍歷等實現(xiàn)技巧,需要的朋友可以參考下
2015-07-07
JavaScript中的對象模型(object model)并不廣為人知,我們再設(shè)想：假設(shè)JavaScript沒有構(gòu)造函數(shù)或者沒有new關(guān)鍵字會怎樣？事情又會變成什么樣的呢？讓我們推到以前的重來,感興趣的朋友可以詳細(xì)了解下
2013-01-01