快捷導(dǎo)航

jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過購(gòu)物車出現(xiàn)下拉框代碼(推薦)

更新時(shí)間：2016年07月21日 13:40:01 作者：開發(fā)中的石頭

在做web前端項(xiàng)目開發(fā)的時(shí)候，使用jquery庫(kù)的感觸頗多，下面小編通過寫購(gòu)物車的下拉框做法，把我的想法給大家分享一下，感興趣的朋友可以參考下

這一段時(shí)間在學(xué)習(xí)web前端，最近學(xué)了jQuery庫(kù),深感其強(qiáng)大，下面通過寫購(gòu)物車的下拉框做法，把自己的理解和大家交流一下，歡迎各位大神指點(diǎn)指正，廢話不多說，開始正題：

　　購(gòu)物車html:

<!-- 購(gòu)物車 start -->
<div class="shopping" id="shopping-box">
<a href="" id="shoptext"><i class="iconfont">&#xe605;</i> 購(gòu)物車（0）</a>
<!-- 購(gòu)物車下拉框 start-->
<div class="shop" id="shop-content">
購(gòu)物車中還沒有商品，趕緊選購(gòu)吧！
</div>
<!-- 購(gòu)物車下拉框 end-->
</div>
<!-- 購(gòu)物車 end -->

　　剛開始學(xué)習(xí)原生js時(shí)候的寫法：

//購(gòu)物車下拉框 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");
};
//購(gòu)物車下拉框 end

　　感覺很麻煩，而且還不好理解，下面用jQuery來寫的：

//購(gòu)物車 下拉
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();
});

　　這個(gè)看著就干凈利落的多，相對(duì)的減少了代碼量，這里面事件使用應(yīng)用鏈的寫法，而且jQuery的方法的兼容問題基本上在其內(nèi)被都已經(jīng)被解決了，這點(diǎn)真是讓前端的工作量減少了很多，用原生的時(shí)候調(diào)兼容調(diào)的頭都快炸了（大家都懂的。。。），里面用到了jQuery中的延時(shí)delay和停止動(dòng)畫stop來處理（很好用的兩個(gè)函數(shù)），當(dāng)鼠標(biāo)移動(dòng)過快出現(xiàn)的問題

　　這里面事件的寫法當(dāng)然也可以用下面的方法（on也可以用bind來替換）：

//購(gòu)物車 下拉
var interval1;
$("#shopping-box").on({
mouseenter:function(){
},
mouseleave:function(){ 
}
});

以上所述是小編給大家介紹的jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過購(gòu)物車出現(xiàn)下拉框，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: