左边跟鼠标滑动导航-白红宇

左边跟鼠标滑动导航

阅读量：4335 次

发布时间：2019-06-07

本文共 3584 字，大约阅读时间需要 11 分钟。

<!doctype html>

<html>

<head>

<title>左边跟随鼠标滑动导航仿淘宝UED - 懒人建站</title>

<style>

/*样式表文件来自懒人css http://lrcss.lrjz100.com */

/*---------重置---------*/

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-warp{ position:relative;}

.bl-vernav-warp .auxline{ 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;}

</style>

</head>

<h1 class="h3">仿淘宝UED的左边跟随鼠标滑动导航</h1>

<br/>

<ul>

<li><a href="http://www.51xuediannao.com/xuanxiangka/">选项卡代码</a></li>

</ul>

</li>

<li><a href="http://www.51xuediannao.com/js/slide/" class="one">焦点幻灯片</a></li>

<li><a href="http://www.51xuediannao.com/qqkefu/" class="one">qq在线客服代码</a></li>

<li><a href="http://www.51xuediannao.com/jquery_tanchu/" class="one">jquery弹出层</a></li>

</ul>

</div>

$(function(){

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");

});

</script>

</body>

</html>

转载于:https://www.cnblogs.com/weipeng007/p/4623416.html

你可能感兴趣的文章

laravel连接sql server 2008

查看>>

Ubuntu菜鸟入门（五）—— 一些编程相关工具

查看>>

valgrind检测linux程序内存泄露

查看>>

Hadoop以及组件介绍

查看>>

1020 Tree Traversals (25)（25 point(s)）