知识 分享 互助 懒人建站

    懒人建站专注于网页素材下载,提供网站模板、网页设计、ps素材、图片素材等,服务于【个人站长】【网页设计师】和【web开发从业者】的代码素材与设计素材网站。

    懒人建站提供网页素材下载、网站模板
    知识 分享 互助!

    左边跟随鼠标滑动导航仿淘宝UED

    作者:速博娱乐是什么 来源:jquery特效 2014-01-05 人气:
    仿淘宝UED的左边导航,这个导航有跟随鼠标滑动导航效果,鼠标离开导航区域自动回到当前导航状态。 /*样式表文件来自 懒人css http://sbylssm.985sunbet.com */ 下面是懒人css中的竖向导航菜单样
    仿淘宝UED的左边导航,这个导航有跟随鼠标滑动导航效果,鼠标离开导航区域自动回到当前导航状态。

    /*样式表文件来自 懒人css http://sbylssm.985sunbet.com */
    下面是懒人css中的竖向导航菜单样式
    /*---------竖向菜单(非必需)---------*/
    .bl-vernav li{ border-bottom:1px solid #ddd; margin-bottom:-1px;padding-top:1px;}
    .bl-vernav a{ display:block; height:20px; line-height:20px; padding:10px 16px;}
    .bl-vernav a:hover{ background:#F8F8F8;text-decoration:none;}
    /*.bl-vernav .cur a{ background:#428BCA; color:#fff;}*/
     
    .bl-vernav-ord{ border:1px solid #ddd;}
     
    .vernav-level li li{ border-left:none;border-right:none;}
    .vernav-level li li a{ padding-left:40px;}
    .vernav-level .cur .one{ background:#F8F8F8; }
    .vernav-level li .cur a{ background:#F8F8F8; }

    这个导航的鼠标滑动跟随导航效果js代码如下
    需要jquery支持哦

    //懒人建站制造
    var verNav = $(".bl-vernav"),
    line = verNav.siblings(".auxline")
    verNavFisrt = verNav.children("li:first-child"),
    curY = verNav.children("li.cur").position().top;
     
    line.height(verNavFisrt.outerHeight()-1).width(verNavFisrt.outerWidth());//设置辅助线初始化高度和宽度,也可以直接用css设置好,这里就不用js计算了 
     
    verNav.find("li").mouseenter(function(){
    var thisY = $(this).position().top;
    line.stop(true,true).animate({top:thisY},200);
    return false
    })
    .end()
    .mouseleave(function(){
    line.stop(true,true).animate({top:curY},300)
    }).trigger("mouseleave");
     
    完整的jquery导航代码效果请查看上面的代码框。

    jquery特效整理发布
    ↓ 查看全文

    左边跟随鼠标滑动导航仿淘宝UED由懒人建站收集整理,您可以自由传播,请主动带上本文链接

    懒人建站就是免费分享,觉得有用就多来支持一下,没有能帮到您,懒人也只能表示遗憾,希望有一天能帮到您。

    左边跟随鼠标滑动导航仿淘宝UED-最新评论

    网站地图 新世纪娱乐博彩 菲律宾环球娱乐 姚记娱乐官网
    申博提款最快 太阳城游戏登入 菲律宾太阳城申博 申博正网开户
    万利彩湖北快三 AB亚洲馆平台 金沙官方开户直营网 金福彩票时时彩票
    菲彩国际备用网址 澳门威尼斯人官方网 利娱乐备用网址 大佬线上娱乐场
    喜达娱乐备用网址 宝马会娱乐官方 真人视讯宝马会娱乐 喜达娱乐备用网址
    309SUN.COM 1666DZ.COM 153sun.com 15jbs.com 505sj.com
    233PT.COM 8CZS.COM 16jbs.com 788TGP.COM 215SUN.COM
    384xx.com 687jbs.com 898cw.com XSB638.COM 181ib.com
    qk138.com 818XTD.COM 189sunbet.com 205SUN.COM TONGSHISHI.COM