纯js实用T恤衫花纹图案预览特效

纯js 兼容ie8 图片预览 2016-10-09

控件介绍
这是一款使用纯javascript制作的T恤衫花纹图案预览特效。该特效可以应用在购物场景中,用户可以更换自己喜欢的T恤衫花纹图案,找到合适的花纹后可以将定制的T恤衫放入购物车。
浏览器兼容

支持IE8+

演示下载 839
使用方法

使用方法

HTML结构

该T恤衫花纹图案预览特效的HTML结构非常简单:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="container">
  <div id="left">
    <div class="prints">
      <h2>选择一种花纹图案</h2>
      <img id="heartone" class="design" src="img/1.png">
      <img id="hearttwo" class="design" src="img/2.png">
      <img id="twig" class="design" src="img/3.png">
      <img id="bird" class="design" src="img/4.png">
    </div>
    <button>添加到购物车</button>
  </div>
  <div id="right">
    <span id="showprint"></span>
    <img class="shirt" src="img/5.png">
  </div>
</div>        
CSS样式

为界面添加下面的基本CSS样式:

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
.container {
  width: 1000px;
  height: 500px;
  margin: 60px auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}
 
#right {
  float: right;
  width: 40%;
  height: 100%;
  position: relative;
}
 
.design {
  height: 70px;
  width: 190px;
  padding: 10px;
  margin: 6px 6px;
  border-radius: 1px;
  border: 1px solid #e0e0e0;
  background-color: #eeeeee;
  cursor: pointer;
}
 
#left {
  float: left;
  width: 60%;
  text-align: center;
}
 
.prints {
  padding: 40px;
  margin: 10px;
}
 
.shirt {
  height: 100%;
}
 
h2 {
  text-align: center;
  color: #212121;
  text-transform: uppercase;
  font-size: 1.5rem;
  padding: 10px;
}
 
button {
  background-color: #cddc39;
  border: 0px;
  padding: 8px;
  font-size: 1rem;
  cursor: pointer;
}
 
#showprint img {
  width: 140px;
  position: absolute;
  top: 150px;
  right: 180px;
}
 
.design:hover {
  background-color: white;
}
 
button:active {
  background-color: #dce775;
}
初始化插件

在页面底部使用下面的方法来相应图案花纹的点击事件。

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
var heartOne = document.getElementById('heartone');
var heartTwo = document.getElementById('hearttwo');
var twig = document.getElementById('twig');
var bird = document.getElementById('bird');
var rightSide = document.getElementById('right');
var img = document.createElement("img");
var src = document.getElementById("showprint");
 
heartOne.onclick = function(){
  img.src = "img/1.png";
  src.appendChild(img);
}
 
heartTwo.onclick = function(){
  img.src = "img/2.png";
  src.appendChild(img);
}
 
twig.onclick = function(){
  img.src = "img/3.png";
  src.appendChild(img);
}
 
bird.onclick = function(){
  img.src = "img/4.png";
  src.appendChild(img);
}

本文转载请注明出处:http://www.zhuiye.com/detail_775.html
评论区
  • 还没有评论,快来抢沙发吧!