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、效果图
4、运行环境
IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现
5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合
6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来,将保存类型(T)换成(所有文件(*.*)),将html5和解压后的图片文件夹放在同一个文件夹内效果
7、代码[html5]