| 标题 | jQuery实现鼠标经过购物车出现下拉框代码(推荐) |
| 内容 | 这一段时间在学习web前端，最近学了jQuery库,深感其强大，下面通过写购物车的下拉框做法，把自己的理解和大家交流一下，欢迎各位大神指点指正，废话不多说，开始正题： 购物车html: <!-- 购物车 start --> <div id="shopping-box"> <a href="" id="shoptext"><i></i> 购物车（0）</a> <!-- 购物车下拉框 start--> <div id="shop-content"> 购物车中还没有商品，赶紧选购吧！ </div> <!-- 购物车下拉框 end--> </div> <!-- 购物车 end --> 刚开始学习原生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实现鼠标经过购物车出现下拉框 ，希望对大家有所帮助 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。