-
http://runjs.cn/code/bge25z6u查看全部
-
https://github.com/yechenl/jq_menu_wuyangchi 代码,在这里,能帮你们的只有这么多了查看全部
-
mouseenter和mouseover的区别: 1. 使用mouseover/mouseout时,如果鼠标移动到子元素上,即便没有离开父元素,也会触发父元素的mouseout事件; 2. 使用mouseenter/mouseleave时,如果鼠标没有离开父元素,在其子元素上任意移动,也不会触发mouseleave事件。查看全部
-
<style> .wrap{ position:relative; width:200px; left:50px; top:50px; } ul{ padding:15px 0; margin:9; list-style: none; color:#ffffff; background:#6c6669; border-right-width: 0; } li{ display:block; height:30px; line-height: 30px; cursor: pointer; font-size: 12px; position:relative; padding-left: 12px; } li.astive{ background: #999395; } li span:hover{ color:#c81623; } .none{ display:none; } #sub{ width:600px; position:absolute; border:1px solid #f7f7f7; background:#f7f7f7; box-shadow:2px 0 5px rgba(0,0,0,0.3) ; left:200px; top:0; 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 0; } .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-size: 14px; position:absolute; right:5px; top:5px; } </style>//css代码 js代码 $(document).ready (function() { var sub = $('#sub') var activeRow var activeMenu $('#test') .on('mouseenter',function(e) { sub.removeClass('none') }) .on('mouseleave',function(e) { sub.addClass('none') if(activeRow){ activeRow.removeClass('active') activeRow = null } if(activeMenu){ activeMenu.addClass('none') activeMenu = null } }) .on('mouseenter','li',function(e){ if(!activeRow){ activeRow = $(e.target).addClass('active') activeMenu = $('#' + activeRow.data('id')) activeMenu.removeClass('none') return } activeRow.removeClass('active') activeMenu.addClass('none') activeRow = $(e.target) activeRow.addClass('active') activeMenu = $('#' + activeRow.data('id')) activeMenu.removeClass('none') }) })
查看全部 -
一、基于用户行为预测的切换技术: 1、跟踪鼠标的移动。 2、用鼠标当前位置,和鼠标上一次位置与子菜单上下边缘形成的三角形区域进行比较。 二、如何比较 1、向量:Vab=Pb-Pa 2、二维向量叉乘公式: a(x1,y1)*b(x2,y2)=x1*y2-x2*y1 3、用叉乘法判断点在三角形内 三、实现效果: 1、鼠标自然的移动和点击到子菜单。 2、切换时无延迟。查看全部
-
一、课程内容。 1、开发基本的菜单结构。 2、开发普通的二级菜单效果。 3、加入延迟解决移动问题。 4、解决延迟引入的新问题。查看全部
-
mouseenter和mouseover的区别:
使用mouseover/mouseout时,如果鼠标移动到子元素上,即便没有
离开父元素,也会触发父元素的mouseout事件;
使用mouseenter/mouseleave时,如果鼠标没有离开父元素,在其
子元素上任意移动,也不会触发mouseleave事件;
查看全部 -
重要查看全部
-
e.target相当于this,但是this因为冒泡原理,他随时可能变成ul的this,所以用e.target,就相当于选中唯一的li的this
查看全部 -
JavaScript输出: 1.通过指定的ID来访问html元素,改变其内容 <p id ="demo">love</p> <script> document.getElementById("demo").innerHtml="文字"; </script> 2.直接写到文档输出 <script> document.write("<p>文字</p>"); </script> 3.警告:使用document.write()仅向文档输出写内容,若在文档已完成加载后执行document.write,页面的内容会被覆盖 <body> <h1>my</h1><p>you</p> <button onclick="myFunction( )">love</button> function myFunction( ) {document.write("文档");} </script> </body>查看全部
-
i标签 比较短,可以省字节查看全部
-
<i>></i>箭头查看全部
-
1、脚本和样式都可以添加效果,为了更精确的添加,一般采用脚本的方式,添加类; 2、dl中的dt、dd能实现标题内容的有序排列; 3、mouseenter和mouseleave鼠标移入移出;使用mouseover、mouseout,鼠标移动到子元素上,即使没有离开父元素,也会触发父元素的mouseout事件,mouseenter和mouseleave,如果没有离开父元素,在其子元素上任意移动,都不会触发mouseleave事件; 4、事件代理方式,绑定在父元素上;查看全部
-
我的笔记12查看全部
-
日范德萨范德萨查看全部
举报
0/150
提交
取消