经典jquery鼠标经过弹出图层特效分享

作者:sky 点击:495 评论:0 发布时间:周三, 04/09/2014 - 00:32 所属分类:表格图层

经典实用的jquery弹出层特效代码，当用户的鼠标经过时在右边窗口弹出显示，这个完美的图层弹出特效兼容所有浏览器。

<!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=gb2312" /> <meta name="keywords" content="站长,网页特效,js特效,js脚本,脚本,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效网" /> <meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。全力打造一流网页特效站！" /> <title>网页特效经典jquery鼠标经过弹出层特效站长特效网首发</title> <style type="text/css"> @charset "utf-8"; html{color: #333;background:#f5f6f8;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;} body,input,select,textarea{font-size:12px;font-family:"微软雅黑", Tahoma, Arial;} img{border:0} ul,li{list-style:none;} #www_zzjs_net{width:980px;margin:9px auto 0 auto;height:323px;position:relative;} #www_zzjs_net div{float:left;} #wwwzzjsnet{width:186px;height:323px;background:url("/img/bg_20110113zzjs_net.gif") repeat-x;margin-right:10px;position:relative;} #wwwzzjsnet .left_bg{width:4px;height:323px;float:left;background:url("/img/bg_left_20110113zzjs_net.gif") no-repeat;} #wwwzzjsnet .right_bg{width:4px;height:323px;float:left;background:url("/img/bg_right_20110113zzjs_net.gif") no-repeat;} #wwwzzjsnet{width:186px;height:323px;background:url("/img/bg_20110113zzjs_net.gif") repeat-x;margin-right:10px;} #wwwzzjsnet .hr{position:absolute;left:4px;background:url("/img/bg_bar_20110113zzjs_net.gif") no-repeat!important;width:178px;height:2px;border:0;margin:0!important;overflow:hidden;padding:0!important;font-size:8px;} #wwwzzjsnet #guide_bar_1{top:62px;} #wwwzzjsnet #guide_bar_2{top:148px;} #wwwzzjsnet #guide_bar_3{top:234px;} #zzjs_net{width:178px;height:323px;float:left;} #zzjs_net .guide_ad{width:150px;height:36px;margin:18px 0 0 16px;display:block;overflow:hidden; font-size:28px;} .www__zzjs__net{z-index:10;position:absolute;left:16px;padding:8px 15px 0 43px;display:block;width:110px;height:73px;line-height:21px;clear:both;background:url("/img/bg_text_20110113zzjs_net.gif") no-repeat;} #zzjs_1{top:64px;background-position:0px 7px;} #zzjs_2{top:150px;background-position:0px -79px;} #zzjs_3{top:241px;background-position:0px -170px;height:69px;padding-top:3px;} #zzjs_1.c{background-position:-210px 7px;} #zzjs_2.c{background-position:-210px -79px;} #zzjs_3.c{background-position:-210px -170px;} .www__zzjs__net a.u{color:#999;} .zzjs__net{width:590px;height:323px;position:absolute;left:183px;top:0;display:none;z-index:4;background:url("/img/bg_overlay_20110113zzjs_net.gif") no-repeat;overflow:hidden;} .home_overlay_btn{z-index:5;width:210px;height:84px;position:absolute;left:6px;display:none;} #home_overlay_btn_1{top:62px;background:url("/img/bg_btn1_20110113zzjs_net.gif") no-repeat;} #home_overlay_btn_2{top:148px;background:url("/img/bg_btn2_20110113zzjs_net.gif") no-repeat;} #home_overlay_btn_3{top:234px;background:url("/img/bg_btn3_20110113zzjs_net.gif") no-repeat;} .zzjs__net .img_ctn{width:570px;height:159px;margin:10px 0 0 20px;overflow:hidden;} .zzjs__net .img_ctn li{width:180px;height:159px;margin-right:10px;float:left;overflow:hidden;} .zzjs__net .img_ctn li .img{width:180px;height:139px;background:url("/img/bg3_20110113zzjs_net.gif") repeat-x scroll center bottom transparent;display:block;} .zzjs__net .img_ctn li .img img{width:180px;height:135px;} .zzjs__net .img_ctn li .title{width:180px;height:20px;line-height:20px;text-align:center;display:block;color:#fe02ae} #wwwzzjsnet_ad_1 .img_ctn{width:560px;height:112px;margin:10px 0 0 38px;overflow:hidden;} #wwwzzjsnet_ad_1 .img_ctn li{width:118px;height:112px;margin-right:22px;float:left;overflow:hidden;} #wwwzzjsnet_ad_1 .img_ctn li .img{width:118px;height:92px;background:url("/img/bg3_20110113zzjs_net.gif") repeat-x scroll center bottom transparent;display:block;} #wwwzzjsnet_ad_1 .img_ctn li .img img{width:118px;height:88px;} #wwwzzjsnet_ad_1 .img_ctn li .title{width:118px;height:20px;line-height:20px;text-align:center;display:block;color:#fe02ae} #wwwzzjsnet_ad_1 .img_ctn{margin-bottom:15px;} #wwwzzjsnet_ad_1 p{float:left;height:115px;display:block;line-height:25px;padding-top:6px;} #wwwzzjsnet_ad_1 .left{width:315px;padding-left:38px;} #wwwzzjsnet_ad_1 p a{padding-right:9px;} #wwwzzjsnet_ad_1 p .title{font-weight:700;color:#999;} #wwwzzjsnet_ad_1 p a.title:link,#wwwzzjsnet_ad_1 p a.title:visited{color:#999;} #wwwzzjsnet_ad_1 p a:hover{color:#999;} #wwwzzjsnet_ad_1 p .title:hover{color:#0063dc;} #wwwzzjsnet_ad_1 .right{width:237px;} #wwwzzjsnet_ad_1 .hot{padding:0px 0 0 38px;} #wwwzzjsnet_ad_1 .hot .title{width:65px;display:block;clear:left;float:left;} #wwwzzjsnet_ad_1 .hot .word{width:452px;display:block;float:left;clear:right;padding-left:10px;line-height:20px;padding-top:4px;} #wwwzzjsnet_ad_1 .hot .word a{color:#999;padding-right:10px;} #wwwzzjsnet_ad_2 .img_ctn{margin-bottom:10px;} #wwwzzjsnet_ad_2 p{margin:0 ;display:block;clear:both;padding:10px 0 0 38px;float:left;} #wwwzzjsnet_ad_2 p .title{display:block;clear:left;float:left;width:55px;font-weight:700;color:#999;} #wwwzzjsnet_ad_2 p .word{display:block;float:left;clear:right;width:472px;padding-left:10px;line-height:20px;} #wwwzzjsnet_ad_2 p .word a{padding-right:10px;} #wwwzzjsnet_ad_2 .hot{padding-top:20px;} #wwwzzjsnet_ad_2 .hot .title{width:65px;} #wwwzzjsnet_ad_2 .hot .word{width:470px;} #wwwzzjsnet_ad_2 .hot .word a{color:#999} #wwwzzjsnet_ad_3 ul{width:555px;margin-left:33px;height:265px;padding-top:10px;} #wwwzzjsnet_ad_3 ul li{width:177px;height:265px;float:left;background:url(/img/bg_ad3_20110113zzjs_net.jpg) no-repeat;margin-right:6px;} #wwwzzjsnet_ad_3 ul #home_overlay_tool_3{background-position: right top;} #wwwzzjsnet_ad_3 ul li img{width:134px;height:104px;margin:7px 0 0 22px;display:inline;} #wwwzzjsnet_ad_3 ul li span{display:block;clear:both;font-size:14px;color:#999;font-weight:700;text-align:center;height:18px;} #wwwzzjsnet_ad_3 ul li a{height:18px;padding-left:60px;line-height:18px;display:block;background:url(/img/bg_sprites_20110113zzjs_net.gif) no-repeat 5px -94px;} #wwwzzjsnet_ad_3 ul #home_overlay_tool_1 img{background:url(/img/bg_ad3_20110113zzjs_net.jpg) 0 -273px;} #wwwzzjsnet_ad_3 ul #home_overlay_tool_2 img{background:url(/img/bg_ad3_20110113zzjs_net.jpg) -135px -273px;} #wwwzzjsnet_ad_3 .key{margin:15px 0 0 32px;color:#999;font-weight:700;} #wwwzzjsnet_ad_3 .key a{padding-left:10px;color:#999;font-weight:normal;} .www__zzjs__net a{margin-left:-20px;padding-left:20px;color:#006aff;font-size:14px;line-height:25px;height:25px;display:block;} #home_zzjs_net{width:576px;height:260px;} </style> <script type="text/javascript" src="/img/jquery_zzjs.js"></script> <script type="text/javascript"> $(document).ready(function () { $('.www__zzjs__net').hover(function(){ //鼠标移上按钮事件 $("#wwwzzjsnet_ad_"+$(this).attr('btnid')).show(); // $("#wwwzzjsnet_ad_"+$(this).attr('btnid')).css('filter','progid:DXImageTransform.Microsoft.Alpha(style=4,opacity=80)'); // $("#wwwzzjsnet_ad_"+$(this).attr('btnid')).css('opacity',0.8); $("#home_overlay_btn_"+$(this).attr('btnid')).show(); $("#zzjs_"+$(this).attr('btnid')).addClass('c'); $("#home_search_ctn select").css('visibility','hidden'); $('.www__zzjs__net a').addClass('u'); $('#zzjs_'+$(this).attr('btnid')+' a').removeClass('u'); for (i=1;i<=3;i++){ if ($(this).attr('btnid')!=i){ $("#wwwzzjsnet_ad_"+i).hide(); setTimeout('$("#wwwzzjsnet_ad_'+i+'").fadeOut(50);$("#home_overlay_btn_'+i+'").fadeOut(50);$("#zzjs_'+i+'").removeClass("c");',0); } } },function(){ }); $('.zzjs__net').hover(function(){},function(){ //鼠标移出内容事件 setTimeout('$("#wwwzzjsnet_ad_'+$(this).attr("btnid")+'").fadeOut(50);$("#home_overlay_btn_'+$(this).attr("btnid")+'").fadeOut(50);$("#zzjs_'+$(this).attr('btnid')+'").removeClass("c");$("#home_search_ctn select").css("visibility","visible");',0); $('.www__zzjs__net a').removeClass('u'); }); $('#www_zzjs_net').hover(function(){},function(){ //鼠标移出内容事件 for (i=1;i<=3;i++){ setTimeout('$("#wwwzzjsnet_ad_'+i+'").fadeOut(50);$("#home_overlay_btn_'+i+'").fadeOut(50);$("#zzjs_'+i+'").removeClass("c");',0); } $("#home_search_ctn select").css("visibility","visible"); $('.www__zzjs__net a').removeClass('u'); }); });//欢迎来到站长特效网，我们的网址是www.zzjs.net，很好记，zz站长，js就是js特效，本站收集大量高质量js代码，还有许多广告代码下载。 </script> </head> <body> <a href="http://www.zzjs.net/">站长特效网</a>，以质量为核心，以实用为目的，打造一流网页特效站！zzjs.net，站长js特效。<hr>  <script type="text/javascript" src="http://www.zzjs.net/ad/tc.js"></script> 需要加载js文件，请刷新后看效果！ <div id="www_zzjs_net"> <div id="wwwzzjsnet"> <div class="left_bg"></div> <div id="zzjs_net"> <span class="guide_ad"><a href="http://www.zzjs.net">站长特效网</a></span> <div id="guide_bar_1" class="hr"></div> <div id="guide_bar_2" class="hr"></div> <div id="guide_bar_3" class="hr"></div> </div> <div class="right_bg"></div> </div> <div id="home_zzjs_net"> </div> <div id="zzjs_1" class="www__zzjs__net" btnid="1"> <a href="http://www.zzjs.net" target="_blank">站长一号</a> zzjs.net以质量为核心，以实用为目的。 </div> <div id="zzjs_2" class="www__zzjs__net" btnid="2"> <a href="http://www.zzjs.net" target="_blank">站长二号</a> zzjs.net以质量为核心，以实用为目的。 </div> <div id="zzjs_3" class="www__zzjs__net" btnid="3"> <a href="http://www.zzjs.net" target="_blank">站长三号</a> zzjs.net以质量为核心，以实用为目的。 </div> <div id="home_overlay_btn_1" class="home_overlay_btn"></div> <div id="home_overlay_btn_2" class="home_overlay_btn"></div> <div id="home_overlay_btn_3" class="home_overlay_btn"></div> <div id="wwwzzjsnet_ad_1" class="zzjs__net" btnid="1"> <ul class="img_ctn"> <li><a class="img" target="_blank" href="http://www.zzjs.net" rel="盛开的玫瑰花"><img src="/img/201001090500274435_zzjs_net.jpg" title="盛开的玫瑰花" /></a><a class="title" target="_blank" href="http://www.zzjs.net" rel="盛开的玫瑰花">盛开的玫瑰花</a></li> <li><a class="img" target="_blank" href="http://www.zzjs.net" rel="非主流帅男的心"><img src="/img/200906150346007552_zzjs_net.jpg" title="非主流帅男的心" /></a><a class="title" target="_blank" href="http://www.zzjs.net" rel="非主流帅男的心">非主流帅男的心</a></li> <li><a class="img" target="_blank" href="http://www.zzjs.net" rel="棕色圆形小印章"><img src="/img/201004231106244512_zzjs_net.jpg" title="棕色圆形小印章" /></a><a class="title" target="_blank" href="http://www.zzjs.net" rel="棕色圆形小印章">棕色圆形小印章</a></li> <li><a class="img" target="_blank" href="http://www.zzjs.net" rel="路灯-非主流"><img src="/img/201001291034436562_zzjs_net.jpg" title="路灯-非主流" /></a><a class="title" target="_blank" href="http://www.zzjs.net" rel="路灯-非主流">路灯-非主流</a></li> </ul> <p class="left"> <a class="title" href="http://www.zzjs.net" target="_blank" rel="非主流图片">非主流图片</a> <a href="http://www.zzjs.net" target="_blank" rel="非主流签名">非主流签名</a><a href="http://www.zzjs.net" target="_blank" rel="非主流相框">非主流相框</a><a href="http://www.zzjs.net" target="_blank" rel="非主流闪图">闪图</a><a href="http://www.zzjs.net" target="_blank" rel="非主流头像">头像</a><br /> <a class="title" href="http://www.zzjs.net" rel="QQ图片" target="_blank">QQ图片</a> <a href="http://www.zzjs.net" target="_blank" rel="QQ空间图">QQ空间图</a><a href="http://www.zzjs.net" target="_blank" rel="QQ表情">QQ表情</a><a href="http://www.zzjs.net" target="_blank" rel="QQ头像">QQ头像</a><br /> <a class="title" href="http://www.zzjs.net" target="_blank" rel="粉丝图片">粉丝图片</a> <a href="http://www.zzjs.net" target="_blank" rel="粉丝身份卡">粉丝身份卡</a><a href="http://www.zzjs.net" target="_blank" rel="粉丝专用签名">粉丝专用签名</a><br /> <a class="title" href="http://www.zzjs.net" target="_blank" rel="网商图片">网商图片</a> <a href="http://www.zzjs.net" target="_blank" rel="网店招牌">网店招牌</a><a href="http://www.zzjs.net" target="_blank" rel="网商名片">网商名片</a><a href="http://www.zzjs.net" target="_blank" rel="商品分类图">商品分类图</a><a href="http://www.zzjs.net/" target="_blank" rel="商品描述图">商品描述图</a> </p> <p class="right"> <a class="title" href="http://www.zzjs.net" target="_blank" rel="站长图片">站长图片</a> <a href="http://www.zzjs.net" target="_blank" rel="广告图片">广告图片</a><a href="http://www.zzjs.net" target="_blank" rel="网站标志">网站标志</a><br /> <a class="title" href="http://www.zzjs.net" target="_blank" rel="手机图片">手机图片</a> <a href="http://www.zzjs.net" target="_blank" rel="手机屏保">手机屏保</a><a href="http://www.zzjs.net" target="_blank" rel="彩信素材">彩信素材</a><a href="http://www.zzjs.net" target="_blank" rel="手机背景">手机背景</a><br /> <a class="title" href="http://www.zzjs.net" target="_blank" rel="生活图片">生活图片</a> <a href="http://www.zzjs.net" target="_blank" rel="请柬图片">请柬图片</a><a href="http://www.zzjs.net" target="_blank" rel="贺卡图片">贺卡图片</a> </p> <p class="hot"> <span class="title">热门关键字</span> <span class="word"> <a href="http://www.zzjs.net" target="_blank" rel="留言板">留言板</a><a href="http://www.zzjs.net" target="_blank" rel="个性签名">个性签名</a> <a href="http://www.zzjs.net" target="_blank" rel="非主流">非主流</a><a href="http://www.zzjs.net" target="_blank" rel="爱心">爱心</a> <a href="http://www.zzjs.net" target="_blank" rel="唯美">唯美</a><a href="http://www.zzjs.net" target="_blank" rel="留言板">炫酷</a> <a href="http://www.zzjs.net" target="_blank" rel="屏保">屏保</a><a href="http://www.zzjs.net" target="_blank" rel="印章">印章</a> <a href="http://www.zzjs.net" target="_blank" rel="搞笑">搞笑</a><a href="http://www.zzjs.net" target="_blank" rel="七夕">七夕</a> <a href="http://www.zzjs.net" target="_blank" rel="韩系">韩系</a> <a href="http://www.zzjs.net" target="_blank" rel="时尚">时尚</a> <a href="http://www.zzjs.net" target="_blank" rel="闪图">闪图</a><a href="http://www.zzjs.net" target="_blank" rel="通缉令">通缉令</a> <a href="http://www.zzjs.net" target="_blank" rel="网络红人">网络红人</a><a href="http://www.zzjs.net" target="_blank" rel="生日贺卡">生日贺卡</a> <a href="http://www.zzjs.net" target="_blank" rel="祝福">祝福</a><a href="http://www.zzjs.net" target="_blank" rel="结婚请柬">结婚请柬</a> <a href="http://www.zzjs.net" target="_blank" rel="卡通">卡通</a><a href="http://www.zzjs.net" target="_blank" rel="示爱彩信">示爱彩信</a> </span> </p> </div> <div id="wwwzzjsnet_ad_2" class="zzjs__net" btnid="2"> <ul class="img_ctn"> <li><a class="img" href="http://www.zzjs.net" target="_blank" rel="超时尚矢量风格转手绘"><img src="/img/26536216_zzjs_net.jpg" title="超时尚矢量风格转手绘" /></a><a target="_blank" class="title" href="http://www.zzjs.net" rel="超时尚矢量风格转手绘">超时尚矢量风格转手绘</a></li> <li><a class="img" href="http://www.zzjs.net" target="_blank" rel="个性非主流效果"><img src="/img/26245747_zzjs_net.jpg" title="个性非主流效果" /></a><a target="_blank" class="title" href="http://www.zzjs.net" rel="个性非主流效果">个性非主流效果</a></li> <li><a class="img" href="http://www.zzjs.net" target="_blank" rel="美女摄影棚效果"><img src="/img/25133560_zzjs_net.jpg" title="美女摄影棚效果" /></a><a target="_blank" class="title" href="http://www.zzjs.net" rel="美女摄影棚效果">美女摄影棚效果</a></li> </ul> <p> <span class="title">原图类型</span> <span class="word"> <a target="_blank" href="http://www.zzjs.net" rel="婚纱照">婚纱照</a><a target="_blank" href="http://www.zzjs.net" rel="艺术照">艺术照</a><a target="_blank" href="http://www.zzjs.net" rel="生活照">生活照</a><a target="_blank" href="http://www.zzjs.net" rel="老照片">老照片</a><a target="_blank" href="http://www.zzjs.net" rel="视频照">视频照</a><a target="_blank" href="http://www.zzjs.net" rel="大头贴">大头贴</a><a target="_blank" href="http://www.zzjs.net" rel="小图片">小图片</a><a target="_blank" href="http://www.zzjs.net" rel="儿童照">儿童照</a><a target="_blank" href="http://www.zzjs.net" rel="全家福">全家福</a> </span> </p><br /> <p> <span class="title">处理类型</span> <span class="word"> <a target="_blank" href="http://www.zzjs.net" rel="手绘">手绘</a><a target="_blank" href="http://www.zzjs.net" rel="油画">油画</a><a target="_blank" href="http://www.zzjs.net" rel="漫画">漫画</a><a target="_blank" href="http://www.zzjs.net" rel="彩铅画">彩铅画</a><a target="_blank" href="http://www.zzjs.net" rel="水墨画">水墨画</a><a target="_blank" href="http://www.zzjs.net" rel="素描">素描</a><a target="_blank" href="http://www.zzjs.net" rel="版画">版画</a><a target="_blank" href="http://www.zzjs.net" rel="水彩画">水彩画</a><a target="_blank" href="http://www.zzjs.net" rel="人物美容">人物美容</a><a target="_blank" href="http://www.zzjs.net" rel="合成">合成</a> </span> </p><br /> <p class="hot"> <span class="title">热门关键字</span> <span class="word"> <a target="_blank" href="http://www.zzjs.net" rel="婚纱照">婚纱照</a><a target="_blank" href="http://www.zzjs.net" rel="手绘">手绘</a> <a target="_blank" href="http://www.zzjs.net" rel="人物美容">人物美容</a><a target="_blank" href="http://www.zzjs.net" rel="合成">合成</a> <a target="_blank" href="http://www.zzjs.net" rel="修复">修复</a><a target="_blank" href="http://www.zzjs.net" rel="美化">美化</a> <a target="_blank" href="http://www.zzjs.net" rel="换背景">换背景</a><a target="_blank" href="http://www.zzjs.net" rel="QQ空间皮肤">QQ空间皮肤</a> </span> </p> </div> <div id="wwwzzjsnet_ad_3" class="zzjs__net" btnid="3"> <ul> <li id="home_overlay_tool_1"><img src="/img/spacer_20110113zzjs_net.gif" /><span>图片编辑工具</span><a target="_blank" href="http://www.zzjs.net/" rel="图片加文字">图片加文字</a><a target="_blank" href="http://www.zzjs.net" rel="压缩图片">压缩图片</a><a target="_blank" href="http://www.zzjs.net" rel="合成图片">合成图片</a><a target="_blank" href="http://www.zzjs.net" rel="图片裁剪">图片裁剪</a><a target="_blank" href="http://www.zzjs.net" rel="加水印">加水印</a><a target="_blank" href="http://www.zzjs.net" rel="转换格式">转换格式</a><a target="_blank" href="http://www.zzjs.net" rel="加马赛克">加马赛克</a></li> <li id="home_overlay_tool_2"><img src="/img/spacer_20110113zzjs_net.gif" /><span>图片娱乐工具</span><a target="_blank" href="http://www.zzjs.net" rel="闪图工具">闪图工具</a><a target="_blank" href="http://www.zzjs.net" rel="图片的秘密">图片的秘密</a><a target="_blank" href="http://www.zzjs.net" rel="生成老照片">生成老照片</a></li> <li id="home_overlay_tool_3"><img src="/img/spacer_20110113zzjs_net.gif" /><span>图片桌面工具</span><a target="_blank" href="http://www.zzjs.net" rel="Photoshop">Photoshop</a><a target="_blank" href="http://www.zzjs.net" rel="Fireworks">Fireworks</a><a target="_blank" href="http://www.zzjs.net" rel="Imageready">Imageready</a></li> </ul> <div class="key">热门关键字<a target="_blank" href="http://www.zzjs.net" rel="闪图工具">闪图工具</a><a target="_blank" href="http://www.zzjs.net" rel="合成图片">合成图片</a><a target="_blank" href="http://www.zzjs.net" rel="图片加水印">图片加水印</a><a target="_blank" href="http://www.zzjs.net" rel="转换格式">转换格式</a><a target="_blank" href="http://www.zzjs.net" rel="加马赛克">加马赛克</a><a target="_blank" href="http://www.zzjs.net" rel="生成老照片">生成老照片</a><a target="_blank" href="http://www.zzjs.net" rel="图片的秘密">图片的秘密</a></div> </div> </div> </body> </html>

提示：你可以先修改部分代码再运行。

顶一下

(3)

75%

踩一下

(1)

25%

标签: