1、页面引入jQuery文件和bootstrap文件；
2、贴上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap.css" rel="stylesheet">
<title>wawa</title>
</head>
<style>
*{
margin: 0px;
}
.tbDiv{
height: 10em;
background-color: rgba(120,120,120,0.5);
}
.dropImg{
14px;
height: 4em;
overflow: hidden;
/*overflow: visible;*/
}
.dropImg img{
100%;
}
.wbDiv{
height: 10em;
background-color: #31b0d5;
text-align: center;
}
</style>
<body>
<div class="container-fluid tbDiv">
</div>
<!--<div class="container-fluid">中</div>-->
<marquee direction="right" behavior="alternate" scrollamount="5" id="marqueeId" onmouseover="this.stop()" onmouseout="this.start()">
<div class="dropImg" id="dropImgId">
<img src="images/dropdown.png">
</div>
</marquee>
<div class="container-fluid wbDiv navbar-fixed-bottom">
<a class="btn btn-lg btn-warning" id="catchWawa">抓</a>
</div>
<script src="js/jquery-2.1.4.min.js"></script>
<script>
var cHeight=$(window).height();
var isDown=false;
$('#catchWawa').click(function(){
if(!isDown){
document.getElementById("marqueeId").onmouseover();
slowheight(1);
document.getElementById("preId").innerHTML="恭喜你！抓到了";
document.getElementById("catchWawa").innerHTML="收货";
isDown=true;
}
else{
document.getElementById("marqueeId").onmouseout();
$('#dropImgId').css('height','4em');
document.getElementById("catchWawa").innerHTML="下手";
isDown=false;
}
});
function slowheight(m) {
$('#dropImgId').css('height',cHeight*m/100);
m++;
metest= setTimeout(function() {
if(m==76){
$('#catchWawa').css('display','block');
clearTimeout();
}else{
$('#catchWawa').css('display','none');
slowheight(m);
}
},10);
}
</script>
<pre id="preId">
1、设置属性
$(selector).attr('属性名','属性值')
2、获取当前浏览器可是区域宽度：
var cWidth=$(window).width();
</pre>
</body>
</html>