使用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的简单图片切换效果
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <script type="text/javascrip
-
jQuery fadeTo方法调整图片的透明度使用介绍
复制代码 代码如下: <head> <title></title> <style type="text/css"> .imgclass{ width:300px; height:300px; border:solid 1px red;} </style> <script src="jquery-1.9.1.js" type="text/javascript"></scr
-
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
触摸事件(touch) 在 jQuery Mobile 中有一些触摸事件是可定制的.然而,这些事件仅当与支持触摸功能的设备进行交互的用户访问您的 jQuery Mobile 网站时才可用.当这些事件可用时,您可以触发任何自定义java script 作为对五种不同的事件的响应tap.taphold.swipe.swipeleft 和 swiperight. tap(轻击):一次快速完整的轻击后触发 taphold(轻击不放):轻击并不放(大约一秒)后触发 swipe(滑动):一秒内水平拖拽大于3
-
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
本文实例讲述了jQuery实现响应鼠标事件的图片透明效果.分享给大家供大家参考,具体如下: 实现的思想: 1.当鼠标放在图片上面的时候触发mouseover mouseenter两个事件(图片变得透明) 2.当鼠标离开图片的时候触发mouseleave mouseout两个事件(图片变为不透明) 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or
-
IE8下jQuery改变png图片透明度时出现的黑边
png24格式的图片在用jQuery添加显示隐藏动画时发现,图片的半透明区域出现黑边? 在网上搜了搜主要有以下几种办法: 1.把图片保存成PNG-8格式. 2.把背景色一起切入并保存为JPG格式. 以上两种方法我试了试,好像效果并不好png8格式仍就会有黑边. 解决方法: 1.不要直接改变图片的透明度,而是给图片套个容器,去修改这个容器的透明度 2.给这个容器加个颜色相近的背景颜色(非常重要,解决bug的关键就在这一步,) 一般情况下,到此bug就解决了,如果还是有问题,请看下面: 3.给容器加
-
jQuery响应鼠标事件并隐藏与显示input默认值
分享下jQuery如何隐藏和显示 input 默认值的例子. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <
-
jQuery-onload让第一次页面加载时图片是淡入方式显示
复制代码 代码如下: $("#load img").load(function() { //图片默认隐藏 $(this).hide(); //使用fadeIn特效 $(this).fadeIn("5000"); }) <div id="load" class="loading"><img src="images/apple_3_bigger.jpg" style=" height
-
Jquery中使用show()与hide()方法动画显示和隐藏图片
(1)功能描述 在页面中单击"显示"连接,通过show()方法以动画的方式显示一幅图片,同时在方法中执行一个回调函数,用于改变图片的边框样式:单击已显示的图片时,通过hide()以动画的方式隐藏该图片. (2)实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d
-
jQuery鼠标事件汇总
鼠标事件是在用户移动鼠标光标或者使用任意鼠标键点击时触发的. 1.click事件:点击鼠标左键时触发 $('p').click(function(){}); 示例: $('p').click(function(){ alert('click function is running !'); }); 2.dbclick事件:迅速连续的两次点击时触发 $('p').dbclick(function(){}); 示例: $("button").dblclick(function(){ $(&
-
Jquery实现点击切换图片并隐藏显示内容(2种方法实现)
我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['
-
jQuery图片轮播的具体实现
效果如下: 先看一看html代码,以及对应的css代码: 复制代码 代码如下: <div id="scrollPics"> <ul class="slider" > <li><img src="images/ads/1.gif"/></li> <li><img src="images/ads/2.gif"/>&
随机推荐
- python判断给定的字符串是否是有效日期的方法
- SQL server 2005将远程数据库导入到本地的方法
- 详解ios中的SQL数据库文件加密 (使用sqlcipher)
- IOS程序开发之禁止输入表情符号实例代码
- 在Struts2中的结果集类型
- JS 实现点击a标签的时候让其背景更换
- PHPMyAdmin导入时提示文件大小超出PHP限制的解决方法
- Python标准库与第三方库详解
- go语言执行windows下命令行的方法
- Java实现与JS相同的Des加解密算法完整实例
- SQL Server中使用sp_password重置SA密码实例
- MS SQL Server数据库清理错误日志的方法
- Linux SSH 安全策略 更改 SSH 端口
- jquery iframe操作详细解析
- 牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
- C++中的const的使用详解
- 基于断点续传下载原理的实现
- C#索引器介绍
- 中华助企网为您提供500M免费空间服务
- 从请求到响应过程中django都做了哪些处理