web前端干货分享：jquery实现夹娃娃效果

今天老师为大家分享一款由jquery实现的夹娃娃效果，如图所示：

这个比较简单，需要使用的代码也很简单：下面放出html代码图：

接下来放出css代码
#wrapper {
width: 750px;
height: 1109px;
margin: 0 auto;
background-image: url(‘img/bg.png’);
position: relative;
z-index: 1;
}

#rod {
position: relative;
top: 235px;
left: -20px;
width: 16px;
height: 3px;
margin: 0 auto;
background-image: url(images/rod.png);
background-repeat: repeat-y;
}

#hand {
/*
width: 124px;
height: 83px;
*/
width: 150px;
height: 83px;
position: relative;
top: 235px;
left: -20px;
background-position: 158px 0px;
background-image: url(images/hand.png);
margin: 0 auto;
}

#babys {
height: 200px;
width: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
top: -550px;
left: -20px;
}

#uptoy {
width: 200px;
height: 200px;
margin: 0 auto;
position: relative;
z-index: 3;
top: -750px;
left: -20px;
display: none;
}

#start_btn {
width: 123px;
height: 115px;
background-image: url(‘img/start.png’);
b 4000 ackground-position: -40px -20px;
position: absolute;
top: 790px;
left: 1050px;
z-index: 4;
border: none;
outline: none;
cursor: pointer;
}

最后放出js代码:

这期的干货分享就到这里了，我们下期见。