纯css3 实现的焦点图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>six</title>
<script type="text/javascript" src="https://qunarzz.com/jquery/prd/jquery-1.7.2.js"></script>
<style>
body{
margin:0;
padding:0;
}
table{border-collapse:collapse;}
th{background:#000;color:#fff;}
tbody> tr{color:#000;line-height:22px;}
tbody> tr > td,tr > th{border-right:2px solid #fff;}
tbody> tr:nth-child(even){background:#ccc;}
tbody> tr:nth-child(odd){background:#eee;}
/*tbody> tr:nth-child(1),tbody> tr:nth-child(2),tbody> tr:nth-child(3){color:red;}*/
/*input{width:100px;}*/
.text{width:100px;transition: width .8s;}
.text:focus{width:250px;}
.labels > a:link,
.labels > a:hover,
.labels > a:visited {
color: #ccc;
text-decoration: none;
}
.slides {
position: relative;
width: 350px;
height: 140px;
overflow: hidden;
background-color: #ccc;
}
.slide-wrap {
position: relative;
width: 300%;
height: 100%;
transition: left .8s ease;
}
.slide {
float: left;
width: 33.3%;
height: 100%;
}
.slide:first-child {
background-color: red;
}
.slide:nth-child(2) {
background-color: blue;
}
.slide:nth-child(3) {
background-color: green;
}
#slide1:target ~ .slide-wrap {
left: 0;
}
#slide2:target ~ .slide-wrap {
left: -100%;
}
#slide3:target ~ .slide-wrap {
left: -200%;
}
.labels {
position: absolute;
right: 0;
bottom: 0;
}
.labels > a {
display: block;
width: 30px;
height: 30px;
float: left;
line-height: 30px;
text-align: center;
background-color: rgba(0, 0, 0, .2);
border: 1px solid transparent;
}
</style>
</head>
<body>
<table width="300px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>网站</th>
<th>热度</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>2</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>3</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>4</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>5</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>6</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>7</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>8</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>9</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
<tr>
<td>10</td>
<td>百度前端技术学院</td>
<td>13000</td>
</tr>
</tbody>
</table>
<br/>
<br/>
<input type="text" name="user" class="text">
<br/><br/><br/>
<script>
$(function(){
$("tbody > tr:lt(3)").css("color","red");
// $('input[name="user"]').focus(function(){
// $(this).animate({width:"300px"},"swing");
// }).blur(function(){
// $(this).animate({width:"100px"},"swing");
// })
})
</script>
<br/><br/>
<div class="slides">
<span id="slide1" hidden></span>
<span id="slide2" hidden></span>
<span id="slide3" hidden></span>
<div class="slide-wrap">
<div class="slide"></div>
<div class="slide"></div>
<div class="slide"></div>
</div>
<div class="labels">
<a href="#slide1">1</a>
<a href="#slide2">2</a>
<a href="#slide3">3</a>
</div>
</div>
</body>
</html>
