jquery鼠标悬停变暗突出显示特效js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery鼠标悬停变暗突出显示特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>jquery鼠标悬停变暗突出显示特效</title>
<meta http-equiv="x-ua-compatible" content="ie=7" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="style/style_home1.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="pic_show">
  <ul id="Album">
    <li><a href="#" ><em></em><img src="images/2012/05/18/tiezhu18274938.jpg" /></a>
      <div class="Album_info"><strong>孟祥义</strong><span>企业主</span><span><i>建筑/装饰/房地产</i><i>北京市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/10/cnxcgg18226059.gif" /></a>
      <div class="Album_info"><strong>颜经理</strong><span>销售/贸易经理</span><span><i>机械/行业设备</i><i>聊城</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/01/xiaomila18352751.jpg" /></a>
      <div class="Album_info"><strong>吴健军</strong><span>营运总监/经理</span><span><i>餐饮美食</i><i>成都市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/05/27/ganlu64699537411.jpg" /></a>
      <div class="Album_info"><strong>甘露</strong><span>商人</span><span><i>文教传媒</i><i>北京</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/18/ahyjgydp18274398.jpg" /></a>
      <div class="Album_info"><strong>左杰</strong><span>网店经营者</span><span><i>建筑/装饰/房地产</i><i>济南</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2009/12/28/dyjczr2458338.JPG" /></a>
      <div class="Album_info"><strong>邓寅杰</strong><span>法务工作者</span><span><i>知识产权服务</i><i>武汉市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/17/fl59818267161.jpg" /></a>
      <div class="Album_info"><strong>张清</strong><span>企业主</span><span><i>矿采/勘探/冶金/材料</i><i>聊城市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/17/andrew99918264435.jpg" /></a>
      <div class="Album_info"><strong>沈生</strong><span>农民</span><span><i>建筑/装饰/房地产</i><i>贵港市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/11/10/sunxie00714665167.jpg" /></a>
      <div class="Album_info"><strong>孙勰</strong><span>客户经理</span><span><i>印刷/包装/纸业</i><i>无锡市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/18/xinyangmeizhi18431241.jpg" /></a>
      <div class="Album_info"><strong>竺永涛</strong><span>网络营销/推广主管</span><span><i>汽摩及运输设备</i><i>西安</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/16/bella072618261027.jpg" /></a>
      <div class="Album_info"><strong>许源</strong><span>市场/公关经理</span><span><i>广告服务</i><i>上海市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/03/30/b6238592186829143.jpg" /></a>
      <div class="Album_info"><strong>何龙飞</strong><span>物流/运输工作者</span><span><i>物流服务</i><i>上海市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/08/01/zhoujie88111018629335.jpg" /></a>
      <div class="Album_info"><strong>周杰</strong><span>市场/公关经理</span><span><i>电气、电工器材</i><i>南京市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/11/qiboxixi18397697.jpg" /></a>
      <div class="Album_info"><strong>章旭丹</strong><span>客服经理/主管</span><span><i>互联网</i><i>杭州</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2008/10/17/ykm6781353336.jpg" /></a>
      <div class="Album_info"><strong>姚克明</strong><span>人文/社科工作者</span><span><i>文教传媒</i><i>青岛市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/18/zhejiangyouli18429164.jpg" /></a>
      <div class="Album_info"><strong>翁小姐</strong><span>市场推广/促销工作者</span><span><i>药品保健/医疗器械</i><i>杭州市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/08/hdfxuemei18384033.jpg" /></a>
      <div class="Album_info"><strong>陈雪梅</strong><span>销售/贸易经理</span><span><i>电子/电工/ 照明</i><i>佛山</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/11/toyess18232390.jpg" /></a>
      <div class="Album_info"><strong>叶珊珊</strong><span>商人</span><span><i>服装/服饰/鞋袜</i><i>杭州市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2006/12/08/ylnba260720.jpg" /></a>
      <div class="Album_info"><strong>杨林~洞庭飞虹</strong><span>系统集成工程师</span><span><i>互联网</i><i>广州市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/13/yixiao201218410453.jpg" /></a>
      <div class="Album_info"><strong>刘付顺</strong><span>销售/贸易经理</span><span><i>电子/电工/ 照明</i><i>温州市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/01/25/conglin184529256.jpg" /></a>
      <div class="Album_info"><strong>价值工程</strong><span>记者/编辑</span><span><i>出版/图书</i><i>石家庄市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/09/25/shiyanyq13146219.jpg" /></a>
      <div class="Album_info"><strong>许爱红</strong><span>销售总监/经理</span><span><i>仪器/仪表</i><i>厦门</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/13/jshzgk18410398.jpg" /></a>
      <div class="Album_info"><strong>申总</strong><span>总裁/总经理（GM）</span><span><i>建筑工程服务</i><i>盐城</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/21/qiantan18289175.jpg" /></a>
      <div class="Album_info"><strong>方忠良</strong><span>企业主</span><span><i>橡胶板、管、带</i><i>建德市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/05/12/vezzs088795861.jpg" /></a>
      <div class="Album_info"><strong>田彦</strong><span>记者/编辑</span><span><i>文教传媒</i><i>石家庄</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/11/03/nr52014421195.png" /></a>
      <div class="Album_info"><strong>李晓鹏</strong><span>企业主</span><span><i>食品/饮料</i><i>上海</i></span></div>
    </li>
    <li class="album_big"><a href="#" id="you_logo" ><img src="images/you.png" /></a></li>
    <li><a href="#" ><em></em><img src="images/2012/05/16/fuma888818258981.jpg" /></a>
      <div class="Album_info"><strong>田琼</strong><span>客户经理</span><span><i>机械/行业设备</i><i>东莞市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/17/cbdengxiang18265058.jpg" /></a>
      <div class="Album_info"><strong>李有忠</strong><span>企业主</span><span><i>广告服务</i><i>宿迁</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/07/31/liuhuawei52018624324.jpg" /></a>
      <div class="Album_info"><strong>刘先生</strong><span>外贸工作者</span><span><i>商务咨询</i><i>上海市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/18/szhwdh18273613.jpg" /></a>
      <div class="Album_info"><strong>陈梅红</strong><span>销售/贸易经理</span><span><i>环保/降耗</i><i>深圳市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/04/13/peterkuo18102411.jpg" /></a>
      <div class="Album_info"><strong>郭江涛</strong><span>设计师</span><span><i>工艺品/礼品/玩具</i><i>上海市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/09/zalj5518224988.jpg" /></a>
      <div class="Album_info"><strong>李静</strong><span>销售/贸易经理</span><span><i>金属制品/五金工具</i><i>冠县</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2006/12/04/gim130254757.JPG" /></a>
      <div class="Album_info"><strong>高明元</strong><span>首席销售官（CSO）</span><span><i>家用电器</i><i>嘉兴市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/30/hangzhouronghe18341006.jpg" /></a>
      <div class="Album_info"><strong>杜文全</strong><span>企业主</span><span><i>建筑/装饰/房地产</i><i>杭州</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/07/gzrxck18378784.jpg" /></a>
      <div class="Album_info"><strong>李丹</strong><span>销售总监/经理</span><span><i>电脑/数码/软件</i><i>广州</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/07/31/anmoyikaluli18624089.jpg" /></a>
      <div class="Album_info"><strong>卡路里</strong><span>营运总监/经理</span><span><i>体育/休闲/娱乐</i><i>天津市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/01/04/silencesky16652465.jpg" /></a>
      <div class="Album_info"><strong>郑余</strong><span>网络营销/推广工作者</span><span><i>机械/行业设备</i><i>长沙市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/05/20/john28789167239.JPG" /></a>
      <div class="Album_info"><strong>马刚</strong><span>销售/贸易经理</span><span><i>机械/行业设备</i><i>上海市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/11/08/zhidutang18929840.jpg" /></a>
      <div class="Album_info"><strong>王经理</strong><span>广告工作者</span><span><i>广告服务</i><i>杭州</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2010/06/07/chinext3011392.jpg" /></a>
      <div class="Album_info"><strong>聂连兴</strong><span>外贸工作者</span><span><i>国际/国内贸易</i><i>东莞市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/07/30/nozzles18621930.jpg" /></a>
      <div class="Album_info"><strong>彭亮</strong><span>客服经理/主管</span><span><i>金属制品/五金工具</i><i>东莞市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/17/gsl88888818264936.jpg" /></a>
      <div class="Album_info"><strong>苟尚林</strong><span>销售/贸易经理</span><span><i>工艺品/礼品/玩具</i><i>宁波市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/09/11/abin9718759645.jpg" /></a>
      <div class="Album_info"><strong>谢焰斌</strong><span>销售/贸易经理</span><span><i>家用电器</i><i>合肥市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/18/meitujiaoyu18271615.png" /></a>
      <div class="Album_info"><strong>美途教育</strong><span>职业教育/培训教师</span><span><i>培训教育服务</i><i>成都</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/07/15/paobujili11331647.jpg" /></a>
      <div class="Album_info"><strong>李珊</strong><span>渠道总监/经理</span><span><i>购物消费</i><i>天津市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/05/11/wys1988bj18232518.jpg" /></a>
      <div class="Album_info"><strong>韦颖硕</strong><span>网站编辑</span><span><i>互联网</i><i>杭州市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/06/hzjingcai18375496.jpg" /></a>
      <div class="Album_info"><strong>立欣净菜</strong><span>其他</span><span><i>食品/饮料</i><i>杭州市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/07/06/buojia9811111791.jpg" /></a>
      <div class="Album_info"><strong>洪欣</strong><span>销售代表</span><span><i>印刷/包装/纸业</i><i>东莞市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/09/29/zbqjcn18817509.jpg" /></a>
      <div class="Album_info"><strong>苗正华</strong><span>销售/贸易经理</span><span><i>机械/行业设备</i><i>盐城</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2012/06/04/shasadream18362505.jpg" /></a>
      <div class="Album_info"><strong>沈华冬</strong><span>营运总监/经理</span><span><i>互联网</i><i>杭州市</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2007/10/17/hejun9990772064.JPG" /></a>
      <div class="Album_info"><strong>何俊</strong><span>市场分析/调查工作者</span><span><i>机械/行业设备</i><i>杭州</i></span></div>
    </li>
    <li><a href="#" ><em></em><img src="images/2011/05/23/precisiontube9318296.jpg" /></a>
      <div class="Album_info"><strong>董劲松</strong><span>首席销售官（CSO）</span><span><i>机械/行业设备</i><i>常州</i></span></div>
    </li>
  </ul>
