自适应的响应式引导页代码页面效果图Html代码：ox"id="imgBox">Welcome
tomypage>GotoHomeJS调用代码：
Jquery效果函数：/bg_heightBeginlzx2015-10-12/functi
onbgH(){var$wind=$(window);//申明窗口var$do=$("#gpBox");//申明元素
var$do1=$("#imgBox");//申明元素var$do2=$("#button");//申明元素/
/varwinH=$wind.height
()//首先获取浏览器的高度$do.hide()$do.css("height",winH+"px")//赋予当前高度/
/varimgH=$do1.heigh
t()//元素高度//距离顶部的高度vartheH=(winH-imgH)/2-100;$do1.css("t
op",theH+"px")//赋高度位置if(theH<=30){//如果高度小于等于30则赋值为30$do1.css(
"top","30px");}//
varwinW=$wind.width()//首先获取浏览器的宽度varimgW=$do1.width()//元素宽度
//距离左侧的宽度vartheW=(winW-imgW)/2;$do1.css("left",theW+"px
")//赋宽度位置////按钮到
顶部的高度vartheBtnH=theH+210;$do2.css("top",theBtnH+"px")/
///按钮到左侧的距离btnW=$do2.w
idth()//按钮的宽度//按钮距离左侧的宽度theBtnW=(winW-btnW)/2$do2.css("left"
,theBtnW+"px")$wind.resize(function(winHn,theHn){//浏览器变化高度的动作。var
winHn=$wind.height();//窗口新高度$do.height(Math.abs(winHn));//将新窗口
的高度赋予元素varimgHn=$do1.height()//元素新高度//距离顶部的新高度vartheHn=(w
inHn-imgHn)/2-100;$do1.css("top",theHn+"px");if(theHn<=30)
{//如果高度小于等于30则赋值为30$do1.css("top","30px");}/
/vartheBtnHn=theHn+210;$do2.css("top",
theBtnHn+"px")if(theBtnHn<=200){//如果高度小于等于200则赋值为200$do2.css("to
p","200px");}////浏览器变化宽度
的动作。varwinWn=$wind.width();//窗口新高度varimgWn=$do1.width()//元素
新宽度varbtnWn=$do2.width()//元素新宽度//图片距离左侧的新宽度vartheWn=(winWn
-imgWn)/2;$do1.css("left",theWn+"px");/
///按钮距离左侧的新宽度vartheBtnWn=(winWn-btnWn)/2;$do2.css
("left",theBtnWn+"px");if(theBtnHn<=200){//如果高度小于等于200则赋值为200$
do2.css("top","200px");}})$do.fadeIn(500)}/bg_heightEnd//
buttonBeginlzx2015-10-12//actGroupBeginlzx2015-10-1
2/functionactGroup_1(){vardo1=$("#imgBox");//申明元素vardo2=$
("#imgBoximg");//申明元素vardo3=$("#imgBoxspan");//申明元素vardo4=
$("#button");//申明元素//图形隐藏与显示do1.hide();setTimeout(function(){d
o1.show(500)do2.hide().show(1000)do3.animate({"margin-left":0},10
00)},100);//延迟100毫秒do4.hide();//按钮隐藏setTimeout(function(){do4.
fadeIn(500)},1000);//延迟100毫秒}Css代码：@charset"utf-8";/globalSty
leBegin/{margin:0;padding:0;text-decoration:none;border:0;li
st-style:none}/globalStyleEnd//backgroundbegin/body{bac
kground-color:#000;}.gpBox{width:100%;min-width:700px;min-height:
450px;background:url(../images/A_bgBlue.png)no-repeatcenterbo
ttom#4fa4ff;position:relative;z-index:0;}/backgroundEnd//
elementBegin//nameImg/.imgBox{width:694px;height:160px;pos
ition:absolute;z-index:1;}/welcome/.imgBoxspan{display:block
;width:auto;height:42px;font-family:arial;font-size:36px;color:#F
FFFFF;margin-left:800px;overflow:hidden;}/button/.gpBoxa{dis
play:block;width:260px;height:60px;line-height:60px;text-align:center;background-color:#FBCA00;position:absolute;z-index:1;font-family:arial;font-size:20px;color:#FFFFFF;}.gpBoxa:hover{background-color:#FFE500;}/elementEnd/ |
|
