基于CSS3混合模式的jquery轮播图特效

基于CSS3混合模式的jquery轮播图特效

这是一款基于CSS3混合模式的jquery轮播图特效。该特效使用CSS3 的mix-blend-mode来制作混合图片特效,制作出非常炫酷的多图层动画效果。

IE和Edge系列浏览器不支持mix-blend-mode属性,请使用-webkit-内涵的浏览器来查看效果。

使用方法
在页面中引入style.css文件。

1
<link rel="stylesheet" type="text/css" href="css/style.css" />

HTML结构
在页面中添加下面的DOM元素。

1
2
3
4
5
6
7
8
9
10
<div class="changer">
  <div class="sub">Playing with</div>
  <h1>Color Blend Modes</h1>
  <div class="demos">
    <a data-go="1">cloudsuit</a>
    <a data-go="2">urbansky</a>
    <a data-go="3">knowledge</a>
  </div>
</div>
<div id="container"></div>

初始化插件
在页面DOM元素加载完毕之后,通过下面的方法来初始化该基于CSS3混合模式的jquery轮播图特效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
var demos = [];
var cloudsuit = {
  one: {
    bg: "images/ZnkfwAR.jpg",
    bm: "none" },
 
  two: {
    bg: "images/ONBXKkS.jpg",
    bm: "lighten" },
 
  three: {
    bg: "images/qKNpn9G.png",
    bm: "multiply" } };
 
 
demos.push(cloudsuit);
 
 
var urbansky = {
  one: {
    bg: "images/l1MS7kk.jpg",
    bm: "none" },
 
  two: {
    bg: "images/6QBLNy6.jpg",
    bm: "multiply" },
 
  three: {
    bg: "images/bmnzJRs.png",
    bm: "none" } };
 
 
demos.push(urbansky);
 
 
var knowledge = {
  one: {
    bg: "images/YpTSfYD.jpg",
    bm: "none" },
 
  two: {
    bg: "images/ziAdjNM.jpg",
    bm: "multiply" },
 
  three: {
    bg: "images/dnfONso.png",
    bm: "none" } };
 
 
demos.push(knowledge);
 
 
var container = document.getElementById("container");
var active;
var applyDemo = function (number) {
  console.log(number);
  var go = demos[number - 1];
 
  container.innerHTML = "";
 
 
 
  var f1 = document.createElement("div");
  f1.setAttribute("id", "f1");
  var style = "background-image: url(" + go.one.bg + "); mix-blend-mode: " + go.one.bm + ";";
  f1.setAttribute("style", style);
  container.appendChild(f1);
 
 
  var f2 = document.createElement("div");
  f2.setAttribute("id", "f2");
  var style = "background-image: url(" + go.two.bg + "); mix-blend-mode: " + go.two.bm + ";";
  f2.setAttribute("style", style);
  container.appendChild(f2);
 
  var f3 = document.createElement("div");
  f3.setAttribute("id", "f3");
  var style = "background-image: url(" + go.three.bg + "); mix-blend-mode: " + go.three.bm + ";";
  f3.setAttribute("style", style);
  container.appendChild(f3);
  active = number;
 
  document.body.setAttribute("data-demo", number);
};
applyDemo(1);
 
 
$('.demos').on('click', 'a', function (event) {
  event.preventDefault();
  var t = this;
 
  if (active == t.getAttribute("data-go")) return;
 
  $(container).fadeOut({
    duration: 1000,
    complete: function () {
      applyDemo(t.getAttribute("data-go"));
      $(container).fadeIn(1000);
    } });
 
});
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论