模仿阿里巴巴楼层导航特效

  •  特效要求:

         1.  右边导航楼层是随着滚动条的滚动位置是不动的

         2.  当滚动条滚动时,导航的div页面在我们页面的上方位置时(视野最明显的位置),对应的右边导航

              的楼层的样式,会发生相应的变化。

         3.  点击右边导航楼层的顶部或者底部,楼层会消失,显示。

         4.  楼层下方置顶功能。

         5.  只有当滚动条滚动到特定的高度时,右边导航的楼层才会出现,如果滚动条滚动的高度小于这个

              临界值的时候,楼层是不会显示的。

 

  •  特效原理:

       1.  右边导航楼层一个div样式:position:fixed,这样滚动条在滚动的时候,右边楼层导航div位置始终不

            边。

       2.  在滚动条滚动的时候,先获得滚动条相对于整个网页顶部的高度大小top,如果top + 某个高

            度大于右边div的长度相对于整个网页顶部,右边导航楼层的样式发生变化。

  •    为了方便大家学习我把这个特效贴出来。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<!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" /> <meta name="keywords" content="VihChina资源网 www.vihchina.net"/> <meta name="description" content="VihChina资源网 www.vihchina.net"/> <title>VihChina资源网 www.vihchina.net</title> <script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;list-style:none} body{background:#B2BDC4; font-size:12px} .mbox{margin:100px auto 0 auto;width:958px;height:574px;background:#AAB9C1;padding:3px; position:relative} .mbox_inner{width:956px;height:572px;background:#D0D9DD;padding:1px; position:relative} .mbg{ width:956px; height:512px; position:absolute; display:none} .box{ width:956px; height:512px;} .s_box{position:absolute;z-index:9999px; width:38px;height:38px;border:1px #000 solid;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);} .s_box span{display:block;width:36px;height:36px;margin:1px;background:#000;} .b_box{position:absolute;padding:1px;width:196px;height: auto; overflow:hidden;border:1px #000 solid;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60); display:none} .b_box div{width:192px;height:72px;background:#000; padding:2px} .b_box div a{font-size:13px; color:#FFFFFF; line-height:20px; text-decoration:none} .tbox{width:956px;height:60px; position:absolute; bottom:0; left:1px; font-size:12px} .tbox div{border-right:1px #d8dfe3 solid;float:left;padding:0 15px;margin:9px 0;width:20%;color:#737373} .tbox div h3{font-size:medium;font-weight:200;margin:0 0 6px;} .tbox .ps{_height:100%;border:0;float:none;width:auto} .tbox .ps a{ display:block; float:left; width:50%; height:25px;font-size:13px; line-height:25px;overflow:hidden;color:#000; text-decoration:none; } .tbox div a{ display:block; float:left; width:100%; height:25px;font-size:13px; line-height:25px;overflow:hidden;color:#000; text-decoration:none; font-size:13px} .op{width:auto; height:30px; position:absolute; right:10px; bottom:70px; z-index:9999} .op a{display: block;cursor:default;position:relative;} .op a span{padding:5px;background:#fff;position:absolute;white-space:nowrap;color:#150417; font-size:13px;border:1px solid #555; visibility:hidden;bottom:1px;right:1px;} .op a:hover span{visibility:visible} .bt_txt{float:left; width:18px; height:18px; text-align:center; line-height:18px; color:#fff; border:1px solid #fff; margin:2px; font-size:12px} .coptxt{float:left; width:19px; height:19px; line-height:25px; text-align:center; color:#fff; margin:2px; font-size:20px; overflow:hidden} .fcopy{ width:860px; height:80px; clear:both; margin:20px auto;} .fcopy p{ text-align:center; line-height:30px; color:#666; font-size:12px;} .fcopy p a{ color:#c92215; text-decoration:none;} .fcopy p a:hover{ color:#f00;} </style> </head> <body> <div class="itop"> </div> <div class="mbox" id="mbox"> <div class="mbox_inner" id="mbox_inner"> <div class="tbox" id="tbox"> <div> <h3></h3><a href="http://www.vihchina.net" target="_blank"></a> </div> <div> <h3></h3><a href="http://www.vihchina.net" target="_blank"></a> </div> <div class="ps"> <h3></h3><a href="http://www.vihchina.net" target="_blank"></a> </div> </div> </div> <div class="op" id="op"> <div><a id="bt_l"><div class="bt_txt">◄</div><span><p>上一幅图片</p></span></a></div> <div><a id="bt_r"><div class="bt_txt">►</div><span><p>下一幅图片</p></span></a></div> <div><a id="bt_c"><div class="coptxt">© </div><span><p></p></span></a> </div> </div> </div> <div class="fcopy"> <p>CopyRight © 2008-2010 VihChina资源网 邮箱:[email protected]  QQ:306521617 网址:<a href="http://www.vihchina.net" target="_blank" title="VihChina资源网">VihChina资源网</a></p> </div> </body> </html> <script language="javascript"> //设置图片数 var len = 7; //定义数据字典 var data = { "0":{ "img":"images/1.jpg", "copyt":"图瓦卢的首都富纳富提岛 -- George Steinmetz/Corbis", "div":{ "0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"图瓦卢的首都富纳富提岛"}, "1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"}, "2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“消失”的意思吗?"} }, "tbox":{ "0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":720,"s_box_t":90,"b_box_l":760,"b_box_t":90}, "1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":200,"s_box_t":290,"b_box_l":240,"b_box_t":290}, "2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":460,"s_box_t":160,"b_box_l":500,"b_box_t":160}, "3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":500,"s_box_t":320,"b_box_l":540,"b_box_t":320} } }, "1":{ "img":"images/2.jpg", "copyt":"加拿大班夫公园的兔鼠 -- George Steinmetz/Corbis", "div":{ "0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:可爱的宠物鼠"}, "1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"}, "2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“机智”的意思?"} }, "tbox":{ "0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":720,"s_box_t":90,"b_box_l":760,"b_box_t":90}, "1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":220,"s_box_t":290,"b_box_l":260,"b_box_t":290}, "2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":400,"s_box_t":160,"b_box_l":440,"b_box_t":160}, "3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":420,"s_box_t":320,"b_box_l":460,"b_box_t":320} } }, "2":{ "img":"images/3.jpg", "copyt":"阿拉斯加的小猪赛跑 -- George Steinmetz/Corbis", "div":{ "0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:迷你宠物猪"}, "1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"}, "2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“宠爱”的意思?"} }, "tbox":{ "0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":720,"s_box_t":90,"b_box_l":760,"b_box_t":90}, "1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":280,"s_box_t":290,"b_box_l":320,"b_box_t":290}, "2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":400,"s_box_t":160,"b_box_l":440,"b_box_t":160}, "3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":720,"s_box_t":320,"b_box_l":760,"b_box_t":320} } }, "3":{ "img":"images/4.jpg", "copyt":"张着大嘴做鬼脸的小狮子 -- George Steinmetz/Corbis", "div":{ "0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:打哈欠的小狮子"}, "1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"}, "2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“令人望而生畏”的意?"} }, "tbox":{ "0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":660,"s_box_t":90,"b_box_l":700,"b_box_t":90}, "1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":220,"s_box_t":290,"b_box_l":260,"b_box_t":290}, "2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":400,"s_box_t":160,"b_box_l":440,"b_box_t":160}, "3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":560,"s_box_t":320,"b_box_l":600,"b_box_t":320} } }, "4":{ "img":"images/5.jpg", "copyt":"泡温泉的日本猕猴昏昏欲睡 -- George Steinmetz/Corbis", "div":{ "0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:滑稽的猴子"}, "1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"}, "2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“滑稽”的意思?"} }, "tbox":{ "0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":140,"s_box_t":100,"b_box_l":180,"b_box_t":100}, "1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":200,"s_box_t":310,"b_box_l":240,"b_box_t":310}, "2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":460,"s_box_t":160,"b_box_l":500,"b_box_t":160}, "3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":700,"s_box_t":290,"b_box_l":740,"b_box_t":290} } }, "5":{ "img":"images/6.jpg", "copyt":"可爱的宠物狗在沙滩上玩耍 -- George Steinmetz/Corbis", "div":{ "0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"家有小宠:可爱的小狗"}, "1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多"}, "2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“温顺”的意思?"} }, "tbox":{ "0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":230,"s_box_t":100,"b_box_l":270,"b_box_t":100}, "1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":160,"s_box_t":300,"b_box_l":200,"b_box_t":300}, "2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":580,"s_box_t":260,"b_box_l":620,"b_box_t":260}, "3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":620,"s_box_t":420,"b_box_l":660,"b_box_t":420} } }, "6":{ "img":"images/7.jpg", "copyt":"本月世博之最:最不堪重负的展馆墨西哥管 -- George Steinmetz/Corbis", "div":{ "0":{"h3":"今日图片故事","a_url":"http://www.vihchina.net","a_txt":"本月世博之最:最不堪重负的展馆墨西哥管最不堪重负的展馆墨西哥管最不堪重负的展馆墨西哥管"}, "1":{"h3":"喜欢这张图片吗?","a_url":"http://www.vihchina.net","a_txt":"喜欢,寻找更多寻找更多寻找更多"}, "2":{"h3":"cosset vs. pamper","a_url":"http://www.vihchina.net","a_txt":"同样是“场馆”的意思?同样是“场馆”的意思?同样是“场馆”的意思?同样是“场馆”的意思?"} }, "tbox":{ "0":{"a_txt":"图瓦卢的首都富纳富提岛1","a_url":"http://www.vihchina.net","s_box_l":260,"s_box_t":100,"b_box_l":300,"b_box_t":100}, "1":{"a_txt":"图瓦卢的首都富纳富提岛2","a_url":"http://www.vihchina.net","s_box_l":180,"s_box_t":280,"b_box_l":220,"b_box_t":280}, "2":{"a_txt":"图瓦卢的首都富纳富提岛3","a_url":"http://www.vihchina.net","s_box_l":540,"s_box_t":160,"b_box_l":580,"b_box_t":160}, "3":{"a_txt":"图瓦卢的首都富纳富提岛4","a_url":"http://www.vihchina.net","s_box_l":580,"s_box_t":300,"b_box_l":620,"b_box_t":300} } } }; var msr=100; //范围半径 var sqr=20; //小矩形半径 var acboxs=[]; //保存活动点信息 var msflag=false; //标志是否执行#box的mousemove绑定函数 //显示数据 function showimg(p){ var speed=1300; $(".mbg").fadeOut(speed); $("#mbg_"+p).fadeIn(speed); $("#bt_c span p").html(data[p].copyt); $("#mbg_"+p).css('display','block'); $(".tbox div").each(function(k){ $(this).find("h3").html(data[p].div[k].h3); $(this).find("a").html(data[p].div[k].a_txt); $(this).find("a").attr('href',data[p].div[k].a_url); }); init(p); MouseMove(p); } //数据初始化函数 function inital(){ for(i=0;i<=len-1;i++){ var obj = "<div class='mbg' id='mbg_"+i+"' style='background:url("+data[i].img+")'></div>"; $(obj).prependTo("#mbox_inner"); if (i==len-1){ $("#bt_c span p").html(data[i].copyt); $("#mbg_"+i).css('display','block'); $(".tbox div").each(function(k){ $(this).find("h3").html(data[i].div[k].h3); $(this).find("a").html(data[i].div[k].a_txt); $(this).find("a").attr('href',data[i].div[k].a_url); }); init(i); MouseMove(i); } } } //初始化按钮事件 var init=function(k){ $(".mbg").empty(); function delay(count){ window.setTimeout(function(){ count--; if(count>0){ delay(count); }else{ var i_obj; $.each(data[k].tbox,function(n,val){ i_obj = "<span class='s_box' id='s_box_"+n+"' style='left:"+val.s_box_l+"px;top:"+val.s_box_t+"px'><span></span></span><div class='b_box' id='b_box_"+n+"' style='left:"+val.b_box_l+"px;top:"+val.b_box_t+"px'><div><a href='"+val.a_url+"' target='_blank'>"+val.a_txt+"</a></div></div>"; $(i_obj).appendTo("#mbg_"+k); }); var obj; $("#mbg_"+k+" .s_box").each(function(){ obj = new Object(); obj.sq = $(this); obj.x = $(this).position().left+sqr; obj.y = $(this).position().top+sqr; acboxs.push(obj); bindS_box_Hover(obj.sq); bindB_box_Hover(obj.sq); }); } },1000); } delay(2); setTimeout('$(".mbg .s_box").animate({opacity: "0"},50)',2500); } //绑定鼠标移动事件 var MouseMove=function(h){ $("#mbg_"+h).bind("mousemove",function(e){ var e = e||event; var x = e.clientX-($(this).offset().left); var y = e.clientY-($(this).offset().top); if (!msflag){ for (var i=0;i<acboxs.length;i++){ if(ishow(x,y,acboxs[i])){ acboxs[i].sq.stop().fadeTo(30,0.6); }else{ acboxs[i].sq.stop().animate({opacity: '0'},50); } } } })/*.bind("mouseout",function(){ $(".mbg .s_box").animate({opacity: '0.2'},50) })*/; } var ishow = function(x,y,vobj){ var r1 = Math.abs(x-vobj.x); var r2 = Math.abs(y-vobj.y); if (r1<msr&&r2<msr){ return true; }else{ return false; } } //小区域的hover事件 function bindS_box_Hover(obj){ obj.hover(function(){ obj.next().stop().fadeTo(50,0.6); },function(){ obj.next().stop().fadeOut(50); }); } //内容区域的hover事件 function bindB_box_Hover(obj){ obj.next().hover(function(){ msflag=true; obj.next().stop(); },function(){ msflag = false; obj.next().stop().fadeOut(50); obj.stop().fadeOut(50); }); } //切换图片 $(function(){ //调用数据初始化 inital(); var index = len-1; //设置第一个显示 //点击上一幅图片 $("#bt_l").mouseover(function(){ $(this).css('cursor','pointer'); $("#bt_l span").css('right','50px'); }).click(function(){ index--; if (index>=0){ showimg(index); }else{ index=0; } }); //点击下一幅图片 $("#bt_r").mouseover(function(){ $(this).css('cursor','pointer'); $("#bt_r span").css('right','26px'); }).click(function(){ index++; if (index<=len-1){ showimg(index); }else{ index = len-1; } }); }) </script> 来源 VihChina资源网 网址:http://www.vihchina.net

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值