bob体育官方平台
jquery背景跟随鼠标滑动导航_jquery_脚本之家

本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考。具体如下:运行效果截图如下:

左边跟随鼠标滑动导航/*---------重置---------*/html { font-size: 100%; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;*overflow:auto; _overflow-x:hidden;}body { margin:0;}p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 { margin-top:0; margin-bottom:0;}dl, dd { margin-left:0;}ul, ol { padding-left:0;*margin-left:0; list-style-type: none;}ul li {*zoom:1;*vertical-align:bottom;}em, var, cite, i { font-style:normal;}small { font-size:inherit;}s, a { text-decoration:none;}:focus { outline:none;}blockquote, q { quotes:none; margin:0;}table { border-collapse:collapse; border-spacing:0; empty-cells:show;/*table-layout:fixed;*/}img, iframe { border:none;}img { vertical-align: top; -ms-interpolation-mode: bicubic;/*ie7防止图片缩小失真的*/}/*---------竖向菜单---------*/.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;}/*diy*/ .bl-vernav-wrap { position:relative;}.bl-vernav-wrap .sideLine { position:absolute; left:-6px; top:0; z-index:1; line-height:0; font-size:0; border-left:#FF5F3E solid 7px; background-color:#F8F8F8;}.bl-vernav { position:relative; z-index:2;}.bl-vernav a:hover { background-color:transparent;}.demobox { width:460px; font-size:14px; color:#333; font-family:'Hiragino Sans GB', 'Microsoft Yahei', "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti;}a { color:#333; text-decoration:none;} 左边条纹跟随鼠标滑动导航 
    导航菜单  神探夏洛克  海贼王 海贼王 海贼王   神探夏洛克 神探夏洛克 神探夏洛克   ${ var verNav = $, //第一层ul. line = verNav.siblings, //左边条纹线 verNavFirst = verNav.children, //第一层ul中第一个li curY = verNav.children.top; line.height(verNavFirst.outerHeight.width(verNavFirst.outerWidth;//设置辅助线初始化高度和宽度,也可以直接用css设置好,这里就不用js计算了 verNav.find.mouseenter{ var thisY = $.top; line.stop.animate; return false }) .end() .mouseleave{ line.stop.animate.trigger;

希望本文所述对大家学习jquery程序设计有所帮助。

上一篇:没有了 下一篇:没有了
返回顶部