效果图：
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动画效果</title>
<style>
.a{
width: 30px;
height: 30px;
display: inline-block;
background: #0d6f5b;
border-radius: 0;
opacity: .8;
color: #fff;
line-height: 30px;
text-align: center;
}
</style>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
function aa(){
if(window.event.x>600&&window.event.x<630&&window.event.y>150&window.event.y<180)
{
$("#div01").empty();
$("#div01").attr("style","background-color:#39C3A9;width:300px;height:550px;float:left");
$("#div01").append("<span class='a' style='margin-right: 3px;'>1</span>");
$("#div01").append("<span class='a' style='margin-right: 3px;'>2</span>");
$("#div01").append("<span class='a' style='margin-right: 3px;'>3</span>");
$("#div01").append("<span class='a' style='margin-right: 3px;'>4</span>");
$("#div01").append("<h2 style='padding-left: 12px;padding-top: 25px;padding-bottom: 30px;color: white;padding-right: 12px;'>选择汇智学堂学习的九大理由</h2>");
$("#div01").append("<p style='padding-left: 12px;padding-right: 12px;color: white;font-size: 12px;'>选择汇智学堂学习的九大理由</p>");
$("#div01").append("<p style='font-size: 12px;padding-left: 12px;padding-right:12px;padding-bottom:70px;line-height: 20px;color: white;'>理由一：拥有电脑端、手机端、微信端三大系统，操作便捷，移动学习。会员无需下载，便捷约课。数据互联，三位一体。</p>");
$("#div01").append("<a href='#' style='padding-left: 12px;margin-top: 70px;color: black;text-decoration:none'>查看详情>></a>");
}
if(window.event.x>630&&window.event.x<660&&window.event.y>150&window.event.y<180)
{
//$("#div01").attr("style","background-color: blue;width:300px;height:550px;float:left");
$("#div01").empty();
$("#div01").attr("style","background-color:#7C5A4B;width:300px;height:550px;float:left");
$("#div01").append("<span class='a' style='margin-right: 3px;'>1</span>");
$("#div01").append("<span class='a' style='margin-right: 3px;'>2</span>");
$("#div01").append("<span class='a' style='margin-right: 3px;'>3</span>");
$("#div01").append("<span class='a' style='margin-right: 3px;'>4</span>");
$("#div01").append("<p style='padding-left: 12px;padding-right: 12px;color: white;font-size: 12px;'>理由二、项目贯穿</p>");
$("#div01").append("<p style='font-size: 12px;padding-left: 12px;padding-right:12px;padding-bottom:20px;line-height: 20px;color: white;'>学习编程远离枯燥的理论，零起点上手，进入编程环境中。</p>");
$("#div01").append("<p style='padding-left: 12px;padding-right: 12px;color: white;font-size: 12px;'>理由三、项目涵盖行业广泛</p>");
$("#div01").append("<p style='font-size: 12px;padding-left: 12px;padding-right:12px;padding-bottom:20px;line-height: 20px;color: white;'> 训练项目库涵盖金融、新零售、养老、教育、医疗等领域。</p>");
$("#div01").append("<p style='padding-left: 12px;padding-right: 12px;color: white;font-size: 12px;'>理由四、技术设计面宽</p>");
$("#div01").append("<p style='font-size: 12px;padding-left: 12px;padding-right:12px;padding-bottom:70px;line-height: 20px;color: white;'>12个技术方向，涵盖主流的开发技术。从web开发、大数据分析到人工智能。从软件开发到硬件结合，全面覆盖。</p>");
$("#div01").append("<a href='#' style='padding-left: 12px;margin-top: 70px;color: black;text-decoration:none'>查看详情>></a>");
}
if(window.event.x>660&&window.event.x<690&&window.event.y>150&window.event.y<180)
{
$("#div01").attr("style","background-color: green;width:300px;height:550px;float:left");
}
if(window.event.x>690&&window.event.x<720&&window.event.y>150&window.event.y<180)
{
$("#div01").attr("style","background-color: yellow;width:300px;height:550px;float:left");
}
}
</script>
</head>
<body onmousedown="aa()">
<div style="padding-left: 600px;padding-top:150px;">
<div id="div01" style="width:300px;height:550px; background-color:#B4A479;float:left;">
<span class="a">1</span>
<span class="a">2</span>
<span class="a">3</span>
<span class="a">4</span>
<h2 style='padding-left: 12px;padding-bottom: 30px;color: white;padding-right: 12px;'>选择汇智学堂学习的九大理由</h2>
<p style='padding-left: 12px;padding-right: 12px;color: white;font-size: 12px;'>选择汇智学堂学习的九大理由</p>
<p style='font-size: 12px;padding-left: 12px;padding-right:12px;padding-bottom:70px;line-height: 20px;color: white;'>理由一：拥有电脑端、手机端、微信端三大系统，操作便捷，移动学习。会员无需下载，便捷约课。数据互联，三位一体。</p>
<a href='#' style='padding-left: 12px;margin-top: 70px;color: black;text-decoration:none'>查看详情>></a>
</div>
<div >
<img style="width:300px;height:550px;" src="imgs/1.jpg" />
</div>
</div>
</body>
</html>
