使用jQuery实现图片遮罩半透明坠落遮挡
更新时间：2015年03月16日 15:33:45 投稿：hebedich
这篇文章主要介绍了使用jQuery实现图片遮罩半透明坠落遮挡，效果非常棒，小伙伴们做相册的时候可以直接拿走使用。
默认九宫格图片排列效果，当鼠标悬停在图片上后，会从图片的上方下滑一个半透明遮罩的效果
同时出现一些文字介绍
使用方法：
1、将head中的css样式引入到你的网页中
2、将代码部分拷贝到你的网页body结束前的地方即可
(js、图片采用绝对路径，不建议修改)
复制代码 代码如下:
$(function(){
$('.sgw_img dt').hover(function(){
$(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
$(this).children('.box').stop(true,true).animate({'top':-482,opacity:0},200);
})
$('.sgw_img dd').hover(function(){
$(this).children('.box').stop(true,true).delay(100).animate({'top':0,opacity:0.8},300);
},function(){
$(this).children('.box').stop(true,true).animate({'top':-382,opacity:0},200);
})
})
以上就是本文分享的全部内容了，希望大家能够喜欢。
相关文章
本文搜集了大量 jQuery 表格插件，帮助 Web 设计者更好地驾御 HTML 表格，你可以对表格进行横向和竖向排序，设置固定表头，对表格进行搜索，对大表格进行分页，对表格进行滚动，拖放操作等等。这些插件很多都包含详细的教程。2010-04-04
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
这篇文章主要介绍了jQuery实现点击后高亮背景固定显示的菜单效果,可实现鼠标点击菜单项后呈现出鼠标滑过一样的背景高亮显示效果,同时该显示效果固定不变,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了jQuery实现高亮显示的方法,涉及jQuery样式控制的addClass与removeClass方法使用技巧,需要的朋友可以参考下2015-03-03
这篇文章主要介绍了jQuery实现带滚动线条导航效果的方法,分析了带滚动条导航效果的实现原理与相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了jquery xMarquee实现文字水平无缝滚动效果,需要的朋友可以参考下2014-04-04
这篇文章主要为大家详细介绍了jQuery展示表格点击变色、全选、删除的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
使用jQuery实现很多很有意思的应用效果。我们在很多网站注册会员时，需要填写注册表单，包括登录信息、个人联系信息等，本文将带您一起体验jQuery实现的一个可以滚动的十分友好的分步注册向导，需要的朋友可以参考下2015-08-08
Jquery EasyUI Datagrid右键菜单实现方法
这篇文章主要为大家详细介绍了Jquery EasyUI Datagrid右键菜单的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这里给大家分享一段个人觉着非常实用也经常用于项目中的代码，本代码基于jQuery实现了文本框缩放以及上下移动功能，给需要的网友们参考下吧2014-11-11
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
SageCRM的查询条件屏幕的条件比较多，会占用界面，用户希望首先显示常用的查询条件，然后点击展开的按钮，可以看到一些不常用的查询条件2011-12-12
最新评论