</div>
<script type="text/javascript" src="js/album.js"></script>
<script>
Album.set('#Album')
</script>
</body>
</html>

JS代码(album.js):

// JavaScript Documentvar Album = (function($){
	function album(o){
	this.int(o)}
;
	album.prototype ={
	int:function(o){
	var that = this;
	this.aImg = $(o).find('img');
	this._css = null;
	this.iLoad = 0;
	this.zoom = 1.5;
	this.i=0;
	this.ok = false;
	this.aEm = $('em',$(o));
	this.tLayer = null;
	this.aImg.each(function(){
	$(this).load(function(){
	that.iLoad++;
	if(that.iLoad==that.aImg.length&&!that.ok){
	that.pos(o);
}
}
)}
);
	setTimeout(function(){
	if(!that.ok){
	that.pos(o);
}
}
,2000);
}
,pos:function(o){
	var that = this;
	that.ok = true;
	$('a',$(o)).each(function(){
	var oP = $(this).parent();
	var oS = $(this).siblings('.Album_info');
	oP.css({
	'width':$('img',this).width(),'height':$('img',this).height()}
)$(this).css({
	'top':oP.position().top,'left':oP.position().left}
);
	$('em',this).css({
	'height':oP.height(),'filter':'alpha(opacity=50)'}
);
	if($(o).width()-oP.position().left>=$(this).width()*6){
	oS.css({
	'height':Math.round($(this).height()*that.zoom)+4,'left':oP.position().left-2,'right':'auto','padding-left':Math.round($(this).width()*that.zoom)}
)}
else{
	oS.css({
	'height':$(this).height()*that.zoom+4,'right':$(o).width()-oP.position().left-$(this).width()-2,'left':'auto','padding-right':Math.round($(this).width()*that.zoom),'text-align':'right'}
)}
if(oP.position().top>=Math.round($(this).height()*(that.zoom-1)/2)&&$(o).height()-oP.position().top-$(this).height()>=Math.round($(this).height()*(that.zoom-1)/2)){
	oS.css('top',oP.position().top-Math.round($(this).height()*(that.zoom-1)/2)-2)}
else if(oP.position().top<Math.round($(this).height()*(that.zoom-1)/2)){
	oS.css('top',$(this).parent().position().top-2)}
else{
	oS.css('top',$(this).parent().position().top-Math.round($(this).height()*(that.zoom-1)+2))}
}
);
	this.showImg(o)}
,showImg:function(o){
	var that = this;
	$('li',$(o)).each(function(){
	$('a',this).css({
	'visibility':'visible','display':'none'}
).fadeIn(1000);
}
)setTimeout(function(){
	$(o).css({
	'background':'none'}
);
	that.hover(o);
}
,1000)}
,hover:function(o){
	var that = this;
	$('a',$(o)).hover(function(){
	var oP = $(this).parent();
	var oS = $(this).siblings('.Album_info');
	$('em',this).hide();
	if(that.tLayer){
	clearTimeout(that.tLayer);
	that.tLayer = null}
that.aEm.not($('em',this)).each(function(){
	if(!$(this).is(':visible')){
	$(this).fadeIn(200)}
}
);
	oS.show().animate({
	width:$(this).width()*6-Math.round($(this).width()*that.zoom)+7}
,300);
	that._css ={
	'top':oP.position().top,'z-index':$(this).css('z-index'),'width':$(this).width(),'height':$(this).height(),'left':$(this).css('left'),'right':$(this).css('right')}
;
	if($(o).width()-oP.position().left>=$(this).width()*6){
	$(this).css({
	'right':'auto','left':parseInt(oS.css('left'))+2}
)}
else{
	$(this).css({
	'right':parseInt(oS.css('right'))+2,'left':'auto'}
)}
$(this).css({
	'top':parseInt(oS.css('top'))+2,'width':$(this).width()*that.zoom,'height':$(this).height()*that.zoom,'z-index':$(this).css('z-index')+100}
)$(this).children('img').css({
	'width':$(this).width(),'height':$(this).height()}
)}
,function(){
	$('.Album_info').hide().css({
	'width':'auto'}
).stop();
	$(this).css(that._css);
	$(this).children('img').css({
	'width':that._css.width,'height':that._css.height}
)that.tLayer = setTimeout(function(){
	that.aEm.fadeOut(200)}
,200)}
)}
}
return{
	set:function(o){
	new album(o)}
}
}
)(jQuery)

