濟南建網站知識,網站建設技術靈魂總結
Website news, Technical summary of soul
在濟南網站建設的制作中,在處理一些網站中的動態效果的時候,往往要用到jquery的特效,有時候單單的引用一個juqery文件,是不能滿足我們的需求的。這時候要引用多個jquery文件,由于版本的不同,不同的jquery也能夠實現不同的效果。在引用多個jquery時,會發現,部分效果失效,或者只能出現一種效果,另一種效果不起作用,或者說別的JS也沒有的效果,這往往是由于jquery在多個版本之間發生沖突的原因所致,解決辦法如下。
錯誤效果截圖:
正確效果截圖:
正確代碼截圖:
從上面三張圖中,我們可以看到,當在代碼中引入了兩個juqery時,發生了沖突的現象,導航欄中的下拉不顯示,并且輪播圖片也不進行切換了。我們可以通過重新定義jquery變量的方法,來解決多個juqery發生沖突的錯誤,此方法也同樣適用于juqery與其他JS,發生沖突的錯誤。
具體代碼書寫:
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
var j = jQuery.noConflict(); //重定義jquery.min.js這個JS
</script>
<script src="js/jquery.min2.js"></script>
以上是引用的兩個jquery的JS,在中間加入了一個變量J,這個J是用來重新定義JQUERY的,也就是說,在使用jquery.min.js這個JS的時候,我們可以把所有的$都換成J的符號,在使用jquery.min2.js這個JS的時候,還是照樣使用$這個符號。
具體使用方法:
①、使用jquery.min.js的JS寫法:
<script type="text/javascript">
j(function(){
j("ul.sf-menu,ul.sf-navbar").superfish();
j("ul.sf-vertical").superfish({
animation:{opacity:'show',height:'show'},
speed:'fast'
});
});
</script>
注意:以上都是用的"j"進行的JS使用。
①、使用jquery.min2.js的JS寫法:
<script type="text/javascript">
$(function() {
$('.flexslider').flexslider({
animation: "slide"
});
});
</script>
注意:以上都是用的"$"進行的JS使用。
通過以上的方法,我們就完美解決了在同一個頁面中,使用多個jquery發生沖突,頁面特效失效的問題。
在進行濟南網站建設的過程中,我們建議大家盡量少的使用的JS的特效,如果一個頁面中的JS特效太多的話,會在一定程度上影響網站的打開速度,當然JS多的網頁用戶體驗可能會相對的多一些,這時候我們就盡量的保證JS的引用盡量少一些,能用一個JS實現的效果,就用一個JS去實現,不要為了一個小小的JS效果去加載一個體積很龐大的JS代碼庫。
公司地址:山東省濟南市東關大街中泰大廈 Copyright?2006-2020 www.wh-haojing.com. 濟南網站設計我們值得信賴. All rights reserved .
7x24小時服務熱線:15069066861 網站建設博客