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

时间:2021-05-26

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

  购物车html:

<!-- 购物车 start --><div class="shopping" id="shopping-box"><a href="" id="shoptext"><i class="iconfont">&#xe605;</i> 购物车(0)</a><!-- 购物车下拉框 start--><div class="shop" id="shop-content">购物车中还没有商品,赶紧选购吧!</div><!-- 购物车下拉框 end--></div><!-- 购物车 end -->

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

//购物车下拉框 startvar 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实现鼠标经过购物车出现下拉框 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章