<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<style type="text/css">
.nav{
border-bottom: 1px solid gainsboro;
}
ol{
list-style: none;
display: inline-block;
float: right;
}
ol li{
float: left;
margin-right: 20px;
color: black;
font-weight: bolder;
}
table tr{
text-align: center;
}
ol li:hover{
color: orange;
}
img{
transition: transform 3s;
}
img:hover{
transform: rotate(360deg);
}
p{
transition: transform 1s;
}
p:hover{
transform: scale(2,2);
}
</style>
</head>
<body>
<div class="nav">
<img src="img/图片1_看图王.png"/>
<ol>
<li onmousemove="showpic(0)">MiPhonse</li>
<li onmousemove="showpic(1)">Redmi Phones</li>
<li onmousemove="showpic(2)">Mi TV</li>
<li onmousemove="showpic(3)">Smart Devices</li>
<li onmousemove="showpic(4)">Audio</li>
<li onmousemove="showpic(5)">Mi Power Bank</li>
</ol>
</div>
<div class="content">
<table>
<tr>
<td><img src="img/图片11_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片11_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片11_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片11_看图王.png"/><p>Mi Box</p></td>
</tr>
<tr>
<td><img src="img/图片21_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片21_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片21_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片21_看图王.png"/><p>Mi Box</p></td>
</tr>
<tr>
<td><img src="img/图片31_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片31_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片31_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片31_看图王.png"/><p>Mi Box</p></td>
</tr>
<tr>
<td><img src="img/图片41_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片41_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片41_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片41_看图王.png"/><p>Mi Box</p></td>
</tr>
<tr>
<td><img src="img/pms_1478700937.82131562.jpg"/><p>Mi Box</p></td>
<td><img src="img/pms_1478700937.82131562.jpg"/><p>Mi Box</p></td>
<td><img src="img/pms_1478700937.82131562.jpg"/><p>Mi Box</p></td>
<td><img src="img/pms_1478700937.82131562.jpg"/><p>Mi Box</p></td>
</tr>
</table>
</div>
<script type="text/javascript">
function showpic(trIndex){
var trs=$("table tr");
for (var i = 0; i < trs.length; i++) {
if (i==trIndex) {
$(trs[i]).show();
}else{
$(trs[i]).hide();
}
}
}
$(function(){
showpic(0);
});
</script>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular-route.js" ></script>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<style type="text/css">
.nav{
border-bottom: 1px solid gainsboro;
}
ol{
list-style: none;
display: inline-block;
float: right;
}
ol li{
float: left;
margin-right: 20px;
color: black;
font-weight: bolder;
}
table tr{
text-align: center;
}
ol li:hover{
color: orange;
}
img{
transition: transform 3s;
}
img:hover{
transform: rotate(360deg);
}
p{
transition: transform 1s;
}
p:hover{
transform: scale(2,2);
}
</style>
</head>
<body>
<div class="nav">
<img src="img/图片1_看图王.png"/>
<ol>
<li onmousemove="showpic(0)">MiPhonse</li>
<li onmousemove="showpic(1)">Redmi Phones</li>
<li onmousemove="showpic(2)">Mi TV</li>
<li onmousemove="showpic(3)">Smart Devices</li>
<li onmousemove="showpic(4)">Audio</li>
<li onmousemove="showpic(5)">Mi Power Bank</li>
</ol>
</div>
<div class="content">
<table>
<tr>
<td><img src="img/图片11_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片11_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片11_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片11_看图王.png"/><p>Mi Box</p></td>
</tr>
<tr>
<td><img src="img/图片21_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片21_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片21_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片21_看图王.png"/><p>Mi Box</p></td>
</tr>
<tr>
<td><img src="img/图片31_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片31_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片31_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片31_看图王.png"/><p>Mi Box</p></td>
</tr>
<tr>
<td><img src="img/图片41_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片41_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片41_看图王.png"/><p>Mi Box</p></td>
<td><img src="img/图片41_看图王.png"/><p>Mi Box</p></td>
</tr>
<tr>
<td><img src="img/pms_1478700937.82131562.jpg"/><p>Mi Box</p></td>
<td><img src="img/pms_1478700937.82131562.jpg"/><p>Mi Box</p></td>
<td><img src="img/pms_1478700937.82131562.jpg"/><p>Mi Box</p></td>
<td><img src="img/pms_1478700937.82131562.jpg"/><p>Mi Box</p></td>
</tr>
</table>
</div>
<script type="text/javascript">
function showpic(trIndex){
var trs=$("table tr");
for (var i = 0; i < trs.length; i++) {
if (i==trIndex) {
$(trs[i]).show();
}else{
$(trs[i]).hide();
}
}
}
$(function(){
showpic(0);
});
</script>
</body>
</html>