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

前端之家收集整理的这篇文章主要介绍了jQuery实现鼠标经过购物车出现下拉框代码(推荐)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

 

 购物车html:

  刚开始学习原生js时候的写法:

BoxNode = 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来写的:

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来替换):

Box").on({ mouseenter:function(){ },mouseleave:function(){ } });

以上所述是小编给大家介绍的jQuery实现鼠标经过购物车出现下拉框 。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/jquery/47164.html

猜你在找的jQuery相关文章