js 滑窗

来源：互联网发布：安卓app获取数据接口编辑：程序博客网时间：2024/06/06 04:01

<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-1.12.2.min.js"></script>
<script src="js/a_js.js"></script>
</head>
<style>
*{margin:0;padding:0px;}
body{background:black;}
a{
width:58px;
text-align:center;
text-decoration:none;
font:bold 10px/16px Arial, Helvetica, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", メイリオ, Meiryo, sans-serif;
color: #333;
}
.a div
{
position:absolute;
text-align:center;
padding:1px;
background:white;
width:58px;
right:-1px;
top:-1px;
transition:right 2s;
display:inline-block;
}
.a div:nth-child(1){z-index:4;}
.a div:nth-child(2){z-index:3;}
.a div:nth-child(3){z-index:2;}
.a div:nth-child(4){z-index:1;}
.a:hover div:nth-child(1){
right:240px;
}
.a:hover div:nth-child(2){
right:160px;
}
.a:hover div:nth-child(3){
right:80px;
}
.a{
position:absolute;
right:25px;
top:25px;
border:1px solid #000;
width:325px;
height:76px;
}
img{width:58px;}
strong{line-height:16px;height:16px;text-align:center;}
</style>
<body>
<div class="a">
<div><a href="#"><img src="D:\development\Apache2.2\htdocs\gis-fm\ef\fm\images\view1.png"><strong>航空写真</strong></a></div>
<div><a href="#"><img src="D:\development\Apache2.2\htdocs\gis-fm\ef\fm\images\view2.png"><strong>航空写真</strong></a></div>
<div><a href="#"><img src="D:\development\Apache2.2\htdocs\gis-fm\ef\fm\images\view3.png"><strong>航空写真</strong></a></div>
<div><a href="#"><img src="D:\development\Apache2.2\htdocs\gis-fm\ef\fm\images\view4.png"><strong>航空写真</strong></a></div>
</div>
</body>

</html>

做的项目的一部分，因为没有系统的学过jq做了一下午

0 0