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 相关文章推荐
基于jQuery的的一个隔行变色,鼠标移动变色的小插件
Jul 06 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
理解javascript对象继承
Apr 17 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
jQuery插件form-validation-engine正则表达式操作示例
Feb 09 Javascript
jQuery插件FusionCharts实现的2D柱状图效果示例【附demo源码下载】
Mar 06 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
原生js实现3D轮播图
Mar 21 Javascript
JQuery复选框全选效果如何实现
May 08 jQuery
Vue CLI4 Vue.config.js标准配置(最全注释)
Jun 05 Javascript
JavaScript实现10秒后再次获取验证码
Dec 02 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
第十三节 对象串行化 [13]
2006/10/09 PHP
PHP获取文件的MD5值并判断是否被修改的例子
2014/06/19 PHP
ThinkPHP3.1新特性之多层MVC的支持
2014/06/19 PHP
PHP合并静态文件详解
2014/11/14 PHP
PHP 生成N个不重复的随机数
2015/01/21 PHP
CI框架常用函数封装实例
2016/11/21 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
NodeJS的模块写法入门(实例代码)
2012/03/07 NodeJs
JS检测输入字符是否包含非法字符的示例代码
2014/02/11 Javascript
BootStrap中
2016/12/10 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
通过构造函数实例化对象的方法
2017/06/28 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
AngularJS日期格式化常见操作实例分析
2018/05/17 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
浅谈vue 锚点指令v-anchor的使用
2019/11/13 Javascript
python中ConfigParse模块的用法
2014/09/29 Python
解读Python中degrees()方法的使用
2015/05/18 Python
动感网页相册 python编写简单文件夹内图片浏览工具
2016/08/17 Python
Python中一些不为人知的基础技巧总结
2018/05/19 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
python 实现端口扫描工具
2020/12/18 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Agoda中文官网:安可达(低价预订全球酒店)
2021/01/18 全球购物
一套C#面试题
2013/10/09 面试题
门卫人员岗位职责
2013/12/24 职场文书
保安拾金不昧表扬信
2014/01/15 职场文书
化妆品促销方案
2014/02/24 职场文书
机械设备与数控技术专业求职信
2014/08/10 职场文书
2016入党培训心得体会范文
2016/01/08 职场文书
安全生产协议书
2016/03/22 职场文书
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Redis数据同步之redis shake的实现方法
2022/04/21 Redis