我們都知道影片的功能，今天介紹幾個簡單的影片的操作
一、影片——顯示跟隱藏
首先先寫一個簡單的頁面
<button id="showbox">顯示</button>
<button id="hidebox">隱藏</button>
<button id="showhidebox">顯示或隱藏</button>
<div id="box"></div>
三個按鈕，點擊改變div的狀態，簡單給div設定個寬高跟背景色，方便我們觀看效果
思路：
隱藏hide() 顯示show() 顯示或隱藏 toggle()
引數：
影片時間(“slow”,“normal”, “fast”) / 毫秒 ,
切換效果 默認是"swing"，可用引數"linear" ,
影片執行完成的回呼函式
原理：影片原理width 、height、opacity、
margin、 padding 、 overflow:hidden ;
效果：display=“none” / display=""
下面是JQ代碼
//隱藏
$("#hidebox").click(function(){
$("#box").hide(2000,function(){
console.log("--隱藏 影片完成---")
});
})
//顯示
$("#showbox").click(function(){
$("#box").show(2000,function(){
console.log("--顯示 影片完成---")
});
})
//顯示或隱藏
$("#showhidebox").click(function(){
$("#box").toggle(2000,function(){
console.log("-- 影片完成---")
});
})
二、影片——滑入跟滑出
首先也是先寫一個簡單的頁面
<button id="one">滑入</button>
<button id="two">滑出</button>
<button id="three">滑入或滑出</button>
<div id="box"></div>
三個按鈕，點擊改變div的狀態，簡單給div設定個寬高跟背景色，方便我們觀看效果
思路：
滑入slideDown() 滑出slideUp() 滑入或滑出slideToggle()
影片程序原理： height 、 margin-top, margin-bottom 、padding-top、 padding-bottom
效果：display:none / diplay:""
下面是JQ代碼
$("#two").click(function(){
$("#box").slideUp(10000);
})
$("#one").click(function(){
$("#box").slideDown(10000);
})
$("#three").click(function(){
$("#box").slideToggle();
})
三、影片——淡入跟淡出
首先也是先寫一個簡單的頁面
<<button id="one">淡入</button>
<button id="two">淡出</button>
<button id="three">淡入或淡出</button>
<button id="four">到透明度0.5</button>
<div id="box"></div>
四個按鈕，點擊改變div的狀態，簡單給div設定個寬高跟背景色，方便我們觀看效果
思路：
淡入 fadeIn() 淡出 fadeOut() 淡入或淡出 fadeToggle() 到指定的透明度fadeTo()
影片程序原理： opacity
效果：display:none / diplay:""
下面是JQ代碼
$("#two").click(function(){
$("#box").fadeOut(3000) //透明度 0
})
$("#one").click(function(){
$("#box").fadeIn(3000)// //透明度 1
})
$("#three").click(function(){
$("#box").fadeToggle(3000)//
})
$("#four").click(function(){
$("#box").fadeTo(2000,0.5)//
})
當然 既然是用jQuery做的效果，在頁面別忘了參考jQuery外部檔案~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/249916.html
標籤：其他