wuyanci

zhao55759013

于 2018-04-20 09:00:33 发布

阅读量177

点赞数

分类专栏：导航

导航专栏收录该内容

6 篇文章

订阅专栏

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WuYanChiCaiDan.aspx.cs" Inherits="WebApplication2.WuYanChiCaiDan" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-3.2.1.min.js"></script>
<style>
.wrap {
position: relative;
width: 200px;
left: 50px;
top: 50px;
}

ul {
padding: 15px 0px;
margin: 0px;
list-style: none;
background: #6c6669;
color: #ffffff;
border-right-width: 0;
}

li {
display: block;
height: 30px;
line-height: 30px;
padding-left: 12px;
cursor: pointer;
font-size: 14px;
position: relative;
}

li.active {
background: #999395;
}

li span:hover {
color: #c81623;
}

.none {
display: none;
}

#sub {
width: 600px;
height: 100%;
position: absolute;
border: 1px solid #f7f7f7;
background: #f7f7f7;
box-shadow: 2px 0 5px rgba(0,0,0,0.3);
left: 200px;
top: 0;
box-sizing: border-box;
margin: 0px;
padding: 10px;
}

.sub_content a {
font-size: 12px;
color: #666;
text-decoration: none;
}

.sub_content dd a {
border-left: 1px solid #e0e0e0;
padding: 0 10px;
margin: 4px 0px;
}

.sub_content dl {
overflow: hidden;
}

.sub_content dt {
float: left;
width: 70px;
font-weight: bold;
clear: left;
position: relative;
}

.sub_content dd {
float: left;
margin-left: 5px;
border-top: 1px solid #eee;
margin-bottom: 5px;
}

