PHP異常處理:set_error_handler()函數的用法
732
2023-12-14
這一段時間在學習web前端,最近學了jQuery庫,深感其強大,下面通過寫購物車的下拉框做法,把自己的理解和大家交流一下,歡迎各位大神指點指正,廢話不多說,開始正題:
購物車html:
< 購物車 start --> <div class="shopping" id="shopping-box"> <a id="shoptext"><i class="iconfont"></i> 購物車(0)</a> < 購物車下拉框 start--> <div class="shop" 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實現鼠標經過購物車出現下拉框 ,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對綠夏網網站的支持!
#免責聲明#
本站[綠夏技術導航]提供的一切軟件、教程和內容信息僅限用于學習和研究目的;不得將上述內容用于商業或者非法用途,否則,一切后果請用戶自負。本站信息來自網絡收集整理,版權爭議與本站無關。您必須在下載后的24個小時之內,從您的電腦或手機中徹底刪除上述內容。如果您喜歡該程序或內容,請支持正版,購買注冊,得到更好的正版服務。我們非常重視版權問題,如有侵權請郵件[admin@lxwl520.com]與我們聯系進行刪除處理。敬請諒解!