鼠标移至下拉条出现html,jQuery实现鼠标经过购物车出现下拉框代码(推荐)

这一段时间在学习web前端，最近学了jQuery库,深感其强大，下面通过写购物车的下拉框做法，把自己的理解和大家交流一下，欢迎各位大神指点指正，废话不多说，开始正题：

购物车html:

 购物车(0)

购物车中还没有商品，赶紧选购吧！

刚开始学习原生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实现鼠标经过购物车出现下拉框 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！