鉴于大家可以直接打开运行见效果,我把组件放入页面中,去除一些需要编译的,比如router-link,实际使用,大家可以自行替换,另外鉴于视觉中国的黑洞事件,模拟的图片,大家自己本地放图吧。
需要注意几个点,resize事件只能用一次,建议大家在app中使用,可以vuex共享数据。
如果问题,请指教,另觉得最后一行处理的不是很好,希望有更好的方案指教!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.4.2/lib/theme-chalk/index.css">
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui@2.4.2/lib/index.js"></script>
<style>
.clearfix:before,
.clearfix:after {
content: "";
display: block;
clear: both;
}
.clearfix {
zoom: 1;
}
.row {
margin-top: 20px;
}
a {
text-align: center;
}
.img-box {
margin-left: 20px;
position: relative;
border-radius: 8px;
overflow: hidden;
float: left;
}
.img-box>img {
display: block;
transition: all 0.5s;
border-radius: 8px;
}
.img-box:hover {
transform: scale(1.08);
}
.img-box:hover>img {
transform: scale(1.08);
}
/*