js定制T恤衫花纹图案预览特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js定制T恤衫花纹图案预览特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图1:

部分效果截图2:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js定制T恤衫花纹图案预览特效</title>
<link rel="stylesheet" href="css/style.css">

</head>
<body>
	<div class="container">
	  <div id="left">
		<div class="prints">
		  <h2>选择一种花纹图案</h2>
		  <img id="heartone" class="design" src="img/f2b85c73ac1ab1e46189ee918b19bef8.png">
		  <img id="hearttwo" class="design" src="img/d8562fb6a11f60b1853e988723d047b6.png">
		  <img id="twig" class="design" src="img/42aee29746d4f068a5d188e693dbf90c.png">
		  <img id="bird" class="design" src="img/262f38a877b5fecca80ebd2b499c7696.png">
		</div>
		<button>添加到购物车</button>
	  </div>
	  <div id="right">
		<span id="showprint"></span>
		<img class="shirt" src="img/f5f049ce3a23ccedec87f6636aeaafc5.png">
		<!-- <img class="shirt" src="img/f5f049ce3a23ccedec87f6636aeaafc5.png"> -->
	  </div>
	</div>

<script type="text/javascript">
	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/f2b85c73ac1ab1e46189ee918b19bef8.png";
	  src.appendChild(img);
	}

	heartTwo.onclick = function(){
	  img.src = "img/d8562fb6a11f60b1853e988723d047b6.png";
	  src.appendChild(img);
	}

	twig.onclick = function(){
	  img.src = "img/42aee29746d4f068a5d188e693dbf90c.png";
	  src.appendChild(img);
	}

	bird.onclick = function(){
	  img.src = "img/262f38a877b5fecca80ebd2b499c7696.png";
	  src.appendChild(img);
	}
</script>
</body>
</html>

CSS代码(style.css):

body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif;}
.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;/* font-family:'Open Sans';*/
}
.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;/* font-family:'Open Sans';*/
 cursor:pointer;}
#showprint img{width:140px;position:absolute;top:150px;right:180px;}
.design:hover{background-color:white;}
button:active{background-color:#dce775;}

附件:下载该文件资源,减少时间成本(增值服务)