js鼠标悬浮出现遮罩层的章程

2019-08-31 作者:网站首页   |   浏览(61)

js鼠标悬浮出现遮罩层的方法,js鼠标悬浮遮罩

本文实例讲述了js鼠标悬浮出现遮罩层的方法。分享给大家供大家参考。具体实现方法如下:

html页面代码:

复制代码 代码如下:

<ul class="site-tag fl"> 
        <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa6000200891260.jpg)"> 
        </i><span class="tag-tit">科学</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代码:

复制代码 代码如下:

<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").find(".tag-tit").css("top", "30").css("color", "#fff"); 
                //获取当前点击li元素在全部li元素中的索引 
                //alert(indexs 1); 
                $(this).prev().css("height", "30"); 
                $(this).next().css("height", "30"); 
            }, function () { 
                $site_li.css("height", "50"); 
            }); 
        }); 
 </script>

css代码:

复制代码 代码如下:

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);  /*设置透明度*/ 
-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程序设计有所帮助。

本文实例讲述了js鼠标悬浮出现遮罩层的方法。分享给大家供大家参考。具体实现方法如下:...

本文实例讲述了js鼠标悬浮出现遮罩层的方法。分享给大家供大家参考。具体实现方法如下:

html页面代码:

复制代码 代码如下:

<ul class="site-tag fl"> 
        <li><a data-title="科学" href="#"><i style="background-image: url(images/xiaozhan/main_ojls_1aa6000200891260.jpg)"> 
        </i><span class="tag-tit">科学</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代码:

复制代码 代码如下:

<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").find(".tag-tit").css("top", "30").css("color", "#fff"); 
                //获取当前点击li元素在全部li元素中的索引 
                //alert(indexs 1); 
                $(this).prev().css("height", "30"); 
                $(this).next().css("height", "30"); 
            }, function () { 
                $site_li.css("height", "50"); 
            }); 
        }); 
 </script>

css代码:

复制代码 代码如下:

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);  /*设置透明度*/ 
-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程序设计有所帮助。

您可能感兴趣的文章:

  • JS遮罩层效果 兼容ie firefox jQuery遮罩层
  • javascript div 遮罩层封锁整个页面
  • js弹出div并显示遮罩层
  • 原生js实现半透明遮罩层效果具体代码
  • 纯js实现遮罩层效果原理分析
  • js点击按钮实现带遮罩层的弹出视频效果
  • js实现遮罩层弹出框的方法
  • JS实现遮罩层效果的简单实例
  • 弹出最简单的模式化遮罩层的js代码
  • 通过遮罩层实现浮层DIV登录的js代码
  • css js实现部分区域高亮可编辑遮罩层
  • JS简单实现点击按钮或文字显示遮罩层的方法

本文由yzc216亚洲城发布于网站首页,转载请注明出处:js鼠标悬浮出现遮罩层的章程

关键词: yzc216亚洲城