jQuery 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮-20130714
1、效果及功能说明
鼠标悬停到图片时，浮动高亮透明层随着鼠标悬停的图片相应滑动到当前图片高亮显示
2、实现原理
先定义好给图片加透明层的效果但后先去掉，当鼠标移动到图片的上面立即触动一个方法让给透明层的通过一个动画进入到用户的视野里，从高度和宽度都是设定的图片的两倍后在开始缩小直接到和原图片一样大小位置，随着鼠标移动到那张图片而移动
主要的方法
$('.box').bind('mouseover',function()//隐藏掉鼠标的上的改变背景颜色的效果$(".boxBor").css({width:'100%',height:$(window).height(),left:'0px',top:'0px',opacity:0,display:'block'})当鼠标触及到图片后开始显示这个效果
<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">*{margin:0;padding:0;list-style-type:none;}a,img{border:0;}body{background:#eee;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}.demo{width:490px;margin:30px auto;}.box{float:left;width:100px;height:100px;border:1px solid white;background:#EEE;margin:10px;position:relative;display:inline;}.box a{display:block;width:100px;height:100px;overflow:hidden;position:absolute;left:0;top:0;z-index:9;}.boxBor{position:absolute;left:0;top:0;display:none;border:1px solid white;z-index:4;background:#fff;background:-moz-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));background:-webkit-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));background:-o-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));background:-ms-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));}</style><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script></head><body><div height="100" src="images/girl.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl2.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl3.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl4.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl5.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl2.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl3.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl4.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl5.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div height="100" src="images/girl2.jpg" alt="jQuery 鼠标悬停到图少时浮动高亮透明层滑动到当前图片高亮-20130714" /></div><div style="clear:both;"></div></div><script type="text/javascript">$(function(){$('.box').bind('mouseover',function(){//定义一个隐藏方法鼠标移动到上面改变背景颜色的方法var oPosition=$(this).position();//定义参数var oThis=$(this);//定义参数$('.boxBor').queue('fnHide');//定义方法显示或操作在匹配元素上执行if($(".boxBor").attr('deta-switch')!=='true'){//定义改变图像的 width 属性方法$(".boxBor").attr('deta-switch','true');//定义改变图像的 width 属性方法$(".boxBor").css({width:'100%',height:$(window).height(),left:'0px',top:'0px',opacity:0,display:'block'})//通过jquery 来修改 css 修改的有长度 高度 距左和距上 透明度 和是否隐藏}$(".boxBor").stop(false,false).animate({//定义停止当前正在运行的动画方法opacity:0.8,//让透明度为0.8left:oPosition.left+10,//距左为oPosition参数的距左再加10top:oPosition.top+10,//距上oPosition参数的距左再加10width:oThis.width(),//长度oThis参数长度height:oThis.height()//长度oThis参数宽度},250)//全部完成时间0.25秒});})</script></body></html>