你的位置:首页 > Java教程

[Java教程]jQuery 购物车鼠标经过出现下拉框的做法

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

  购物车html:

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

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

 1 //购物车下拉框 start 2 var shoppingBoxNode = document.getElementById("shopping-box"); 3 var shopContentNode = document.getElementById("shop-content"); 4 var shoptext = document.getElementById("shoptext"); 5 shoppingBoxNode.onmouseenter = function(){ 6   shoptext.style.background = "#fff"; 7   shoptext.style.color = "#ff6700"; 8   shopContentNode.style.display = "block"; 9   console.log("over");10 };11 shoppingBoxNode.onmouseleave = function(){12   shoptext.style.background = "";13   shoptext.style.color = "";14   shopContentNode.style.display = "";15   console.log("out");16 };17 //购物车下拉框 end

  感觉很麻烦,而且还不好理解,下面用jQuery来写的:

 1 //购物车 下拉 2 var interval1; 3 $("#shopping-box").mouseenter(function(){ 4   clearTimeout(interval1); 5   $(this).children().first().css({"color":"#ff6700","background":"#fff"}); 6   $(this).children().last().stop(true,true).slideDown(); 7 }).mouseleave(function(){ 8   var self = $(this); 9   interval1 = setTimeout(function(){10     self.children().first().removeAttr("style");11   },700);12   $(this).children().last().delay(200).slideUp();13 });

 

  这个看着就干净利落的多,相对的减少了代码量,这里面事件使用应用链的写法,而且jQuery的方法的兼容问题基本上在其内被都已经被解决了,这点真是让前端的工作量减少了很多,用原生的时候调兼容调的头都快炸了(大家都懂的。。。),里面用到了jQuery中的延时delay和停止动画stop来处理(很好用的两个函数),当鼠标移动过快出现的问题

  这里面事件的写法当然也可以用下面的方法(on也可以用bind来替换):

 1 //购物车 下拉 2 var interval1; 3 $("#shopping-box").on({ 4   mouseenter:function(){
5 }, 6 mouseleave:function(){
7 } 8 });

  第一次写博客,还正在学习前端,写的比较乱,也有点也没有突出重点,望大家见谅,也欢迎大家批评指正,共同进步!

  over~