当前位置：首页 > 网页特效 > 其他

Material Design风格卡片切换UI设计

分类：其他日期：2024-05-14 点击(0) 评论(0)

简介

##### HTML结构
该Material Design风格卡片UI设计的HTML结构如下，每一张卡片可以使用slide-color来指定相应页面的背景颜色。

```html
<div class="card">
  <div class="slides">
    <div slide-id="1" slide-color="#D18B49" class="slide active">
      <div class="thumbnail"><img src="1.jpg"/></div>
      <h1 class="title">Slide 1</h1>
      <p class="description">Slide 1 Content</p>
    </div>
    <div slide-id="2" slide-color="#542F13" class="slide">
      <div class="thumbnail"><img src="2.jpg"/></div>
      <h1 class="title">Slide 2</h1>
      <p class="description">Slide 2 Content</p>
    </div>
    <div slide-id="3" slide-color="#A5AAAE" class="slide">
      <div class="thumbnail"><img src="3.jpg"/></div>
      <h1 class="title">Slide 3</h1>
      <p class="description">Slide 3 Content</p>
    </div>
  </div>
  <div class="footer">
    <a id="prev" href="#" ripple="" ripple-color="#666666" class="btn">Prev</a>
    <a id="next" href="#" ripple="" ripple-color="#666666" class="btn">Next</a>
  </div>
</div> 
```               
#####  CSS样式
卡片的主要CSS样式如下：

```html
.card {
  background: #FFFFFF;
  max-width: 400px;
  margin: 100px auto;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
  box-sizing: border-box;
  padding: 48px;
  text-align: center;
}
 
.slides {
  position: relative;
  overflow: hidden;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
 
.slide {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
 
.slide.active {
  opacity: 1;
  visibility: visible;
}
 
.thumbnail { margin: 0 0 48px; }
 
.title {
  margin: 0 0 12px;
  color: #D18B49;
  font-size: 24px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}
 
.description { margin: 0 0 48px; }
 
.footer {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
  margin: 0 -12px -12px;
}
```
#####  JavaScript
该Material Design风格卡片UI设计使用jQuery来处理卡片切换事件。其中calcslideHeight()函数用于计算当前激活的卡片的高度，animateContentColor()函数用于修改当前图片的父容器页面的背景色。然后为前后导航按钮绑定鼠标点击事件，为相应的元素切换相应的class类。

```html
var getslideHeight = $('.slide.active').height();
 
$('.slides').css({
  height: getslideHeight
});
 
function calcslideHeight() {
  getslideHeight = $('.slide.active').height();
 
  $('.slides').css({
    height: getslideHeight
  });
}
 
function animateContentColor() {
  var getslideColor = $('.slide.active').attr('slide-color');
 
  $('body').css({
    background: getslideColor
  });
 
  $('.title').css({
    color: getslideColor
  });
 
  $('.btn').css({
    color: getslideColor
  });
}
 
var slideItem = $('.slide'),
  slideCurrentItem = slideItem.filter('.active');
 
$('#next').on('click', function(e) {
  e.preventDefault();
 
  var nextItem = slideCurrentItem.next();
 
  slideCurrentItem.removeClass('active');
 
  if (nextItem.length) {
 
    slideCurrentItem = nextItem.addClass('active');
  } else {
    slideCurrentItem = slideItem.first().addClass('active');
  }
 
  calcslideHeight();
  animateContentColor();
});
 
$('#prev').on('click', function(e) {
  e.preventDefault();
 
  var prevItem = slideCurrentItem.prev();
 
  slideCurrentItem.removeClass('active');
 
  if (prevItem.length) {
    slideCurrentItem = prevItem.addClass('active');
  } else {
    slideCurrentItem = slideItem.last().addClass('active');
  }
 
  calcslideHeight();
  animateContentColor();
});  
```              
点击导航按钮时的按钮点击波效果的JavaScript代码如下：

```html
$('[ripple]').on('click', function(e) {
  var rippleDiv = $('<div class="ripple" />'),
    rippleSize = 60,
    rippleOffset = $(this).offset(),
    rippleY = e.pageY - rippleOffset.top,
    rippleX = e.pageX - rippleOffset.left,
    ripple = $('.ripple');
 
  rippleDiv.css({
    top: rippleY - (rippleSize / 2),
    left: rippleX - (rippleSize / 2),
    background: $(this).attr("ripple-color")
  }).appendTo($(this));
 
  window.setTimeout(function() {
    rippleDiv.remove();
  }, 1900);
});
```

web299.com

Material Design风格卡片切换UI设计

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果