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


Posted in Javascript onJanuary 28, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
在JavaScript中获取请求的URL参数
Dec 22 Javascript
js String对象中常用方法小结(字符串操作)
Jan 27 Javascript
jquery实现在光标位置插入内容的方法
Feb 05 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
May 18 Javascript
js带缩略图的图片轮播效果代码分享
Sep 14 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
微信小程序实现图片自适应(支持多图)
Jan 25 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
May 09 Javascript
layui中select,radio设置不生效的解决方法
Sep 05 Javascript
在项目vue中使用echarts的操作步骤
Sep 07 Javascript
vue-cli —— 如何局部修改Element样式
Oct 22 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
Jquery 实现grid绑定模板
Jan 28 #Javascript
Javascript控制input输入时间格式的方法
Jan 28 #Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 #Javascript
js封装可使用的构造函数继承用法分析
Jan 28 #Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 #Javascript
javascript原型链继承用法实例分析
Jan 28 #Javascript
Jquery 实现图片轮换
Jan 28 #Javascript
You might like
西德产收音机
2021/03/01 无线电
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
php的数组与字符串的转换函数整理汇总
2013/07/18 PHP
php读取excel文件的简单实例
2013/08/26 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
jquery表格datatables实例解析 直接加载和延迟加载
2016/08/12 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
layui的表单提交以及验证和修改弹框的实例
2019/09/09 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
[55:25]2018DOTA2亚洲邀请赛3月29日 小组赛A组 VG VS OG
2018/03/30 DOTA
Python中多线程及程序锁浅析
2015/01/21 Python
老生常谈python的私有公有属性(必看篇)
2017/06/09 Python
Python基于回溯法子集树模板解决m着色问题示例
2017/09/07 Python
python使用opencv按一定间隔截取视频帧
2018/03/06 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
python读取图片并修改格式与大小的方法
2018/07/24 Python
Python代码使用 Pyftpdlib实现FTP服务器功能
2019/07/22 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
用python写PDF转换器的实现
2020/10/29 Python
The Outnet亚太地区:折扣设计师时装店
2019/12/05 全球购物
圣诞树世界:Christmas Tree World
2019/12/10 全球购物
Java面试题:Java类的Main方法如果是Private将会怎么样
2016/08/18 面试题
小学教研工作制度
2014/01/15 职场文书
建设工地安全标语
2014/06/07 职场文书
迎新晚会策划方案
2014/06/13 职场文书
创先争优活动心得体会
2014/09/04 职场文书
大学军训口号大全
2015/12/24 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
求职自我评价参考范文
2019/05/16 职场文书
MongoDB使用场景总结
2022/02/24 MongoDB