jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏
hover事件制作产品图片鼠标滑过图片半透明，标题文字从左到右滑动动画移动显示隐藏
2、实现原理
首先把效果都隐藏，然后定义一个伪类来触发所有的效果，接下来当触发伪类后会有一个遍历停止所有的效果，从新触发效果就是标题的从左边淡出和背景颜色的变化，当鼠标离开图片后触发一个遍历，停止所有动画标题回到原处不见，背景颜色变回原样
主要的方法
- $(".section ul li").hover(function()
- //伪类的触发
- $(this).find(".rsp").stop().fadeTo(500,0.5)
- $(this).find(".text").stop().animate({left:'0'}, {duration: 500})
- //这两段就是标题的淡出和背景颜色的改变
- $(this).find(".rsp").stop().fadeTo(500,0)
- $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
- $(this).find(".text").animate({left:'-318'}, {duration: 0})
- //这三段就让标题回放到原来的位置上去，让背景颜色回到原样
3、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]
- <!DOCTYPE htm>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- </head>
- <body>
- <style type="text/css">
- *{margin:0;padding:0;list-style-type:none;}
- a,img{border:0;}
- body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
- .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
- .clearfix{display:inline-table;}/* Hides from IE-mac \*/
- *html .clearfix{height:1%;}
- .clearfix{display:block;}/* End hide from IE-mac */
- *+html .clearfix{min-height:1%;}
- /* section */
- .section{width:981px;margin:40px auto 0 auto;overflow:hidden;}
- .section ul{width:996px;}
- .section ul li{float:left;margin-right:14px;margin-bottom:13px;display:inline;width:318px;height:343px;overflow:hidden;position:relative;}
- .section ul li .photo{width:318px;height:343px;overflow:hidden;}
- .section .rsp{width:318px;height:343px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;}
- .section .text{position:absolute;width:318px;height:343px;left:-318px;top:0px;overflow:hidden;}
- .section .text h3{width:318px;margin-top:130px;height:55px;line-height:55px;text-align:center;color:#FFFFFF;background:#000000;font-family:"microsoft yahei";font-size:26px;}
- </style>
- <div class="section">
- <ul class="clearfix">
- <li>
- <div class="photo"><img src="data:images/index_28.jpg" width="318" height="343" /></div>
- <div class="rsp"></div>
- <div class="text"><a href="http://www.17sucai.com/"><h3>布品展示</h3></a></div>
- </li>
- <li>
- <div class="photo"><img src="data:images/index_30.jpg" width="318" height="343" /></div>
- <div class="rsp"></div>
- <div class="text"><a href="http://www.17sucai.com/"><h3>新品纵览</h3></a></div>
- </li>
- <li>
- <div class="photo"><img src="data:images/index_32.jpg" width="318" height="343" /></div>
- <div class="rsp"></div>
- <div class="text"><a href="http://www.17sucai.com/"><h3>灵感街拍</h3></a></div>
- </li>
- <li>
- <div class="photo"><img src="data:images/index_36.jpg" width="318" height="343" /></div>
- <div class="rsp"></div>
- <div class="text"><a href="about.asp"><h3>公司故事</h3></a></div>
- </li>
- <li>
- <div class="photo"><img src="data:images/index_29.jpg" width="318" height="343" /></div>
- <div class="rsp"></div>
- <div class="text"><a href="http://www.17sucai.com/"><h3>留言</h3></a> </div>
- </li>
- <li>
- <div class="photo"><img src="data:images/index_38.jpg" width="318" height="343" /></div>
- <div class="rsp"></div>
- <div class="text"><a href="http://www.17sucai.com/"><h3>联系我们</h3></a></div>
- </li>
- </ul>
- <div class="clear"></div>
- </div>
- <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
- <script type="text/javascript">
- $(document).ready(function(){
- //定义一个可以激活所有函数的方法
- $(".section ul li .rsp").hide();
- //获得隐藏元素方法
- $(".section ul li").hover(function(){
- //定义一个伪类鼠标触及事件
- $(this).find(".rsp").stop().fadeTo(500,0.5)
- //当鼠标移动到图片上时通过遍历停止所有运行的动画，获得一个淡出事件
- $(this).find(".text").stop().animate({left:'0'}, {duration: 500})
- //当鼠标移动到图片上时通过遍历停止所有运行的动画，在移动一个动画让标题出从左边出现
- },function(){
- //在jquery 在定义一个方法
- $(this).find(".rsp").stop().fadeTo(500,0)
- //当鼠标离开是通过遍历停止动画在让淡出效果回去
- $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
- //通过遍历停止动画后，在触发一个动画让原本出现的标题开始回收，让背景颜色变化正常
- $(this).find(".text").animate({left:'-318'}, {duration: 0})
- //通过遍历制动动画，发出动画让标题回到原位，让背景值变回0
- });
- });
- </script>
- </body>
- </html>
- images.rar (381 KB)
- hover事件鼠标滑过图片半透明标题文字滑动显示隐藏images.rar (381 KB)
jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏的更多相关文章
- 图片鼠标滑过图片半透明(jquery特效)
在做瑞祥之旅的过程,有一个部分是材料体系,材料体系下面.预览效果
- 鼠标滑过图片变暗文字链接滑出jQuery特效
效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...
- jQuery实现的鼠标滑过切换图片代码实例
jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...
- 鼠标滑过图片添加边框图片无位移[xyytit]
实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...
- 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)
像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...
- jQuery实现鼠标滑过图片列表加遮罩层
这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...
- jquery hover事件只触发一次动画
最近工作时遇到个关于动画的问题,如下: $("div").hover( function() { $(this).animate({"margin-top":& ...
- jQuery hover事件
hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到 ...
- Jquery hover 事件
hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素上面时 ...
随机推荐
- Drupal 7.23：函数module_invoke_all()注释
/** * Invokes a hook in all enabled modules that implement it. * * All arguments are passed by value ...
- dzzoffice教程、文档、开发手册等内容地址
dzzoffice教程.文档.开发手册等内容全部都存放在DzzOffice开发者社区的文集中.搜索引擎收录不到DzzOffice中的应用内容,这里将文集地址提供在这里. 地址:http://dev.d ...
- Epic - Coin Change
Something cost $10.25 and the customer pays with a $20 bill, the program will print out the most eff ...
- css:outline
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- 初识MFC学习——Hello World
MFC(Microsoft Foundation Classes),是一个微软公司提供的类库(class libraries),以C++类的形式封装了Windows的API,并且包含一个应用程序框架, ...
- 解读Cardinality Estimation<基数估计>算法（第一部分：基本概念）
基数计数(cardinality counting)是实际应用中一种常见的计算场景,在数据分析.网络监控及数据库优化等领域都有相关需求.精确的基数计数算法由于种种原因,在面对大数据场景时往往力不从心, ...
- Java多线程之 ThreadLocal
一.什么是ThreadLocal? 顾名思义它是local variable(线程局部变量).它的功用非常简单,就是为每一个使用该变量的线程都提供一个变量值的副本,是每一个线程都可以独立地改变自己的副 ...
- AWS Summit 2014 San Francisco站总结
我上个月去San Francisco参加了AWS Summit 2014 会议,总结一下参加这个会议的情况. 什么是AWS Summit? AWS Summit 是AWS在全球各地举办的,针对AWS用 ...
- NovaMind *的安装、和谐破解到永久使用
XMind *思维导图的安装步 同类型的软件,这两款软件: XMind 和 NovaMind,各有所长.建议,都安装,合适的时候方便使用. XMind界面如下: NovaMind界面如下: 本博文,主 ...
- 【原】创建Hive表，分号分隔符“；”引起的异常
[障碍再现] 在创建支持Map数据结构的Hive表时,抛出如下异常 hive> create table tab_map(name string,info map<string,strin ...