html/css移動介面側滑效果
阿新 • • 發佈:2019-01-29
$(document).ready(function(){
//側滑按鈕點選事件
$(".mybtn").click(function(){
//頁面整體側滑
$(".page").animate({
left:'300px'
});
//顯示透明度div層
$(".backimg" ).css({
"display":"block"
});
//左側導航右滑
$(".right-dh").animate({
left:'0px'
});
});
http://127.0.0.1:8020/linH/img/untitled.png
//還原點選事件
$(".backimg").click(function(){
//頁面整體左滑動
$(".page").animate({
left:'0px'
});
//顯示透明度div層隱藏
$(".backimg").css({
"display":"none"
});
//左側導航右滑
$(".right-dh").animate({
left:'-300px'
});
});
//欄目選擇事件
$(".dh-btn a").click(function(){
//頁面整體左滑動
$(".page").animate({
left:'0px'
});
//顯示透明度div層隱藏
$(".backimg").css({
"display":"none"
});
//左側導航右滑
$(".right-dh").animate({
left:'-300px'
});
});
});