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的设计模式
Nov 22 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
angular.bind使用心得
Oct 26 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
Node.js中用D3.js的方法示例
Jan 16 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
Jul 24 Javascript
JS实现评价的星星功能
Aug 20 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
Apr 12 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
Aug 13 Javascript
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
May 10 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
php printf输出格式使用说明
2010/12/05 PHP
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
Visual Studio中的jQuery智能提示设置方法
2010/03/27 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
AngularJS ng-bind-html 指令详解及实例代码
2016/07/30 Javascript
js实现控制textarea输入字符串的个数,鼠标按下抬起判断输入字符数
2016/10/25 Javascript
NodeJS自定义模块写法(详解)
2017/06/27 NodeJs
Javascript中prototype与__proto__的关系详解
2018/03/11 Javascript
vue实现记事本功能
2019/06/26 Javascript
Angular8基础应用之表单及其验证
2019/08/11 Javascript
[01:59]翻天覆地,因你而变,7.20版本地图更新速览
2018/11/24 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法
2015/05/20 Python
Python 装饰器深入理解
2017/03/16 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python的turtle库使用详解
2019/05/10 Python
python对绑定事件的鼠标、按键的判断实例
2019/07/17 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
VIVOBAREFOOT赤脚鞋:让您的脚做自然的事情
2017/06/01 全球购物
Bodum官网:咖啡和茶壶、玻璃器皿、厨房电器等
2018/08/01 全球购物
大学生简历的个人自我评价
2013/12/04 职场文书
工作迟到检讨书
2014/02/21 职场文书
连锁超市项目计划书
2014/09/15 职场文书
2014国庆节演讲稿:祖国在我心中(400字)
2014/09/25 职场文书
诉讼授权委托书范本
2014/10/05 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
导游词之山东孔庙
2019/11/04 职场文书
Java8中接口的新特性使用指南
2021/11/01 Java/Android
如何解决php-fpm启动不了问题
2021/11/17 PHP