.sub_content dt i {
width: 4px;
height: 14px;
font: 400 9px/14px consolas;
position: absolute;
right: 5px;
top: 5px;
}
</style>
<script>
$(document).ready(function () {
var sub = $('#sub');
var activeRow; //指向当前激活的一级菜单中的行，后面要对样式的修改，所以首先要声明
var activeMenu; //对应的二级菜单
var timer;
var mouseInSub = false;

sub.on('mouseenter', function (e) {
mouseInSub = true;
}).on('mouseleave', function (e) {
mouseInSub = false;

});

//1
var mouseTrack = []; //数组跟踪记录鼠标位置
//3
var moveHandler = function (e) //在movehandler里面通过e，也就是事件对象，它的page x 和page y属性来获取当前鼠标相对于页面的坐标
{
mouseTrack.push({
x: e.pageX, //获取鼠标坐标
y: e.pageY
})
//计算的时候只需要当前的位置和上一次的位置，所有数组只让它保存有限的信息即可
if (mouseTrack.length > 3) { //保存三个
mouseTrack.shift() //多的弹出
}
}
//3结束
$('#test')
.on('mouseenter', function (e) {

//sub.removeClass('none'); //removeClass：删除样式
//2
$(document).bind('mousemove', moveHandler) //给document绑定事件,鼠标移动事件
//2结束
})
.on('mouseleave', function (e) {
$('#' + activeRow.data('id') + '').addClass('none'); //隐藏二级菜单里的内容,防止再次触发一级菜单时，上一次内容依在，二级菜单内容叠加
$('#sub').addClass('none'); //隐藏二级菜单

if (activeRow) //判断activeRow是否有值。activeRow：当前指向的一级菜单项。鼠标离开一级菜单容器的时候，如果存在激活的行，我们要把它的样式去掉
{

activeRow.removeClass('active');
activeRow = null;

}

//if (activeMenu) //对应的二级菜单也是同样的操作
//{

// activeMenu.addclass('none');
// activeMenu = null;

//}

//4
//鼠标离开菜单时，需要对绑定在document上的mousemove事件进行解绑，以免影响到页面其他的主建，所以这里要把这个事件监听函数独立出来，方便后续进行解绑的操作
$(document).unbind('mousemove', moveHandler)//在这里进行解绑
//4结束

})

//5
function vector(a, b) { //定义向量，向量的定义就是终点的坐标减去起点的坐标
return {
x: b.x - a.x,
y: b.y - a.y
}
}
function vectorproduct(v1, v2) {
return v1.x * v2.y - v2.x * v1.y //向量的叉乘公式。v1.x：向量1的X坐标，v2.y:向量2的Y坐标

}

// 7 方法1
//function isPointInTrangle(p, a, b, c) { // 叉乘判断方法。p:鼠标当前点坐标

// var pa = vector(p, a);
// var pb = vector(p, b);
// var pc = vector(p, c);

// var t1 = vectorproduct(pa, pb); //叉乘结果
// var t2 = vectorproduct(pb, pc);
// var t3 = vectorproduct(pc, pa);

// return sameSign(t1, t2) && sameSign(t2, t3); //t1 t2符号相同且t2t3符合相同
//}
////8
////二叉算法
//function sameSign(a, b) { //判断结果是否符号相同
// return (a ^ b) >= 0; //
//}

//方法2
function isPointInTrangle(p, a, b, c) { // 叉乘判断方法。p:鼠标当前点坐标

var ab = vector(a, b);
var ap = vector(a, p);
var bc = vector(b, c);
var bp = vector(b, p);
var ca = vector(c, a);
var cp = vector(c, p);

var t1 = vectorproduct(ab, ap); //叉乘结果
var t2 = vectorproduct(bc, bp);
var t3 = vectorproduct(ca, cp);

return panduan(t1, t2, t3) //t1 t2符号相同且t2t3符合相同
}

function panduan(a, b, c) {
if (a >= 0 && b >= 0 && c >= 0) {
return true;
}
else
return false;
}
//9
function needDelay(elem, leftCorner, currMousePos) {//判断是否需要延迟
var offset = elem.offset(); //通过Jq的offset方法获取上下边缘的坐标

var topLeft = { //上边缘
x: offset.left,
y: offset.top
}

var bottomleft = { //下边缘
x: offset.left,
y: offset.top + elem.height()
}
return isPointInTrangle(currMousePos, leftCorner, topLeft, bottomleft) //通过方法得到点是否在三角形内，决定是否需要延迟
}

//以下每次更换一级列表项都会执行

$('#test').on('mouseenter', 'li', function (e) //给一级菜单每个列表项绑定事件，这里并不是选中所有列表项然后循环进行绑定，而是采用事件代理的方式，主要运用到事件冒泡的特性
{
sub.removeClass('none');

//以下if 在第一次指向列表项时执行
if (!activeRow) //列表项事件处理程序

{
//当前移过去并没有激活的列表项
activeRow = $(e.target).addClass('active'); //给当前列表项添加样式，使背景色改变。$(e.target)：当前列表项。把激活的列表项指向事件元素
activeMenu = $('#' + activeRow.data('id')); //获取对应二级菜单ID。activeRow.data('id')：取对应li列表项的data-id值，与其二级菜单的ID匹配。选择与其对应的二级菜单

//alert(activeRow.data('id'));
//alert(JSON.stringify(activeMenu));
activeMenu.removeClass('none'); // 删除None样式来显示二级菜单

return;

}

if (timer) {
clearTimeout(timer); //debounce去抖技术，在事件被频繁出发时，只执行一次处理
}
//6
var currMousePos = mouseTrack[mouseTrack.length - 1]; //鼠标当前坐标

var leftCorner = mouseTrack[mouseTrack.length - 2]; //a点坐le标

//10
var delay = needDelay(sub, leftCorner, currMousePos) //上下边缘坐标

if (delay) { //在三角形内，setimeout延迟特性加进来
timer = setTimeout(function () {

if (mouseInSub) {
return;

}

//以下移向下一个列表项时，清楚上一个的样式
activeRow.removeClass('active'); //一级菜单一个列表项移动到另一个列表项，清楚上一次状态

activeMenu.addClass('none'); //同样对应的二级菜单一样的操作

//以下给当前列表项设置样式

activeRow = $(e.target); //然后指向当前的
activeRow.addClass('active');
activeMenu = $('#' + activeRow.data('id'));

activeMenu.removeClass('none');
timer = null;

}, 1000)
} else { //不再三角形内,直接进行一级菜单切换


var prevActiveRow = activeRow;
var prevActiveMenu = activeMenu;

activeRow = $(e.target)
activeMenu = $('#' + activeRow.data('id'))

prevActiveRow.removeClass('active');
prevActiveMenu.addClass('none');

activeRow.addClass('active');
activeMenu.removeClass('none');

}

})
})
</script>
</head>
<body>

