jQuery 鼠标滑过产品图片背景高亮闪烁显示-20130717

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

鼠标滑过悬停特效,div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示,产品标题滑动显示或隐藏

2、实现原理

首先定义好一个重复实现效果的方法,然后定义光带出现速度和从什么位置出现,在定义当鼠标触及到图片后标题出什么位置出现到什么为位置停止,中间要花多少时间,最后在定义当鼠标离开图片后标题缩回去到那里和用的时间

主要的方法

$(this).find(".shine").css("background-position","-160px 0");
//定义重复的动画效果

$(this).find(".shine").animate({backgroundPosition: '160px 0'},500);
//定义光带的动画效果和用时

$(this).find(".title").stop().animate({left:'0px'},{queue:false,duration:450});
//鼠标触及后的标图出现的到那里停止和用时

$(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200})
//鼠标离开后标题的回缩到哪里和用时



3、效果图


jQuery 鼠标滑过产品图片背景高亮闪烁显示-20130717_第1张图片

4、运行环境

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


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

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


7、代码[html5]

















  • jQuery 鼠标滑过产品图片背景高亮闪烁显示-20130717_第2张图片
  • 大小: 46.9 KB
  • images.rar (40.3 KB)
  • 下载次数: 2
  • 查看图片附件

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