CSS3+jq creates a cool list of travel pictures and texts, and the mouse moves over the picture to zoom in and out to display text content details with animation special effects. This is a method written in js to call dynamic data graphic and text lists.
html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="Neat">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" user-scalable="no">
// 引入样式
<link rel="stylesheet" href="./css/style.css">
// 引入jq库
<script src="./js/jquery.min.js"></script>
// 引入js文件
<script src="./js/style.js"></script>
</head>
<body>
<section class="main-group"></section>
</body>
<script type="text/javascript">
new Action([
{
url:'#', title_bg:'rgba(162, 193, 182, 0.9)', img: './imgs/1.jpeg', title: '海南旅游', desc: '海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游'},
{
url:'#', title_bg:'rgba(23, 144, 140, 0.9)', img: './imgs/2.jpeg', title: '海南旅游', desc: '海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游'},
{
url:'#', title_bg:'rgba(30 82, 144, 0.9)', img: './imgs/3.jpeg', title: '海南旅游', desc: '海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游'},
{
url:'#', title_bg:'rgba(88, 90, 160, 0.9)', img: './imgs/4.jpeg', title: '海南旅游', desc: '海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游海南旅游'}
]);
</script>
</html>
css code
body{
min-height: 100hv;
background: #050822;
line-height:20px;
}
*{
margin:0;
padding:0;
font-size: 12px;
}
ul{
list-style:none;
}
.hide{
display: none;
}
.lf{
float: left;
}
.lr{
float: right;
}
.red, .red a,.red a h5, .red a p{
color:#FF0000 !important;
}
a {
text-decoration: none;
color: inherit;
}
.mr2 {
margin-right: 1rem;
}
.ml2 {
margin-left: 1rem;
}
.main-group{
position: relative;
width:100vw;
align-items: center;
justify-content: center;
display: flex;
flex-wrap: wrap;
min-height: 100vh;
}
.main-group .item-group{
width:260px;
padding:10px 10px;
box-sizing: border-box;
position: relative;
}
.main-group .img-group{
position: relative;
}
.main-group .img-group img{
width:100%;
clip-path:circle(100% at 50% 150px);
transition: all .4s;
}
.main-group .img-group .page-one-title{
z-index: 1;
width:120px;
height: 120px;
display: flex;
background: rgba(255, 255, 255, 0.6);
justify-content: center;
align-items: center;
position: absolute;
border-radius: 50%;
left:calc(50% - 60px);
top:calc(50% - 60px);
color: #fff;
font-size: 18px;
font-weight: bold;
opacity: 1;
transition: 0.4s;
}
.item-group .content{
position: absolute;
z-index:1;
left:0;
top:140px;
color: #fff;
padding:0 40px;
box-sizing: border-box;
text-align: center;
opacity: 0;
transition: 0.4s;
}
.item-group .content .title{
font-size: 18px;
font-weight: bold;
}
.item-group .content .desc{
font-size:12px;
margin-top:26px;
line-height: 20px;
}
.item-group .content .button-group{
margin-top:20px;
display: inline-block;
padding:3px 16px;
background: #0c6bad;
border-radius: 4px;
}
js code
class Action{
constructor(parameter) {
this.data = parameter;
this._main_group = $('.main-group');
this._add_html();
this._add_event();
}
_add_html(){
let html ='';
for(let i=0; i<this.data.length; i++){
let this_data = this.data[i];
html += '<div class="item-group">';
html +=' <div class="img-group">';
html +=' <div class="page-one-title" style="background:'+this_data.title_bg+';">'+this_data.title+'</div>';
html +=' <img src="'+this_data.img+'" alt="">';
html +=' </div>';
html +=' <div class="content">';
html +='<div class="title">'+this_data.title+'</div>';
html +='<div class="desc">'+this_data.desc+'</div>';
html +='<a href="'+this_data.url+'" class="button-group">';
html +=' 点击进入';
html +='</a>';
html +='</div>';
html +='</div>';
}
this._main_group.html(html);
}
_add_event(){
$('.item-group').hover(function(){
$(this).find('.img-group img').css('clip-path', 'circle(20% at 50% 80px)');
$(this).find('.content').css({
'opacity':1, 'top': '170px'});
$(this).find('.page-one-title').css({
'opacity':0})
},function(){
$(this).find('.img-group img').css('clip-path', 'circle(100% at 50% 80px)');
$(this).find('.content').css({
'opacity':0, 'top': '180px'});
$(this).find('.page-one-title').css({
'opacity':1})
});
}
}