网页仿手机右侧推出推入div块

最新推荐文章于 2022-03-03 00:43:10 发布

MjayTang

最新推荐文章于 2022-03-03 00:43:10 发布

阅读量574

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/TLD_DLT/article/details/50478157

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

目的：优化原界面N多model的情况，改为右侧push出div块，姿势要求华丽炫目夺眼球

代码块样式：

<div id="push" style="background-color:#ff;display:none;
Position:absolute;z-index:1000;">
这是将要从右侧推出的华丽炫目夺眼球的代码块

</div>

加载时初始化

f_init(){
//获取浏览器的高度和宽度
Var winheight = jQuery(window).height();
Var winwidth = jQuery(window).width();
//设置高度
jQuery("#push").css('height',winheight+"px");
//设置宽度设为浏览器的40%
jQuery("#push").css("width",winwidth*0.4+"px");
}

推出推入方法

//pushout方法
function f_closepush(){

	var winwidth = jQuery(window).width();
	jQuery("#push").css('width',winwidth*0.4+"px");
	jQuery("#push").hide().animate({right:"-"+winwidth*0.4+"px"});
}
//pushin方法
function f_openpush(){
	var winwidth = jQuery(window).width();
	jQuery("#push").css('right',"-"+winwidth*0.4+"px");
	jQuery("#push").show().animate({right:"0px"});
}