20170506 在线服装的演示


请适当缩放下网页…默认100%应该没问题

实例:电脑点击http://10o.me/learn/20170506/

主要实现了网格背景,用div生成canvas

缺点:本来想做响应式的,并没有完成,排版就比不做响应式更差了

源代码

<!DOCTYPE html>
<head>
<title>服装搭配</title>
</head>
<style>
*{margin:0;padding:0;color:white}
img{vertical-align:bottom; display:block;height:140px;height:140px;}
.design-cloth img{
width: 250px;
height:250px ;
}
body{
font-size: 40px;
font-weight: bolder;
background:#58a;
background-image: linear-gradient(white 2px,transparent 0),linear-gradient(90deg,white 2px,transparent 0),
linear-gradient(hsla(0,0%,100%, .3) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%, .3) 1px,transparent 0) ;
background-size: 75px 75px,75px 75px,
15px 15px,15px 15px ;
}
div{
box-sizing: border-box;
text-align: center;
background: hsla(0,0%,100%, .5);
border-radius: 10px;
}
.design-cloth{
float: left;
margin: 100px  0 0 0%;
width: 750px;
height: 750px;
background-image:url(img/001.jpg) ;
border-radius: 0;
}
buttom{
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px #58a solid;
text-align: center;
line-height: 80px;
margin-top: 20px;
background: hsla(0,0%,100%, .5);
}
.design-sleeve{
width: 250px;
height: 500px;
background: blue;
}
.design-sleeve-right{
float:right;
}
.design-sleeve-left{
float:left;
}
.design-neck{
width: 250px;
height: 250px;
margin-left: 249px;
background: green;
}
.design-sidebar{
float: right;width: 150px;height: 800px;margin: 50px 2% 0 0;font-size:30px;
}
.design-sidebar2{
float: left;width: 150px;height: 800px;margin: 50px 2% 0 2.5%;font-size:30px;
}
canvas{
margin: -700px -700px 0px ;
}
.head{
position: absolute;width: 20%;font-size: 40px;border: none;margin: 20px 40%;
}
</style>
<body>
<div class=“head”>服装搭配</div>
<div style=color:black;display:none;class=“head head2”>已生成 请右键 ->图片另存为</div>

<buttom style=float: left;margin: 400px 0 0 60px;class=“a1”>←</buttom>

