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 相关文章推荐
HTA版JSMin(省略修饰语若干)基于javascript语言编写
Dec 24 Javascript
jQuery技巧总结
Jan 01 Javascript
js实现运动logo图片效果及运动元素对象sportBox使用方法
Dec 25 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JavaScript实现基于十进制的四舍五入实例
Jul 17 Javascript
基于JavaScript实现验证码功能
Apr 01 Javascript
redux-saga 初识和使用
Mar 10 Javascript
js+css实现打字效果
Jun 24 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
May 24 jQuery
jquery拖拽自动排序插件使用方法详解
Jul 20 jQuery
使用Sonarqube扫描Javascript代码的示例
Dec 26 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 正则匹配函数体
2009/08/25 PHP
thinkphp Apache配置重启Apache1 restart 出错解决办法
2017/02/15 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
超级简单的图片防盗(HTML),好用
2007/04/08 Javascript
JavaScript中的History历史对象
2008/01/16 Javascript
JavaScript基本概念初级讲解论坛贴的学习记录
2009/02/22 Javascript
jQuery 注意事项 与原因分析
2009/04/24 Javascript
javascript 学习笔记(六)浏览器类型及版本信息检测代码
2011/04/08 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
javaScript矢量图表库-gRaphael几行代码实现精美的条形图/饼图/点图/曲线图
2013/01/09 Javascript
JS求平均值的小例子
2013/11/29 Javascript
简介JavaScript中strike()方法的使用
2015/06/08 Javascript
javascript引用类型之时间Date和数组Array
2015/08/27 Javascript
实例代码详解javascript实现窗口抖动及qq窗口抖动
2016/01/04 Javascript
js实现悬浮窗效果(支持拖动)
2017/03/09 Javascript
js学习心得_一个简单的动画库封装tween.js
2017/07/14 Javascript
详解Vue项目中实现锚点定位
2019/04/24 Javascript
谈谈node.js中的模块系统
2020/09/01 Javascript
jQuery+ajax实现文件上传功能
2020/12/22 jQuery
[02:12]DOTA2英雄基础教程 变体精灵
2013/12/16 DOTA
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python实现去除列表中重复元素的方法总结【7种方法】
2019/02/16 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
Django 实现admin后台显示图片缩略图的例子
2019/07/28 Python
python django 原生sql 获取数据的例子
2019/08/14 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
KLOOK客路:发现更好玩的世界,预订独一无二的旅行体验
2016/12/16 全球购物
皇家道尔顿官网:Royal Doulton
2017/12/06 全球购物
荷兰手表网站:Watch2Day
2018/07/02 全球购物
技术总监管理岗位职责
2014/03/09 职场文书
单位绩效考核方案
2014/05/11 职场文书
环保建议书400字
2014/05/14 职场文书
企业职业病防治方案
2014/05/29 职场文书
小型婚礼主持词
2015/06/30 职场文书
Go语言实现一个简单的并发聊天室的项目实战
2022/03/18 Golang