<div class="wrap" id="test">

<ul>
<li data-id="a">
<span>家用电器</span>
</li>
<li data-id="b">
<span>手机/运营商/数码</span>
</li>
<li data-id="c">
<span>电脑办公</span>
</li>
<li data-id="d">
<span>家居/家具/家装/餐具</span>
</li>
<li data-id="e">
<span>男装/女装/童装/内衣</span>
</li>
<li data-id="f">
<span>个护化妆/清洁用品/宠物</span>
</li>
<li data-id="g">
<span>鞋靴/箱包/珠宝/奢侈品</span>
</li>
<li data-id="h">
<span>运动/户外/钟表</span>
</li>
<li data-id="i">
<span>汽车/汽车用品</span>
</li>
<li data-id="j">
<span>女婴/玩具乐器</span>
</li>
<li data-id="k">
<span>食品/酒类/生鲜/特产</span>
</li>
<li data-id="l">
<span>医药保健</span>
</li>
</ul>

<div id="sub" class="none">
<div id="a" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">电视<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">合资品牌</a>
<a href="#" target="_blank">国产品牌</a>
<a href="#" target="_blank">互联网品牌</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">电视<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">合资品牌</a>
<a href="#" target="_blank">国产品牌</a>
<a href="#" target="_blank">互联网品牌</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">电视<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">合资品牌</a>
<a href="#" target="_blank">国产品牌</a>
<a href="#" target="_blank">互联网品牌</a>
</dd>
</dl>
</div>

<div id="b" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">BBB<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">BBB</a>
<a href="#" target="_blank">BBB</a>
<a href="#" target="_blank">BBB</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">BBB<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">BBB</a>
<a href="#" target="_blank">BBB</a>
<a href="#" target="_blank">BBB</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">BBB<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">BBB</a>
<a href="#" target="_blank">BBB</a>
<a href="#" target="_blank">BBB</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">BBB<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">BBB</a>
<a href="#" target="_blank">BBB</a>
<a href="#" target="_blank">BBB</a>
</dd>
</dl>
</div>

<div id="c" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">CCC<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">CCC</a>
<a href="#" target="_blank">CCC</a>
<a href="#" target="_blank">CCC</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">CCC<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">CCC</a>
<a href="#" target="_blank">CCC</a>
<a href="#" target="_blank">CCC</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">CCC<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">CCC</a>
<a href="#" target="_blank">CCC</a>
<a href="#" target="_blank">CCC</a>
</dd>
</dl>
</div>

<div id="d" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">DDD<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">DDD</a>
<a href="#" target="_blank">DDD</a>
<a href="#" target="_blank">DDD</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">DDD<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">DDD</a>
<a href="#" target="_blank">DDD</a>
<a href="#" target="_blank">DDD</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">DDD<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">DDD</a>
<a href="#" target="_blank">DDD</a>
<a href="#" target="_blank">DDD</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">DDD<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">DDD</a>
<a href="#" target="_blank">DDD</a>
<a href="#" target="_blank">DDD</a>
</dd>
</dl>
</div>

<div id="e" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">EEE<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">EEE</a>
<a href="#" target="_blank">EEE</a>
<a href="#" target="_blank">EEE</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">EEE<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">EEE</a>
<a href="#" target="_blank">EEE</a>
<a href="#" target="_blank">EEE</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">EEE<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">EEE</a>
<a href="#" target="_blank">EEE</a>
<a href="#" target="_blank">EEE</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">EEE<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">EEE</a>
<a href="#" target="_blank">EEE</a>
<a href="#" target="_blank">EEE</a>
</dd>
</dl>
</div>

