前端技术|jQuery 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮-20130714 jQuery|学习

1、效果及功能说明

鼠标悬停到图片时，浮动高亮透明层随着鼠标悬停的图片相应滑动到当前图片高亮显示

2、实现原理

先定义好给图片加透明层的效果但后先去掉，当鼠标移动到图片的上面立即触动一个方法让给透明层的通过一个动画进入到用户的视野里，从高度和宽度都是设定的图片的两倍后在开始缩小直接到和原图片一样大小位置，随着鼠标移动到那张图片而移动

主要的方法

$('.box').bind('mouseover',function() //隐藏掉鼠标的上的改变背景颜色的效果 $(".boxBor").css({ width:'100%', height:$(window).height(), left:'0px', top:'0px', opacity:0, display:'block' }) 当鼠标触及到图片后开始显示这个效果

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/9251/2f483835-8b98-3955-88ed-779bc3433ef0.jpg[/img]

4、运行环境

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

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

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

7、代码[html5]

*{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)); } 文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片文章图片