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

来源：互联网发布：淘宝扁带运动编辑：程序博客网时间：2024/05/01 19:13

目的：优化原界面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"});}

0 0