您的位置：首页 > 其它

图片预览效果

2017-07-03 15:39 253 查看

最近公司要求做一个控台的项目，其中一个页面需要做到类似图片预览的效果，比如，点击移到某张缩略图，上方可以看到相应的大图片，刚开始想着这个不太好实现，但最终还是做出了效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div.up{
width:350px;
height:300px;
background:#ddd;
overflow:hidden;
}
div.up img{width:100%;height:100%;}
#down img{
width:60px;
height:100px;
opacity:0.3;
filter:alpha(opacity=30);
}
#down img.change_image{opacity:1;filter:alpha(opacity=100);}
div.down{
width:350px;
height:100px;
}
</style>
</head>
<body>
<div class="up" id="up"><img src="img/login_logo.png" width="100%" height="100%"></div>
<div class="down" id="down">
<table>
<tr>
<td><img src="img/1454662321172.jpg"></td>
<td><img src="img/95y58PICJYj_1024.jpg" /></td>
<td><img src="img/1454662394985.jpg" /></td>
<td><img src="img/97C58PIC2fk.jpg" /></td>
<td><img src="img/14-15102610342N93.jpg" /></td>
</tr>
</table>
</div>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#up img').attr('src',$('#down img').eq(0).attr('src'));//打开即把第一张图地址给#up img
$('#down img').eq(0).addClass("change_image");//打开即把第一个缩略图选中
$('#down img').hover(function(){
$('#down img').removeClass("change_image");//先清除所有选中
$(this).addClass("change_image");//当前图片选中
$('#up img').attr('src',$(this).attr('src'));//当前图片地址给#up img
});
});
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 图片预览缩略图

相关文章推荐

新的分享

章节导航