<div id="f" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">FFF<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">FFF</a>
<a href="#" target="_blank">FFF</a>
<a href="#" target="_blank">FFF</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">FFF<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">FFF</a>
<a href="#" target="_blank">FFF</a>
<a href="#" target="_blank">FFF</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">FFF<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">FFF</a>
<a href="#" target="_blank">FFF</a>
<a href="#" target="_blank">FFF</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">FFF<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">FFF</a>
<a href="#" target="_blank">FFF</a>
<a href="#" target="_blank">FFF</a>
</dd>
</dl>
</div>

<div id="g" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">GGG<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">GGG</a>
<a href="#" target="_blank">GGG</a>
<a href="#" target="_blank">GGG</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">GGG<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">GGG</a>
<a href="#" target="_blank">GGG</a>
<a href="#" target="_blank">GGG</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">GGG<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">GGG</a>
<a href="#" target="_blank">GGG</a>
<a href="#" target="_blank">GGG</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">GGG<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">GGG</a>
<a href="#" target="_blank">GGG</a>
<a href="#" target="_blank">GGG</a>
</dd>
</dl>
</div>

<div id="h" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">HHH<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">HHH</a>
<a href="#" target="_blank">HHH</a>
<a href="#" target="_blank">HHH</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">HHH<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">HHH</a>
<a href="#" target="_blank">HHH</a>
<a href="#" target="_blank">HHH</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">HHH<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">HHH</a>
<a href="#" target="_blank">HHH</a>
<a href="#" target="_blank">HHH</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">HHH<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">HHH</a>
<a href="#" target="_blank">HHH</a>
<a href="#" target="_blank">HHH</a>
</dd>
</dl>
</div>

<div id="i" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">III<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">III</a>
<a href="#" target="_blank">III</a>
<a href="#" target="_blank">III</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">III<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">III</a>
<a href="#" target="_blank">III</a>
<a href="#" target="_blank">III</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">III<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">III</a>
<a href="#" target="_blank">III</a>
<a href="#" target="_blank">III</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">III<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">III</a>
<a href="#" target="_blank">III</a>
<a href="#" target="_blank">III</a>
</dd>
</dl>
</div>

<div id="j" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">JJJ<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">JJJ</a>
<a href="#" target="_blank">JJJ</a>
<a href="#" target="_blank">JJJ</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">JJJ<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">JJJ</a>
<a href="#" target="_blank">JJJ</a>
<a href="#" target="_blank">JJJ</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">JJJ<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">JJJ</a>
<a href="#" target="_blank">JJJ</a>
<a href="#" target="_blank">JJJ</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">JJJ<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">JJJ</a>
<a href="#" target="_blank">JJJ</a>
<a href="#" target="_blank">JJJ</a>
</dd>
</dl>
</div>

<div id="k" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">KKK<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">KKK</a>
<a href="#" target="_blank">KKK</a>
<a href="#" target="_blank">KKK</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">KKK<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">KKK</a>
<a href="#" target="_blank">KKK</a>
<a href="#" target="_blank">KKK</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">KKK<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">KKK</a>
<a href="#" target="_blank">KKK</a>
<a href="#" target="_blank">KKK</a>
</dd>
</dl>

<dl>
<dt>
<a href="#" target="_blank">KKK<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">KKK</a>
<a href="#" target="_blank">KKK</a>
<a href="#" target="_blank">KKK</a>
</dd>
</dl>
</div>

<div id="l" class="sub_content none">
<dl>
<dt>
<a href="#" target="_blank">LLL<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">LLL</a>
<a href="#" target="_blank">LLL</a>
<a href="#" target="_blank">LLL</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">LLL<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">LLL</a>
<a href="#" target="_blank">LLL</a>
<a href="#" target="_blank">LLL</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">LLL<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">LLL</a>
<a href="#" target="_blank">LLL</a>
<a href="#" target="_blank">LLL</a>
</dd>
</dl>
<dl>
<dt>
<a href="#" target="_blank">LLL<i>></i></a>
</dt>
<dd>
<a href="#" target="_blank">LLL</a>
<a href="#" target="_blank">LLL</a>
<a href="#" target="_blank">LLL</a>
</dd>
</dl>
</div>

</div>

</div>

</body>
</html>