- 浏览: 523230 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
mzkun_cool:
...
Project configuration is not up-to-date with pom.xml -
杨瑞敏:
Project configuration is not up-to-date with pom.xml -
Jelly_B:
设置div的透明背景 -
taohaha:
感谢楼主,这个问题我弄了两天。楼主正解,非常感激啊!!![ ...
Flex4.5 中的错误 -
778856:
哈哈 就是刷新一下
Project configuration is not up-to-date with pom.xml
JavaScript 多级联动浮动(下拉)菜单 (第二版)【转】
效果预览
-------------test-------------
位置: 第四个 第三个 第二个 第一个1秒 0.5秒 0.2秒 不延时
仿京东商城商品分类菜单:
.container2, .container2 dd, .container2_2 dl, .container2_2 dd { margin: 0pt; }.container2 { font-size: 14px; width: 190px; border: 1px solid rgb(207, 32, 32); background: none repeat scroll 0% 0% rgb(255, 255, 245); padding: 5px 8px; line-height: 30px; color: rgb(51, 51, 51); }.container2 dt { font-weight: bold; color: rgb(207, 32, 32); }.container2 dd { background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/n4.jpg") no-repeat scroll 180px 10px transparent; }.container2_2 { background-color: rgb(190, 190, 195); display: none; }.container2_2 dl { font-size: 14px; width: 200px; border: 1px solid rgb(150, 150, 150); background: none repeat scroll 0% 0% rgb(255, 255, 255); position: relative; left: -3px; top: -3px; }.container2_2 dd div { padding: 5px 20px; background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/n4.jpg") no-repeat scroll 6px 7px transparent; }.container2_2 dt, .shadow { padding: 0pt 5px; position: absolute; background: none repeat scroll 0% 0% rgb(255, 255, 255); border-width: 1px 0pt 1px 1px; border-style: solid none solid solid; border-color: rgb(150, 150, 150) -moz-use-text-color rgb(150, 150, 150) rgb(150, 150, 150); width: 169px; left: -180px; top: -1px; height: 24px; line-height: 24px; }.shadow { background-color: rgb(190, 190, 195); border-color: rgb(190, 190, 195); top: 0pt; }.container2_2 a { display: block; }.container2_2 a:link, .container2_2 a:visited, .container2_2 a:active { color: rgb(51, 51, 51); text-decoration: none; }.container2_2 a:hover { color: rgb(255, 96, 38); text-decoration: underline; }
仿window xp右键菜单:
.container3 { font-size: 12px; border: 1px solid rgb(157, 157, 161); padding: 3px; line-height: 18px; background: none repeat scroll 0% 0% rgb(255, 255, 255); cursor: default; -moz-user-select: none; }.container3 div { padding: 0pt 20px; }.menu3_1 { color: rgb(172, 168, 153); }.menu3_2 { background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif") no-repeat scroll 133px 0pt transparent; }.menu3_2_on { background-position: 133px -18px; }.menu3_3 { background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif") no-repeat scroll left -36px transparent; }.menu3_3_on { background-position: left -54px; }.menu3_4 { background: url("http://images.cnblogs.com/cnblogs_com/cloudgamer/169629/o_menu.gif") no-repeat scroll left -72px transparent; }.menu3_4_on { background-position: left -90px; }.line3 { border-bottom: 1px solid rgb(172, 168, 153); margin: 4px 0pt; }.on3 { background-color: rgb(49, 106, 197); color: rgb(255, 255, 255); }.area3 { width: 500px; height: 200px; border: 1px solid rgb(172, 168, 153); }.pos3 { position: absolute; display: none; width: 150px; }
仿淘宝拼音索引菜单:
.container4 li, .container4_2 li { list-style: none outside none; }.container4 ul, .container4_2 { margin: 0pt; }.container4 { width: 350px; padding: 7px 10px; font: 12px/15px Verdana; border: 1px solid rgb(204, 204, 204); background: none repeat scroll 0% 0% rgb(255, 254, 237); height: 15px; }.container4 li { float: left; padding: 0pt 10px; border-right: 1px solid rgb(204, 204, 204); }.container4 div { float: left; color: rgb(0, 0, 0); padding-right: 10px; }li.menu4 { position: relative; margin-left: -1px; top: -1px; z-index: 9999; border-width: 1px 1px 0pt; border-style: solid solid none; border-color: rgb(133, 204, 255) rgb(133, 204, 255) -moz-use-text-color; padding-bottom: 8px; color: rgb(255, 96, 38); background: none repeat scroll 0% 0% rgb(219, 243, 255); }.container4_2 { width: 350px; padding: 10px; border: 1px solid rgb(133, 204, 255); background: none repeat scroll 0% 0% rgb(219, 243, 255); line-height: 25px; font-size: 14px; font-weight: bold; display: none; }.container4_2 a { display: block; }.container4_2 a:link, .container4_2 a:visited, .container4_2 a:active { color: rgb(86, 85, 83); text-decoration: none; }.container4_2 a:hover { color: rgb(255, 85, 0); text-decoration: underline; }.container4 a:link, .container4 a:visited, .container4 a:hover, .container4 a:active { color: rgb(86, 85, 83); text-decoration: none; }.menu4 a:link, .menu4 a:visited, .menu4 a:active { color: rgb(255, 96, 38); }.menu4 a:hover { color: rgb(255, 96, 38); text-decoration: underline; }
程序原理
程序最关键的地方是多级联动,先大概说明一下:
首先第一级的菜单元素整理好后,从他们开始,当某个菜单元素触发显示下级菜单时,
准备好下一级的容器元素,并把下一级的菜单元素放进去,再定位并显示容器元素。
里面的菜单元素又可以触发显示下级菜单,然后按上面的步骤执行下去。
这样一级一级的递推下去,形成多级的联动菜单。
程序说明
【容器对象】
在多级联动中,每一级都需要一个容器元素来存放菜单元素。
程序中每个容器元素都对应一个容器对象,用来记录该容器的相关信息。
容器对象的集合记录在程序的_containers属性中。
容器参数containers是程序实例化时的必要参数,它的结构如下:
容器元素(id),
{ id: 容器元素(id), menu: 插入菜单元素(id) },
]
首先如果containers不是数组的话,程序会自动转成单元素数组。
如果菜单插入的元素就是容器元素本身,可以直接用容器元素(id)作为数组元素。
否则应该使用一个对象结构,它包括一个id属性表示是容器元素(id)和一个menu属性表示菜单插入的元素(id)。
containers会在程序初始化时这样处理:
$$A.forEach($$A.isArray(containers) ? containers : [containers], function (o, i){
var pos, menu;
if ( o.id ) {
pos = o.id; menu = o.menu ? o.menu : pos;
} else {
pos = menu = o;
};
pos = $$(pos); menu = $$(menu);
pos && menu && this ._iniContainer( i, { " pos " : pos, " menu " : menu } );
}, this );
主要是生成一个容器对象,其中pos属性是容器元素,menu属性是插入菜单的元素。
然后传递索引和容器对象给_iniContainer函数,对容器对象做初始化。
在_iniContainer中,首先用_resetContainer重置容器对象可能在程序中设置过的属性。
再给容器元素添加事件:
$$E.addEvent(oContainer, " mouseover " , $$F.bind( function (){ clearTimeout( this ._timerContainer); }, this ));
$$E.addEvent(oContainer, " mouseout " , $$F.bindAsEventListener( function (e){
// 先判断是否移出到所有容器之外
var elem = e.relatedTarget,
isOut = $$A.every( this ._containers, function (o){ return o.pos == elem || ! ($$D.contains(o.pos, elem)); });
if ( isOut ) {
// 清除定时器并隐藏
clearTimeout( this ._timerContainer); clearTimeout( this ._timerMenu);
this ._timerContainer = setTimeout( $$F.bind( this .hide, this ), this .delay );
};
}, this ));
在mouseout时,先判断是否容器内部或容器之间触发,不是的话再用定时器执行hide隐藏函数。
在hide里面,主要是隐藏容器:
if ( i === 0 ) {
this ._resetCss(o);
} else {
this ._hideContainer(o);
};
});
由于第一级容器一般是不自动隐藏的,只需要用_resetCss来重置样式。
其他容器会用_hideContainer函数来处理隐藏:
this ._containers[container._index - 1 ]._active = null ;
其中_active属性是保存该容器触发下级菜单的菜单对象,在隐藏容器同时重置上一级容器的_active。
在mouseover时清除容器定时器,其实就是取消hide执行。
之后是设置样式:
$$D.setStyle(container.pos, {
position: " absolute " , display: " block " , margin: 0 ,
zIndex: this ._containers[index - 1 ].pos.style.zIndex + 1
});
};
除了第一级容器外,都设置浮动需要的样式。
最后用_index属性记录索引,方便调用,并把容器对象插入到容器集合中:
this ._containers[index] = container;
这个索引很重要,它决定了容器是用在第几级菜单。
【菜单对象】
容器元素插入了菜单元素才算一个菜单。
程序中每个菜单元素都对应一个菜单对象,用来记录该菜单的相关信息。
程序初始化前,应该先创建好自定义菜单集合,它的结构是这样的:
{ id: 1 , parent: 0 , html: 元素内容 },
{ id: 2 , parent: 1 , html: 元素内容 },
]
其中id是菜单的唯一标识,parent是父级菜单的id。
除了这两个关键属性外,还可以包括以下属性:
rank:排序属性
elem:自定义元素
tag:生成标签
css:默认样式
hover:触发菜单样式
active: 显示下级菜单时显示样式
html:菜单内容
relContainer:是否相对容器定位(否则相对菜单)
relative:定位对象
attribute:自定义Attribute属性
property:自定义Property属性
其中relContainer和relative是用于下级容器定位的。
自定义菜单集合会保存在_custommenu属性中。
在程序初始化时会执行_buildMenu程序,根据这个_custommenu生成程序需要的_menus菜单对象集合。
_buildMenu是比较关键的程序,菜单的层级结构就是在这里确定,它由以下几步组成:
第一步,清除旧菜单对象集合的dom元素。
这一步后面“内存泄漏”会详细说明。
第二步,生成菜单对象集合。
为了能更有效率地获取指定id的菜单对象,_menus是以id作为字典关键字的对象。
首先创建带根菜单(id为“0”)对象的_menus:
然后整理_custommenu并插入到_menus中:
$$A.forEach( this ._custommenu, function (o) {
var menu = $$.deepextend( $$.deepextend( {}, options ), o || {} );
if ( !! this ._menus[ menu.id ] ) { return ; };
menu._children = []; menu._index = - 1 ;
this ._menus[menu.id] = menu;
}, this );
其中菜单对象中包含对象属性,要用deepextend深度扩展来复制属性。
为确保id是唯一标识,会排除相同id的菜单,间接排除了id为“0”的菜单。
在重置_children(子菜单集合)和_index(联级级数)之后,就可以插入到_menus中了。
第三步,建立树形结构。
菜单之间的关系是一个树形结构,程序通过id和parent来建立这个关系的(写过数据库分级结构的话应该很熟悉)。
而第一版是把子类直接菜单写在菜单元素的menu属性中,形成类似多维数组的结构。
比较这两个方法,第一版的优势在于定义菜单时就直接确立了关系,而新版还必须根据id和parent来判断增加代码复杂度。
新版的优势是使用维护方便,灵活,级数越多就越体现出来,而第一版刚好相反。
能不能结合这两个方法的优势呢?
这里采用了一个折中的方法,在写自定义菜单对象时用的是新版的方法,然后程序初始化时把它转换成类多维数组结构。
转换过程是这样的:
首先根据parent找到父菜单对象:
如果找不到父菜单对象或父菜单对象就是菜单对象本身的,当成一级菜单处理:
最后把当前菜单对象放到父菜单对象的_children集合中:
这就把_menus变成了类多维数组结构,而且这个结构不会发生死循环。
第四步,整理菜单对象集合。
这步主要是整理_menus里面的菜单对象。
首先,把自定义菜单元素放到碎片文档中:
菜单元素是需要显示时才会处理的,这样可以防止在容器上出现未处理的菜单元素。
然后是修正样式(详细看样式设置部分)。
最后,对菜单对象的_children集合进行排序:
先按rank再按id排序,跟菜单对象定义的顺序是无关的。
执行完BuildMenu程序之后,_menus菜单对象集合就建立好了。
麻烦的是在每次修改_custommenu之后,都必须执行一次_buildMenu程序。
【多级联动】
容器对象和菜单对象都准备好了,下面就是如何利用它们来做程序的核心——多级联动效果了。
多级联动包括以下步骤:
第一步,准备一级容器。
一级容器一般是显示状态的(也可以自己定义它的显示隐藏,像仿右键菜单那样)。
第二步,向容器插入菜单。
通过_insertMenu程序,可以向指定容器插入指定菜单,其中第一个参数是索引,第二个参数是父菜单id。
在_insertMenu程序里面,先判断是否同一个父级菜单,是的话就返回不用重复操作了:
if ( container._parent === parent ) { return ; };
container._parent = parent;
接着把原有容器内菜单移到碎片对象中:
在第一版,菜单每次使用都会重新创建,新版改进后会把旧菜单元素保存到碎片对象中,要使用时再拿出来。
然后根据parent获取父菜单对象,并把父菜单的_children子菜单集合的插入到容器中:
this ._checkMenu( menu, index );
container._menus.push(menu);
container.menu.appendChild(menu._elem);
}, this );
这样整个菜单就准备好了。
第三步,添加触发下级菜单事件。
上面在把菜单插入到容器之前,会先用_checkMenu程序检查菜单对象。
_checkMenu程序主要是检测和处理菜单元素。
首先判断没有自定义元素,没有的话就创建一个:
if ( ! elem ) { elem = document.createElement(menu.tag); elem.innerHTML = menu.html; };
第一版并不能自定义元素,但考虑到seo、渐进增强等,在新版加入了这个功能。
但每次BuildMenu之后会把所有菜单元素包括自定义元素都清除,这个必须留意。
然后分别设置property、attribute和className属性:
var attribute = menu.attribute;
for ( var att in attribute) { elem.setAttribute( att, attribute[att] ); };
elem.className = menu.css;
ps:关于property和attribute的区别请看这里的attribute/property部分
。
然后是关键的一步,添加HoverMenu触发事件程序:
$$E.addEvent( elem, " mouseover " , menu._event );
处理后的元素会保存在菜单对象的_elem属性中。
第四步,触发显示下级菜单事件。
当触发了显示下级菜单事件,就会执行_hoverMenu程序。
在_hoverMenu程序里面,主要是做一些样式设置,详细参考后面的样式设置部分。
然后是用定时器准备执行_showMenu显示菜单程序。
第五步,整理菜单容器。
在_showMenu程序中,首先是隐藏不需要的容器:
然后判断当前菜单是否有子菜单,当有子菜单时,先用_checkContainer程序检查下级菜单容器。
_checkContainer程序主要是检查容器是否存在,不存在的话就自动添加一个:
,container = pre.parentNode.insertBefore( pre.cloneNode( false ), pre );
container.id = "" ;
其实就是用cloneNode复制前一个容器,注意要重置id防止冲突。
虽然程序能自动创建菜单,但也要求至少自定义一个容器。
第六步,显示菜单容器。
在显示之前,先按第二步向容器插入菜单,最后就是执行_showContainer程序来定位和显示容器了。
当下一个容器内的菜单触发显示下级菜单事件时,会显示下下级的菜单容器。
程序就是这样一级一级递推下去,形成多级联级效果。
【样式设置】
样式设置也是一个重要的部分,不是说要弄出多炫的界面,而是如何使程序能最大限度地灵活地实现那些界面。
菜单对象有三个样式相关的属性,分别是:
css:默认样式
hover:鼠标进入菜单时使用样式
active:显示下级菜单时使用样式
在_buildMenu程序中,会对这些样式属性进行整理:
if ( !! o.elem && o.elem.className ) {
o.css = o.elem.className;
} else if ( o.css === undefined ) { o.css = "" ; };
if ( o.hover === undefined ) { o.hover = o.css; };
if ( o.active === undefined ) { o.active = o.hover; };
可以看到,程序会优先使用自定义元素的class,避免被程序设置的默认样式覆盖。
空字符串也可能被用来清空样式,所以要用undefined来判断是否自定义了样式。
程序中主要在两个地方设置样式:在鼠标移到菜单元素上时(_hoverMenu)和显示下级菜单时(_showMenu)。
在_hoverMenu程序中,先对每个显示的容器设置一次样式:
if ( o.pos.visibility === " hidden " ) { return ; };
this ._resetCss(o);
var menu = o._active;
if ( menu ) { menu._elem.className = menu.active; };
});
由于鼠标可能是在多个容器间移动,所以所有显示的容器都需要设置。
用_resetCss重置容器样式后再设置有下级菜单的菜单的样式为active。
为了方便获取,容器对象用一个_active属性来保存当前容器触发了下级菜单的菜单对象。
然后是设置鼠标所在菜单的样式:
为了优先设置active样式,在当前菜单不是容器的_active时才设置hover样式。
在_showMenu程序中,首先把显示下级菜单的菜单对象保存到容器的_active属性。
再用_resetCss重置当前容器样式,这个在同级菜单中移动时会有用。
然后再根据当前菜单是否有下级菜单来设置样式为active或hover。
【内存泄漏】
上面“菜单对象”中说到清除旧菜单对象的dom元素,这个主要是为了防止内存泄漏。
关于内存泄漏也有很多文章,这里推荐看看Douglas Crockford的“JScript Memory Leaks
”和winter的“浏览器中的内存泄露
”。
下面说说我解决本程序内存泄漏的经过:
首先,通过调用程序的Add和Delete数千次来测试是否有内存泄漏。
怎么看出来呢?可以找些相关的工具来检测,或者直接看任务管理器的页面文件(pf)使用记录。
结果发现,虽然每个元素都用removeChild移出了dom,但随着循环的次数增多,pf还是稳步上升。
于是按照Memory Leaks中说的“we must null out all of its event handlers to break the cycles”去掉事件:
效果是有了,但不太理想,然后再逐一排除,发现原来是_elem属性还关联着元素,结果经过一些操作后,又把元素append到dom上,还重新创建了一个元素。
于是在移除元素后,立即重置_elem和elem属性:
内存泄漏就没有了,其实这里也不算是内存泄露了,而是程序设计有问题了。
所以清除dom元素时必须注意:
1,按照Douglas Crockford的建议,移除所有dom元素相关的事件函数;
2,删除/重置所有关联dom元素的js对象/属性。
【cloneNode的bug】
在上面多级联动中说到,会用cloneNode复制容器,但cloneNode在ie中有一个bug:
在ie用attachEvent给dom元素绑定事件,在cloneNode之后会把事件也复制过去。
而用addEventListener添加的事件就不会,可以在ie和ff测试下面的代码:
<! DOCTYPE html >
< html >
< body >
< div id = " t " > div < / div>
< script >
var o = document.getElementById( " t " );
if (o.attachEvent){
o.attachEvent( " onclick " , function (){alert( 2 )});
} else {
o.addEventListener( " click " , function (){alert( 2 )}, false );
}
document.body.appendChild(o.cloneNode( true ));
< / script>
< / body>
< / html>
在ie和ff点击第一个div都会触发alert,关键是第二个div,在ff不会触发,而ie就会。
当然这个是不是bug还不清楚,或许attachEvent本来就是这样设计的也说不定。
但第一版就是由于这个bug,而没有用cloneNode。
在找解决方法之前,再扩展这个问题,看看直接添加onclick事件会不会有同样的bug。
首先测试在元素里面添加onclick:
< html >
< body >
< div id = " t " onclick = " alert(1) " > div < / div>
< script >
var o = document.getElementById( " t " );
document.body.appendChild(o.cloneNode( true ));
< / script>
< / body>
< / html>
结果在ie和ff都会复制事件。
再测试在js添加onclick:
<! DOCTYPE html >
< html >
< body >
< div id = " t " > div < / div>
< script >
var o = document.getElementById( " t " );
o.onclick = function (){alert( 1 )}
document.body.appendChild(o.cloneNode( true ));
< / script>
< / body>
< / html>
结果在ie和ff都不会复制事件,看来只有attachEvent会引起这个bug。
下面是解决方法:
用John Resig在《精通JavaScript》推荐的Dean Edwards写的addEvent和removeEvent方法
来添加/移除事件。
它的好处就不用说了,而且它能在ie解决上面说到的cloneNode的bug。
因为它的实现原理是在ie用onclick来绑定事件,而上面的测试也证明用onclick绑定的事件是不会被cloneNode复制的。
ps:我对原版的方法做了些修改,方便调用。
【浮动定位】
容器的浮动定位用的是浮动定位提示效果
中的定位方法。
在该文章中已经详细说明了如何获取指定的浮动定位坐标,这里做一些补充。
一般来说用getBoundingClientRect配合scrollLeft/scrollTop就能获得对象相对文档的位置坐标。
测试下面代码:
<! DOCTYPE html >
< html >
< body style = " padding:1000px 0; " >
< div id = " t1 " style = " border:1px solid; width:100px; height:100px; " >< / div>
< div id = " t2 " >< / div>
< script >
var $$ = function (id) {
return " string " == typeof id ? document.getElementById(id) : id;
};
var b = 0 ;
window.onscroll = function (){
var t = $$( " t1 " ).getBoundingClientRect().top + document.documentElement.scrollTop;
if ( t != b ){ b = t; $$( " t2 " ).innerHTML += t + " <br> " ; }
}
< / script>
< / body>
< / html>
在除ie8外的浏览器,t会保持在一个固定值,但在ie8却会在1008和1009之间变换(用鼠标一格一格滚会比较明显)。
虽然多数时候还是标准的1008,但原来的效果可能就会被这1px的差距破坏(例如仿京东和仿淘宝的菜单)。
ps:chrome和safari要把documentElement换成body。
为了解决这个问题,只好在ie8的时候用回传统的offset来取值了(详细参考代码)。
至于造成这个问题的原因还没弄清楚,各位有什么相关资料的记得告诉我哦。
使用技巧
在仿京东商城商品分类菜单中,实现了一个阴影效果。
原理是这样的:
底部是一个灰色背景层(阴影),里面放内容层,然后设置内容层相对定位(position:relative),并做适当的偏移(left:-3px;top:-3px;)。
由于相对定位会保留占位空间,这样就能巧妙地做出了一个可自适应大小的背景层(阴影)。
ps:博客园首页也做了类似的效果,但貌似错位有些严重哦。
仿右键菜单效果并不支持opera,因为opera并没有类似oncontextmenu这样的事件,要实现的话会很麻烦。
ps:如果想兼容opera的话,可以看看这篇文章“Opera下自定义右键菜单的研究
”。
注意,在oncontextmenu事件中要用阻止默认事件(preventDefault)来取消默认菜单的显示。
这个效果还做了一个不能选择的处理,就是拖动它的内容时不会被选择。
在ff中把样式-moz-user-select设为none就可以了,而ie、chrome和safari通过在onselectstart返回false来实现相同的效果。
ps:css3有user-select样式,但貌似还没有浏览器支持。
当然,还有很多不完善的地方,这里只是做个参考例子,就不深究了。
仿淘宝拼音索引菜单主要体现了a
相关推荐
项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java 框架:ssm,mybatis JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 服务器:tomcat7
YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;
1、嵌入式物联网单片机项目开发例程,简单、方便、好用,节省开发时间。 2、代码使用IAR软件开发,当前在CC2530上运行,如果是其他型号芯片,请自行移植。 3、软件下载时,请注意接上硬件,并确认烧录器连接正常。 4、有偿指导v:wulianjishu666; 5、如果接入其他传感器,请查看账号发布的其他资料。 6、单片机与模块的接线,在代码当中均有定义,请自行对照。 7、若硬件有差异,请根据自身情况调整代码,程序仅供参考学习。 8、代码有注释说明,请耐心阅读。 9、例程具有一定专业性,非专业人士请谨慎操作。
手语图像分类数据集【已标注,约2,500张数据】 分类个数【36】:0、1、a、b等【具体查看json文件】 划分了训练集、测试集。存放各自的同一类数据图片。如果想可视化数据集,可以运行资源中的show脚本。 CNN分类网络改进:https://blog.csdn.net/qq_44886601/category_12858320.html 【更多图像分类、图像分割(医学)、目标检测(yolo)的项目以及相应网络的改进,可以参考本人主页:https://blog.csdn.net/qq_44886601/category_12803200.html】
CNCAP 2024打分表
系统可以提供信息显示和相应服务,其管理智慧校园管理系统信息,查看智慧校园管理系统信息,管理智慧校园管理系统。 项目包含完整前后端源码和数据库文件 环境说明: 开发语言:Java JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:Navicat11 开发软件:eclipse/idea Maven包:Maven3.3 部署容器:tomcat7 小程序开发工具:hbuildx/微信开发者工具
Matlab领域上传的视频均有对应的完整代码,皆可运行,亲测可用,适合小白; 1、代码压缩包内容 主函数:main.m; 调用函数:其他m文件;无需运行 运行结果效果图; 2、代码运行版本 Matlab 2019b;若运行有误,根据提示修改;若不会,私信博主; 3、运行操作步骤 步骤一:将所有文件放到Matlab的当前文件夹中; 步骤二:双击打开main.m文件; 步骤三:点击运行,等程序运行完得到结果; 4、仿真咨询 如需其他服务,可私信博主; 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
影音互动科普网站功能描述 影音互动科普网站旨在通过多媒体形式(视频、音频、互动内容等)传播科学知识,提高公众的科学素养。该网站结合娱乐与教育,提供易于理解的科普内容,吸引不同年龄层次的用户参与和学习。以下是该网站的主要功能描述: 1. 用户注册与登录 用户注册:用户可以通过电子邮箱、手机号或社交账号(如微信、微博等)注册,提供基本信息并设置密码。 用户登录:支持通过注册的账号登录,保障个人信息的安全性,并提供自动登录功能。 2. 科普视频与音频库 视频内容:网站提供各类科普视频,包括短视频、纪录片、讲座、实验演示等,覆盖物理、化学、生物、地理、天文等多个领域。 音频内容:提供科普音频节目,如科普广播、播客、专题讲座等,便于用户在日常生活中进行学习。 视频分类:按科目、难度、年龄层、时长等维度对视频和音频进行分类,帮助用户更精准地找到感兴趣的内容。 字幕与多语言支持:提供字幕、翻译和多语种版本,帮助不同语言的用户学习。 3. 互动问答与讨论区 专家问答:用户可以向科普专家提问,专家提供详尽的解答,解决用户的科学疑惑。 社区讨论:用户可以在视频下方或专题页面中发表评论、提问或与其他用户
倪海厦讲义及笔记,易学数据测算
内容概要:本文档是《组合数学答案-网络流传版.pdf》的内容,主要包含了排列组合的基础知识以及一些经典的组合数学题目。这些题目涵盖了从排列数计算、二项式定理的应用到容斥原理的实际应用等方面。通过对这些题目的解析,帮助读者加深对组合数学概念和技巧的理解。 适用人群:适合初学者和有一定基础的学习者。 使用场景及目标:可以在学习组合数学课程时作为练习题参考,也可以在复习考试或准备竞赛时使用,目的是提高解决组合数学问题的能力。 其他说明:文档中的题目覆盖了组合数学的基本知识点,适合逐步深入学习。每个题目都有详细的解答步骤,有助于读者掌握解题思路和方法。
内容概要:本文是一篇完整的管理系统开发指南,详细介绍了功能要求、技术栈选择、数据库设计、用户界面搭建以及安全控制等方面的内容。功能要求包括用户管理、权限控制、数据管理、系统日志、通知与消息、统计分析和扩展模块。使用的技术栈涵盖了后端(Java、Python、C#等)和前端(React、Vue.js、Angular等)技术,以及数据库设计和安全控制措施。 适合人群:具备一定开发经验的软件工程师和技术管理人员。 使用场景及目标:适用于企业级管理系统开发项目,旨在构建一个高效、安全且易于扩展的系统。开发者可以参考本文档进行系统的设计和实现,确保系统满足业务需求。 其他说明:本文档提供了详细的步骤和最佳实践,帮助开发者更好地理解和应用管理系统开发的各种技术。通过结合实际案例和实践经验,本文档能够为开发者提供有价值的指导。
听器听力损伤程度分级表.docx
MATLAB代码:基于条件风险价值的合作型Stackerlberg博弈微网动态定价与优化调度 关键词:微网优化调度 条件风险价值 合作博弈 纳什谈判 参考文档:《A cooperative Stackelberg game based energy management considering price discrimination and risk assessment》完美复现 仿真平台:MATLAB yalmip+cplex+mosek 主要内容:代码主要做的是一个基于合作型Stackerlberg博弈的考虑差别定价和风险管理的微网动态定价与调度策略,提出了一个双层能源管理框架,实现多个微网间的P2P能源交易,上层为零商的动态定价模型,目标是社会福利最大化;下层是多个产消者的合作博弈模型,优化各产消者的能量管理策略。 同时,采用纳什谈判法对多个产消者的合作剩余进行公平分配,还考虑了运行风险,采用条件风险价值(CVaR)随机规划方法来描述零商的预期损失。 求解方面,双层模型被基于KKT条件转为单层模型,模型可以高效求解。 这段代码是一个基于合作型Stackelberg博弈的微网
YOLO系列算法目标检测数据集,包含标签,可以直接训练模型和验证测试,数据集已经划分好,包含数据集配置文件data.yaml,适用yolov5,yolov8,yolov9,yolov7,yolov10,yolo11算法; 包含两种标签格:yolo格式(txt文件)和voc格式(xml文件),分别保存在两个文件夹中,文件名末尾是部分类别名称; yolo格式:<class> <x_center> <y_center> <width> <height>, 其中: <class> 是目标的类别索引(从0开始)。 <x_center> 和 <y_center> 是目标框中心点的x和y坐标,这些坐标是相对于图像宽度和高度的比例值,范围在0到1之间。 <width> 和 <height> 是目标框的宽度和高度,也是相对于图像宽度和高度的比例值; 【注】可以下拉页面,在资源详情处查看标签具体内容;
20块钱买的【动漫网页设计】源码,免费分享出来啦,如果要积分那是系统自动涨的啦。 内容概要:本资源是一份动漫网页设计的源码,价格仅为20元,作者将其免费分享给大家。该源码包含了动漫元素的设计,包括背景、图标、按钮等,同时也提供了一些常见的网页布局和交互效果。通过该资源,可以学习到动漫网页设计的基本原理和技巧。 适用人群:本资源适用于对动漫网页设计感兴趣的人群,包括网页设计师、UI设计师、前端开发工程师等。同时,对于想要学习动漫网页设计的初学者也非常适用。 使用场景及目标:该资源可以用于学习和实践动漫网页设计的技巧和原理。通过学习该源码,可以了解到动漫网页设计的基本要素和设计思路,同时也可以借鉴其中的设计元素和交互效果,应用到自己的网页设计中。 其他说明:本资源是作者自己设计的,经过了多次修改和优化,具有一定的参考价值。同时,作者也将其价格设置的非常低,希望更多的人可以学习到动漫网页设计的技巧和方法。如果您对该资源有任何疑问或建议,欢迎在评论区留言,作者会尽快回复。。内容来源于网络分享,如有侵权请联系我删除。另外如果没有积分的同学需要下载,请私信我。
自考 本科 C++程序设计-课本 参考答案
每周质量安全排查报告.docx
YOLO算法-杂草检测项目数据集-3970张图像带标签-杂草.zip
内存搜索工具(易).rar
AI大模型研究相关报告