鼠标滑过事件是什么(鼠标滑倒事件)

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

购物车html:

 1 <!-- 购物车 start --> 2 <div class=\"shopping\"  id=\"shopping-box\"> 3         <a href=\"\" id=\"shoptext\"><i class=\"iconfont\"></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 });

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

(0)
声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,请发送邮件至 FB8260@QQ.COM 举报,一经查实,立刻删除。