CSS代码(style_home1.css):

*{word-break:break-all;word-wrap:break-word;}
body,select,th,td,input,textarea,button{font:12px/1.5em Arial,Tahoma,Helvetica,snas-serif;}
body,h1,h2,h3,h4,h5,h6,p,ul,dl,dt,dd,form,fieldset{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:1em;}
ul{list-style:none;}
img{border:0;}
a:link{color:#333;text-decoration:none}
a:visited{color:#555;text-decoration:none}
a:hover{color:#f40;text-decoration:underline}
a.uline,a.uline:visited,.uline a,.uline a:visited{text-decoration:underline}
a.uline:hover{text-decoration:none}
.f10{font-size:10px;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.s{font-weight:normal}
.b{font-weight:bold}
a.green:link,a.green:visited,.green{color:#599914}
a.black:link,a.black:visited,.black{color:#345}
a.red:link,a.red:visited,.red{color:#e00}
.zs{color:#A71CBC}
a.gray:link,a.gray:visited,.gray,.gray a,.gray a:visited{color:#81839a}
a.blue:link,a.blue:visited,.blue,.blue a,.blue a:visited{color:#004Ba6}
.dno{display:none}
.l{float:left;}
.r{float:right;}
/* album */
#pic_show{width:714px;margin:50px auto;}
#Album li,#Album{list-style:none;}
#Album{position:relative;background:url(../images/loader.gif) no-repeat center;height:203px;}
#Album li{float:left;margin:1px 1px 0px 0px;display:inline;}
#Album li img{width:50px;height:50px;}
#Album .album_big{float:right;}
#Album .album_big span{width:43px;height:31px;background:url(../images/you_s.png);position:absolute;right:0px;bottom:0px;margin:0px;padding:0px;text-indent:-999px;overflow:hidden;}
.album_big img{width:101px!important;height:101px!important;}
#Album .album_big a{width:101px!important;height:101px!important;}
#Album li strong{display:block;color:#FFFFFF;font-size:12px;line-height:16px;padding:0px 10px;margin-top:8px;white-space:nowrap;}
#Album li span{display:block;color:#FFFFFF;font-size:12px;line-height:16px;padding:0px 10px;margin-top:5px;white-space:nowrap;}
#Album li a{position:absolute;z-index:100;visibility:hidden;}
#Album li a em{width:100%;position:absolute;top:0px;left:0px;display:none;opacity:0.5;filter:alpha(opacity=50);background:#000000;}
#Album img{border:0px;border:none;}
#Album .Album_info{display:none;position:absolute;background:#4bae41;z-index:101;-moz-box-shadow:0 0 10px #000000;-webkit-box-shadow:0 0 10px #000000;box-shadow:0 0 10px #000000;}
#Album .Album_info i{font-size:12px;margin-right:5px;font-style:normal;font-weight:normal;}

附件:下载该文件资源,减少时间成本(增值服务)