1、效果及功能说明

hover事件制作产品图片鼠标滑过图片半透明，标题文字从左到右滑动动画移动显示隐藏

2、实现原理

首先把效果都隐藏，然后定义一个伪类来触发所有的效果，接下来当触发伪类后会有一个遍历停止所有的效果，从新触发效果就是标题的从左边淡出和背景颜色的变化，当鼠标离开图片后触发一个遍历，停止所有动画标题回到原处不见，背景颜色变回原样

主要的方法

  1. $(".section  ul li").hover(function()
  2. //伪类的触发
  3. $(this).find(".rsp").stop().fadeTo(500,0.5)
  4. $(this).find(".text").stop().animate({left:'0'}, {duration: 500})
  5. //这两段就是标题的淡出和背景颜色的改变
  6. $(this).find(".rsp").stop().fadeTo(500,0)
  7. $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
  8. $(this).find(".text").animate({left:'-318'}, {duration: 0})
  9. //这三段就让标题回放到原来的位置上去，让背景颜色回到原样

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

  1. <!DOCTYPE htm>
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. </head>
  5. <body>
  6. <style type="text/css">
  7. *{margin:0;padding:0;list-style-type:none;}
  8. a,img{border:0;}
  9. body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
  10. .clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
  11. .clearfix{display:inline-table;}/* Hides from IE-mac \*/
  12. *html .clearfix{height:1%;}
  13. .clearfix{display:block;}/* End hide from IE-mac */
  14. *+html .clearfix{min-height:1%;}
  15. /* section */
  16. .section{width:981px;margin:40px auto 0 auto;overflow:hidden;}
  17. .section ul{width:996px;}
  18. .section ul li{float:left;margin-right:14px;margin-bottom:13px;display:inline;width:318px;height:343px;overflow:hidden;position:relative;}
  19. .section ul li .photo{width:318px;height:343px;overflow:hidden;}
  20. .section .rsp{width:318px;height:343px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;}
  21. .section .text{position:absolute;width:318px;height:343px;left:-318px;top:0px;overflow:hidden;}
  22. .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;}
  23. </style>
  24. <div class="section">
  25. <ul class="clearfix">
  26. <li>
  27. <div class="photo"><img src="data:images/index_28.jpg" width="318" height="343" /></div>
  28. <div class="rsp"></div>
  29. <div class="text"><a href="http://www.17sucai.com/"><h3>布品展示</h3></a></div>
  30. </li>
  31. <li>
  32. <div class="photo"><img src="data:images/index_30.jpg" width="318" height="343" /></div>
  33. <div class="rsp"></div>
  34. <div class="text"><a href="http://www.17sucai.com/"><h3>新品纵览</h3></a></div>
  35. </li>
  36. <li>
  37. <div class="photo"><img src="data:images/index_32.jpg" width="318" height="343" /></div>
  38. <div class="rsp"></div>
  39. <div class="text"><a href="http://www.17sucai.com/"><h3>灵感街拍</h3></a></div>
  40. </li>
  41. <li>
  42. <div class="photo"><img src="data:images/index_36.jpg" width="318" height="343" /></div>
  43. <div class="rsp"></div>
  44. <div class="text"><a href="about.asp"><h3>公司故事</h3></a></div>
  45. </li>
  46. <li>
  47. <div class="photo"><img src="data:images/index_29.jpg" width="318" height="343" /></div>
  48. <div class="rsp"></div>
  49. <div class="text"><a href="http://www.17sucai.com/"><h3>留言</h3></a> </div>
  50. </li>
  51. <li>
  52. <div class="photo"><img src="data:images/index_38.jpg" width="318" height="343" /></div>
  53. <div class="rsp"></div>
  54. <div class="text"><a href="http://www.17sucai.com/"><h3>联系我们</h3></a></div>
  55. </li>
  56. </ul>
  57. <div class="clear"></div>
  58. </div>
  59. <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
  60. <script type="text/javascript">
  61. $(document).ready(function(){
  62. //定义一个可以激活所有函数的方法
  63. $(".section ul li .rsp").hide();
  64. //获得隐藏元素方法
  65. $(".section  ul li").hover(function(){
  66. //定义一个伪类鼠标触及事件
  67. $(this).find(".rsp").stop().fadeTo(500,0.5)
  68. //当鼠标移动到图片上时通过遍历停止所有运行的动画，获得一个淡出事件
  69. $(this).find(".text").stop().animate({left:'0'}, {duration: 500})
  70. //当鼠标移动到图片上时通过遍历停止所有运行的动画，在移动一个动画让标题出从左边出现
  71. },function(){
  72. //在jquery 在定义一个方法
  73. $(this).find(".rsp").stop().fadeTo(500,0)
  74. //当鼠标离开是通过遍历停止动画在让淡出效果回去
  75. $(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
  76. //通过遍历停止动画后，在触发一个动画让原本出现的标题开始回收，让背景颜色变化正常
  77. $(this).find(".text").animate({left:'-318'}, {duration: 0})
  78. //通过遍历制动动画，发出动画让标题回到原位，让背景值变回0
  79. });
  80. });
  81. </script>
  82. </body>
  83. </html>

jQuery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏的更多相关文章

  1. 图片鼠标滑过图片半透明(jquery特效)

    在做瑞祥之旅的过程,有一个部分是材料体系,材料体系下面.预览效果

  2. 鼠标滑过图片变暗文字链接滑出jQuery特效

    效果体验:http://hovertree.com/texiao/jquery/7.htm HTML文件代码: <!DOCTYPE html> <html xmlns="h ...

  3. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  4. 鼠标滑过图片添加边框图片无位移[xyytit]

    实现下面的效果,鼠标滑过图片添加边框图片无位移——鼠标滑过,图片只是加了边框,不会晃动: 参考代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML ...

  5. 利用jQuery无缝滚动插件liMarquee实现图片(链接)和文字(链接)向右无缝滚动(兼容ie7+)

    像新闻类的版块经常要求一条条的新闻滚动出现,要实现这种效果,可以使用jQuery无缝滚动插件liMarquee. 注意: 1. 它的兼容性是IE7+,及现代浏览器. 2. 引用的jquery的版本最好 ...

  6. jQuery实现鼠标滑过图片列表加遮罩层

    这个例子实现的功能是:有一列图片列表,鼠标滑过时,将有遮罩层的另一张图盖在该图片的上方,实现鼠标hover的效果. 一.HTML代码: <div class="home-content ...

  7. jquery hover事件只触发一次动画

    最近工作时遇到个关于动画的问题,如下: $("div").hover( function() { $(this).animate({"margin-top":& ...

  8. jQuery hover事件

    hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种"保持在其中"的状态. 当鼠标移动到 ...

  9. Jquery hover 事件

    hover(over,out)一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素上面时 ...

随机推荐

  1. 关于浮动-float

    1.存在浏览器兼容问题:js代码 2.对于这种存在浏览器兼容问题的问题,我们可以绕开兼容性问题,先在css样式写好,然后通过该变className 3.学习的博客 https://paran.io/c ...

  2. 4. 2D绘制与控件绘制

    绘制基本图形和文本 绘制图形和文本的基本方法 drawPoint(绘制点).drawLine(绘制直线).drawCircle(绘制圆) drawArc(绘制弧).drawText(绘制文本) pac ...

  3. 将垃圾送入无底洞，顺便整理dev知识

    相信用过Linux的童鞋们都用过crontab来做定时任务,不需要额外的安装程序和配置,一条简单的语句搞定定时任务,但是小伙伴们发现了没,如果你的定时任务执行频率很高而且会产生大量的输出的话,你的老爷 ...

  4. JavaScript高级程序设计（第三版）第三章 基本概念

    3.3 变量 在使用var声明但未对其加以初始化时,这个变量的值就是undefinded. var message; //这个变量声明之后默认取得了undefinded值 //下面这个变量并没有声明 ...

  5. STL源码分析读书笔记--第二章--空间配置器（allocator）

    声明:侯捷先生的STL源码剖析第二章个人感觉讲得蛮乱的,而且跟第三章有关,建议看完第三章再看第二章,网上有人上传了一篇读书笔记,觉得这个读书笔记的内容和编排还不错,我的这篇总结基本就延续了该读书笔记的 ...

  6. Java基础 —— Java常用类

    Java常用类: java.lang包: java.lang.Object类: hashcode()方法:返回一段整型的哈希码,代表地址. toString()方法:返回父类名+"@&quo ...

  7. Codeforces Educational Codeforces Round 15 E - Analysis of Pathes in Functional Graph

    E. Analysis of Pathes in Functional Graph time limit per test 2 seconds memory limit per test 512 me ...

  8. pku3663 Costume Party

    http://poj.org/problem?id=3663 二分查找 #include <stdio.h> #include <stdlib.h> ]; int bs(int ...

  9. nodejs 基本操作

    查看nodejs版本 nodejs -v 升级nodejs node有一个模块叫n(这名字可够短的...),是专门用来管理node.js的版本的.首先安装n模块:npm install -g n 第二 ...

  10. 好用的shell命令行: fish的配置

    fish的可视化配置命令: $ fish_config 其配置文件夹为 ~/.config/fish. 1.要设置环境变量,在配置文件夹里新建 config.fish 文件,它会作为fish 启动时的 ...