这一段时间在学习web前端，最近学了jQuery库,深感其强大，下面通过写购物车的下拉框做法，把自己的理解和大家交流一下，欢迎各位大神指点指正，废话不多说，开始正题：
购物车html:
<!-- 购物车 start --> <div class="shopping" id="shopping-box"> <a href="" id="shoptext"><i class="iconfont"></i> 购物车（0）</a> <!-- 购物车下拉框 start--> <div class="shop" id="shop-content"> 购物车中还没有商品，赶紧选购吧！ </div> <!-- 购物车下拉框 end--> </div> <!-- 购物车 end -->
刚开始学习原生js时候的写法：
//购物车下拉框 start
var shoppingBoxNode = document.getElementById("shopping-box");
var shopContentNode = document.getElementById("shop-content");
var shoptext = document.getElementById("shoptext");
shoppingBoxNode.onmouseenter = function(){
shoptext.style.background = "#fff";
shoptext.style.color = "#ff6700";
shopContentNode.style.display = "block";
console.log("over");
};
shoppingBoxNode.onmouseleave = function(){
shoptext.style.background = "";
shoptext.style.color = "";
shopContentNode.style.display = "";
console.log("out");
};
//购物车下拉框 end
感觉很麻烦，而且还不好理解，下面用jQuery来写的：
//购物车 下拉
var interval1;
$("#shopping-box").mouseenter(function(){
clearTimeout(interval1);
$(this).children().first().css({"color":"#ff6700","background":"#fff"});
$(this).children().last().stop(true,true).slideDown();
}).mouseleave(function(){
var self = $(this);
interval1 = setTimeout(function(){
self.children().first().removeAttr("style");
},700);
$(this).children().last().delay(200).slideUp();
});
这个看着就干净利落的多，相对的减少了代码量，这里面事件使用应用链的写法，而且jQuery的方法的兼容问题基本上在其内被都已经被解决了，这点真是让前端的工作量减少了很多，用原生的时候调兼容调的头都快炸了（大家都懂的。。。），里面用到了jQuery中的延时delay和停止动画stop来处理（很好用的两个函数），当鼠标移动过快出现的问题
这里面事件的写法当然也可以用下面的方法（on也可以用bind来替换）：
//购物车 下拉
var interval1;
$("#shopping-box").on({
mouseenter:function(){
},
mouseleave:function(){
}
});
以上所述是小编给大家介绍的jQuery实现鼠标经过购物车出现下拉框 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对北冥有鱼网站的支持！
您可能感兴趣的文章:
- jquery实现图片列表鼠标移入微动
- jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
- jQuery实现鼠标选中文字后弹出提示窗口效果【附demo源码】
- 使用jQuery或者原生js实现鼠标滚动加载页面新数据
- jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
- jquery实现鼠标悬浮停止轮播特效
- jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
- jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
- jQuery实现鼠标经过时出现隐藏层文字链接的方法
- JQuery获取鼠标进入和离开容器的方向
