jQuery hover鼠标悬停品牌图片旋转动画展示-20130716

阅读更多
1、效果及功能说明

hover鼠标悬停图片特效,品牌图片列表通过鼠标滑过品牌图片旋转动画展示,鼠标离开品牌图片旋转回来

2、实现原理

利用图片上下开始减少px知道变成一条直线后,让黑色背景的第二章图片通过动画效果从最下面出现后来把原本第一条直线替代成第二章图片的黑线在增加黑线的上下px,和现在白色的字体给用户带来旋转的效果

主要的方法

$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function()
//就是让原本图变成一条居中的直线
$(this).find('b').animate({'height':0,'top':'35px'},d,function()
//就是让第二章背景黑色图片变成一条直线


3、效果图


jQuery hover鼠标悬停品牌图片旋转动画展示-20130716_第1张图片

4、运行环境

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


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

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


7、代码[html5]










兰芝 丝塔芙 玉兰油 高丝 美宝莲 水之密语 曼秀雷敦 JUST BB 玉兰油
兰芝 丝塔芙 玉兰油 高丝 美宝莲 水之密语 曼秀雷敦 JUST BB 玉兰油
  • jQuery hover鼠标悬停品牌图片旋转动画展示-20130716_第2张图片
  • 大小: 43.1 KB
  • images.rar (34.1 KB)
  • 下载次数: 11
  • 查看图片附件

你可能感兴趣的:(find,each,hover,stop,animate)