纯javascript制作T恤花纹图案预览特效源码.zip资源-CSDN文库

共15个文件

png：5个

css：3个

jpg：2个

版权申诉

css3

前端代码

175 浏览量 2022-11-09 22:11:37 上传评论收藏 954KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

纯javascript制作T恤花纹图案预览特效源码.zip （15个子文件）

132687021636687640

javascript_Txue

css

htmleaf-demo.css 6KB

style.css 1018B

normalize.css 2KB

2.jpg 29KB

1.jpg 16KB

img

42aee29746d4f068a5d188e693dbf90c.png 57KB

262f38a877b5fecca80ebd2b499c7696.png 28KB

f5f049ce3a23ccedec87f6636aeaafc5.png 767KB

d8562fb6a11f60b1853e988723d047b6.png 33KB

f2b85c73ac1ab1e46189ee918b19bef8.png 27KB

fonts

icomoon.woff 1KB

icomoon.svg 2KB

icomoon.eot 2KB

icomoon.ttf 1KB

index.html 3KB

<!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" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css"> <link rel="stylesheet" href="css/style.css">  </head> <body> <div class="htmleaf-container"> <header class="htmleaf-header"> <h1>纯js实用T恤衫花纹图案预览特效 <span>T-Shirt Creator</span></h1> <div class="htmleaf-links"> <a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.jb51.net/" title="脚本之家" target="_blank"><span> 脚本之家</span></a> <a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.jb51.net/" title="返回下载页" target="_blank"><span> 返回下载页</span></a> </div> </header> <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="https://anonimag.es/i/f5f049ce3a23ccedec87f6636aeaafc5.png">  </div> </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>

评论收藏

内容反馈

版权申诉