挖一挖最近做的项目中，好像还有点值得去记录的地方，今天就说说我这里侧滑是如何实现的吧。
我用的框架是destoon，这里边封装的手机端用的是jquery-mobile，这个框架就是简单暴力，项目中想实现一些比较酷炫的效果，所以加了一个侧滑。说道侧滑其实就是让一个页面向左滑动，空出位置展示另外一个页面，或者俩个页面同时向左滑动，还有一种就是比较炫酷的，类似于之前腾讯QQ做的那个侧滑，带有一定的角度，给用户更好的视觉体验。
这里就以比较简单的侧滑来举列子了。
侧滑菜单的CSS：
<style type="text/css">
#menu {
background-color: #FFFFFF;
height: 100%;
width: 303px;
position: fixed;
right: -303px;
top: 0rem;
}
.active {
color: #fff;
/*text-shadow: 0 1px 1px #000;*/
}
@media (orientation: landscape) {
#menu {
background-color: #FFFFFF;
height: 100%;
width: 200px;
position: fixed;
right: -303px;
top: 0rem;
}
}
@media only screen and (min-width: 750px) {
#menu {
background-color: #FFFFFF;
height: 100%;
width: 200px;
position: fixed;
right: 50%;
margin-right: -321px;
top: 0rem;
}
}
</style>
侧滑菜单的HTML：
<div data-role="page" class="page" id="home">
<!--主页模板-->
<div class="ui-toast"></div>
<div class="ui-mask"></div>
<!--<div class="ui-sheet"></div>-->
<div id="head-bar">
<div class="head-bar">
<div class="head-logo">
</div>
<div class="head-location">
</div>
<div class="head-bar-right">
</div>
</div>
<div class="head-bar-fix"></div>
</div>
<div class="main">
<div class="index-head">
</div>
<div class="index-recommend index-section">
<div class="index-recommend-banner">
<div class="swiper-container">
<div class="swiper-wrapper">
</div>
</div>
</div>
</div>
<div class="index-hot index-section">
<div class="index-hot-title">
</div>
<div class="index-hot-list question-list">
</div>
<p class="index-hot-loadmore loadmore">
</p>
</div>
</div>
<!--main end-->
<div class="footer-bar">
<div class="footer-bar-menu">
</div>
</div>
<!--主页模板结束-->
</div>
<!-- /page -->
<div class="ui-sheet"></div>
<!--page end-->
<div id="menu" class="menu" style="z-index: 0;">
<div class="header">
<div class="lawyer-name">
</div>
</div>
<div class="center-menu">
</div>
</div>
js:
//完成菜单切换
$(document).bind("mobileinit", function() {
$.mobile.pushStateEnabled = true;
});
$(function() {
var menuStatus;
function menuShow() {
if(menuStatus) {
return;
}
$('.ui-mask').fadeIn();
$('.center-menu ul li').show();
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if ($(window).width() > 750) {
$('#menu').animate({
'right': '50%',
'margin-right':'-321px'
}, 300);
$.mobile.activePage.animate({
//添加向左滑动时候显示的动画
marginLeft: "-200px",
}, 300, function() {
menuStatus = true
});
}else{
//如果是竖屏
if( width < height ){
$('#menu').animate({
'right': '0px'
}, 300);
$.mobile.activePage.animate({
//添加向左滑动时候显示的动画
marginLeft: "-303px",
}, 300, function() {
menuStatus = true
});
}
//如果是横屏
else{
$('#menu').animate({
'right': '0px'
}, 300);
$.mobile.activePage.animate({
//添加向左滑动时候显示的动画
marginLeft: "-200px",
}, 300, function() {
menuStatus = true
});
}
}
};
function menuHide() {
if(!menuStatus) {
return;
}
$('.ui-mask').fadeOut();
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
if ($(window).width() > 750) {
$('#menu').animate({
'right': '50%',
'margin-right':'-321px'
}, 300);
$.mobile.activePage.animate({
//添加隐藏动画
marginLeft: "0px",
}, 300, function() {
menuStatus = false
// $('#menu').hide();
});
}else{
//如果是竖屏
if( width < height ){
$('#menu').animate({
'right': '-303px'
}, 300);
$.mobile.activePage.animate({
//添加隐藏动画
marginLeft: "0px",
}, 300, function() {
menuStatus = false
// $('#menu').hide();
});
}
//如果是横屏
else{
$('#menu').animate({
'right': '-200px'
}, 300);
$.mobile.activePage.animate({
//添加隐藏动画
marginLeft: "0px",
}, 300, function() {
menuStatus = false
// $('#menu').hide();
});
}
}
};
function menuToggle() {
if(!menuStatus) {
menuShow();
} else {
menuHide();
}
return false;
};
// Show/hide the menu
$("a.showMenu").click(function(){
// menuToggle();
menuShow();
});
$('.m_close').on('click',function(event){
event.preventDefault();
menuHide();
})
// $('.ui-mask').on('click',function(event){
// event.preventDefault();
//// alert('111');
// menuHide();
// });
$('div[data-role="page"]').on('pagebeforeshow', function(event, ui) {
event.preventDefault();
menuStatus = false;
$(".page").css("margin-left", "0");
});
// Menu behaviour
$("#menu li a").click(function() {
var p = $(this).parent();
p.siblings().removeClass('active');
p.addClass('active');
});
});
网友评论