<div class=“design-sidebar2 b1” >
袖子
<img src=“img/001_04.gif” style=margin:15px 4px 0; class=“e1”>
<img src=“img/001_07.gif” style=margin:0px 4px ; class=“e1”>
<img src=“img/002_04.gif” style=margin:30px 4px 0; class=“e2”>
<img src=“img/002_07.gif” style=margin:0px 4px ; class=“e2”>
</div>
<div class=“design-sidebar2 b2” style=display:none” >
袖子
<img src=“img/003_04.gif” style=margin:15px 4px 0; class=“e3”>
<img src=“img/003_07.gif” style=margin:0px 4px ; class=“e3”>
</div>
<buttom style=float: left;margin: 400px 6% 0 0;class=“a2”>→</buttom>
<div class=“design-cloth”>
<!–衣领–>
<div class=“design-neck design-neck” style=background-image: url(img/002_02.gif”>
<img src=“img/002_02.gif” class=“d1”>
</div>
<!–左边的袖子–>
<div class=“design-sleeve design-sleeve-left”>
<img src=“img/003_04.gif” style=background-image: url(img/003_04.gif)class=“f1”>
<img src=“img/003_07.gif” style=background-image: url(img/003_07.gif)class=“f2”>
</div>
<!–右边的袖子–>
<div class=“design-sleeve design-sleeve-right”>
<img src=“img/003_06.gif” style=background-image: url(img/003_06.gif)class=“f3”>
<img src=“img/003_09.gif” style=background-image: url(img/003_09.gif)class=“f4”>
</div>
</div>
<buttom style=float: left;margin: 400px 0 0 60px;>←</buttom>
<buttom style=float: right;margin: 400px 7% 0 0;>→</buttom>
<div class=“design-sidebar” >
衣领
<img src=“img/001_02.gif” style=margin:15px 4px ;class=“c1”>
<img src=“img/002_02.gif” style=margin:15px 4px ; class=“c2”>
<img src=“img/003_02.gif” style=margin:15px 4px ; class=“c3”>
</div>

<div style=clear:both;border:none;></div>
<buttom style=float:left;margin-left:30%class=“j2”>

</buttom>
<buttom style=float:left;margin-left: 590px” class=“j1”>

</buttom>
<buttom style=float:right;margin-right: 14.5%;font-size: 15px;class=“l1”>
生成载图片
</buttom>
</body>
<script type=“text/javascript” src=“js/jquery-1.8.3.min.js”></script>
<script type=“text/javascript” src=“js/html2canvas.js”></script>
<script>
//    袖子翻页
$(“.a1”).click(function(){
$(“.b2”).hide();
$(“.b1”).show();
});
$(“.a2”).click(function(){
$(“.b1”).hide();
$(“.b2”).show();
});
//袖子更换
$(“.e1”).click(function() {
$(“.f1”)[0].src= $(“.e1”)[0].src;
$(“.f2”)[0].src=“img/001_07.gif”;
$(“.f3”)[0].src= “img/001_06.gif”;
$(“.f4”)[0].src=“img/001_09.gif”;
$(‘.f1’).css(‘background’,‘url(img/001_04.gif)’);
$(‘.f2’).css(‘background’,‘url(img/001_07.gif)’);
$(‘.f3’).css(‘background’,‘url(img/001_06.gif)’);
$(‘.f4’).css(‘background’,‘url(img/001_09.gif)’);

});
$(“.e2”).click(function() {
$(“.f1”)[0].src= $(“.e2”)[0].src;
$(“.f2”)[0].src=“img/002_07.gif”;
$(“.f3”)[0].src= “img/002_06.gif”;
$(“.f4”)[0].src=“img/002_09.gif”;
$(‘.f1’).css(‘background’,‘url(img/002_04.gif)’);
$(‘.f2’).css(‘background’,‘url(img/002_07.gif)’);
$(‘.f3’).css(‘background’,‘url(img/002_06.gif)’);
$(‘.f4’).css(‘background’,‘url(img/002_09.gif)’);
});
$(“.e3”).click(function() {
$(“.f1”)[0].src= $(“.e3”)[0].src;
$(“.f2”)[0].src=“img/003_07.gif”;
$(“.f3”)[0].src= “img/003_06.gif”;
$(“.f4”)[0].src=“img/003_09.gif”;
$(‘.f1’).css(‘background’,‘url(img/002_04.gif)’);
$(‘.f2’).css(‘background’,‘url(img/002_07.gif)’);
$(‘.f3’).css(‘background’,‘url(img/002_06.gif)’);
$(‘.f4’).css(‘background’,‘url(img/002_09.gif)’);
});

//衣领更换
$(“.c1”).click(function() {
$(“.d1”)[0].src= $(“.c1”)[0].src;
$(‘.d1’).css(‘background’,‘url(img/001_02.gif)’);
});
$(“.c2”).click(function() {
$(“.d1”)[0].src= $(“.c2”)[0].src;
$(‘.d1’).css(‘background’,‘url(img/002_02.gif)’);
});
$(“.c3”).click(function() {
$(“.d1”)[0].src= $(“.c3”)[0].src;
$(‘.d1’).css(‘background’,‘url(img/003_02.gif)’);
});

//整个图片更换
$(“.j1”).click(function() {
$(‘.design-cloth’).css(‘background’,‘url(img/002.jpg)’);
});
$(“.j2”).click(function() {
$(‘.design-cloth’).css(‘background’,‘url(img/001.jpg)’);

});
$(“.l1”).click(function() {
html2canvas($(“.design-cloth”),{
onrendered: function(canvas){
document.body.appendChild(canvas);
$(“.head”).hide();
$(“.head2”).show();
}
})
});
</script>

 

发表评论

电子邮件地址不会被公开。