为了账号安全,请及时绑定邮箱和手机立即绑定

JS实现京东无延迟菜单效果

呵呵SN JS工程师
难度初级
时长48分
学习人数
综合评分9.33
85人评价 查看评价
9.7 内容实用
9.2 简洁易懂
9.1 逻辑清晰
  • 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、解决延迟引入的新问题。
    查看全部
    2 采集 收起 来源:课程介绍

    2017-05-03

  • 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>
    查看全部
    1 采集 收起 来源:课程介绍

    2018-03-22

  • i标签 比较短,可以省字节
    查看全部
  • <i>&gt</i>箭头
    查看全部
  • 1、脚本和样式都可以添加效果,为了更精确的添加,一般采用脚本的方式,添加类; 2、dl中的dt、dd能实现标题内容的有序排列; 3、mouseenter和mouseleave鼠标移入移出;使用mouseover、mouseout,鼠标移动到子元素上,即使没有离开父元素,也会触发父元素的mouseout事件,mouseenter和mouseleave,如果没有离开父元素,在其子元素上任意移动,都不会触发mouseleave事件; 4、事件代理方式,绑定在父元素上;
    查看全部
  • 我的笔记12
    查看全部
  • 日范德萨范德萨
    查看全部
    1 采集 收起 来源:课程介绍

    2017-05-04

首页上一页1234567下一页尾页

举报

0/150
提交
取消
课程须知
1、基本的HTML,CSS和JS语法 2、JQuery的常用API
老师告诉你能学到什么?
1、如何写菜单结构 2、如何写菜单样式 3、如何实现菜单交互 4、如何优化菜单交互 5、如何实现无延迟切换

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!