js 滑窗

最新推荐文章于 2024-10-20 19:34:21 发布

原创最新推荐文章于 2024-10-20 19:34:21 发布 · 393 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

js 专栏收录该内容

15 篇文章

订阅专栏

<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做了一下午