jQuery图片鼠标悬停效果-20130620

阅读更多
1、效果及功能说明
鼠标悬停图片放大滑动显示标题

2、实现原理
首先是鼠标触及图片后对图片的进行放大多少的设置 在将要花多少时间来方法设定好 后定义图片不会因为放大而改变位置始终保持居中状态的放大和div不会因为图片的放大和标题的出现而变形 后是标题的设置一个显示的动画结合上图片放大的时间还有就是在鼠标移开后设置图片回复原状的时间和标题消失的动画时间的吻合

3、效果图


jQuery图片鼠标悬停效果-20130620_第1张图片

4、运行环境

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


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

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


7、代码[html5]











	
  • CofeeNerd

  • musiKings

  • The Caribbean Energy Conference 2010

  • Coffee

  • Quantum

  • Infinite Love

  • Fathom

  • Mixed Pome

  • Golf Lessons Online

  • jQuery图片鼠标悬停效果-20130620_第2张图片
  • 大小: 56.4 KB
  • images.rar (287.8 KB)
  • 下载次数: 40
  • jQuery图片鼠标悬停效果-20130620_第3张图片
  • 大小: 119.6 KB
  • 查看图片附件

你可能感兴趣的:(imgIncrease,effectDuration,hover,stop,animate)