JQuer效果
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
開發工具與關鍵技術：JQuer和MVC開發工具
作者：鄭健鵬
撰寫時間：2019年4月7日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
今天我們來學習使用JQuery插件和一個輔助插件layer插件來實作一些影片和更換瀏覽器默認彈出的提示框
這個網頁使用了JQuer插件的影片部分和layer插件的提示框和MVC來實作點擊按鈕顯示和隱藏一些已經定義的影片，框架里面定義了一些影片，只要匯入JQuer的插件和呼叫影片即可，匯入layer插件后需要呼叫里面的提示框插件才能使用layer的提示框，以下是這個網頁所使用的的影片函式呼叫方法和介紹：
1、“show”這個影片函式是縮小和滑動顯示內容
$("#show").click(function () {
$("#Effect").show(1000, function () {
layer.alert('顯示執行完畢')
});
});
2、“hide”這個影片函式是縮小和滑動隱藏內容
$("#show").click(function () {
$("#Effect").hide (1000, function () {
layer.alert('隱藏執行完畢')
});
});
3、“toggle” 這個影片函式是顯示和隱藏切換
$("#toggle").click(function () {
$("#Effect").toggle(1000);
});
4、“slideDown”這個影片函式是滑動顯示內容
$("#show").click(function () {
$("#Effect").slideDown();
});
5、“slideUp”這個影片函式是滑動隱藏內容
$("#show").click(function () {
$("#Effect").slideUp();
});
6、“slideToggle” 這個影片函式是滑動切換
$("#slideToggle").click(function () {
$("#Effect").slideToggle();
});
7、“fadeIn”這個影片函式是淡入顯示內容
$("#show").click(function () {
$("#Effect"). fadeIn (1000, function () {
});
});
8、“fadeOut”這個影片函式是淡出隱藏內容
$("#show").click(function () {
$("#Effect"). fadeOut (1000)
});
9、“fadeToggle” 這個影片函式是淡入淡出切換
$("#fadeToggle").click(function () {
$("#Effect").fadeToggle(1000);
});
7、“fadeTo”這個影片函式是調整透明度
$("#fadeTo").click(function () {
$("#Effect").fadeTo(1000, 0.2, function () {
layer.alert('透明度執行完畢')
});
});
呼叫JQuery的影片函式可以方便制作網頁的效果，可以大大的提高作業的效率，如果使用原生的JS來實作這些影片會復雜很多
下面是完成的頁面和代碼的部分：
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/51512.html
標籤：非技術類
上一篇：求助在一張235*1480cm的布上剪裁出30個長方形，盡可能少浪費布；（大的長方形可以由小的長方形組合而成（A+B=C））30個長方形如圖：