FrontEnd 步步高升:鼠标在图片上,产生遮盖效果
2015-02-13 15:12
239 查看
思路:
在图片旁边放一个height:0px的DIV,让jQuery改变高度,产生动画
DOM树
JAVASCRIPT:
在图片旁边放一个height:0px的DIV,让jQuery改变高度,产生动画
DOM树
<div class="mask col-sm-2 col-md-2"> <a href="#"><img src="img/hd-7.jpg" alt="活动图片"> </a> <div class="mask-text"> <div class="mask-header"> <a href="#">活动标题</a> </div> <p>活动介绍.....</p> </div> </div>
JAVASCRIPT:
$(".mask").hover( function () { $(".mask-text", this).stop().animate({ height: "100%" }); }, function () { $(".mask-text", this).stop().animate({ height: "0px" }); });
相关文章推荐
- 鼠标悬停图片产生边框的效果实现
- js实现鼠标移动到图片产生遮罩效果
- 【js基础】鼠标移到图片上产生遮障效果
- Asp.net上传图片产生预览效果
- JS控制鼠标在移入移出时,图片渐变的效果
- 一个跟随鼠标的图片放大效果,初次写,老鸟包含//经5dyoy
- CSS+JavaScript打造鼠标悬停图片渐显效果!
- 图片的鼠标悬浮效果
- 用css filter做鼠标滑过图片效果
- js实现图片显示局部,鼠标经过显示全部的效果
- javaScript---图片渐显效果和文字大小变化之鼠标响应事件
- 鼠标放在图片上面显示图片放大效果
- 屏蔽鼠标经过图片时候产生的菜单
- 鼠标效应图片渐显效果
- 实现鼠标移在图片上出现渐现的效果
- 客齐集图片鼠标悬停效果
- 一个跟随鼠标的图片放大效果,与FF兼容
- 鼠标触发图片渐隐渐显效果HTC
- JavaScript鼠标经过图片晃动效果
- js图片根据鼠标左右滚动的效果