大家估计都用手机玩过 化妆整人的程序

也就是对照片加工处理 添加饰物 然后生成一张图片 可以搞笑娱乐大家

?

?

?

本文主要采用的技术有

1.jquery的拖拽 drag& drop技术

2.PHP转换Json data

3.CSS3 +ＨＴＭＬ５

?

首先我们建立一个大体的框架

<div id="content">
    <div id="background" class="background">
        <img id="obj_0" width="640" height="480" src="background.jpg"/>
    </div>
 
    <div id="tools">
    </div>
 
    <div id="objects">
        <div class="obj_item">
            <img id="obj_1" width="50" class="ui-widget-content" src="elements/bowtie.png" alt="el"/>
        </div>
        <div class="obj_item">
            <img id="obj_2" width="50" class="ui-widget-content" src="elements/mus1.png" alt="el"/>
        </div>
        <div class="obj_item">
            <img id="obj_3" width="50" class="ui-widget-content" src="elements/beard.png" alt="el"/>
        </div>
    </div>
 
    <a id="submit"><span></span></a>
 
    <form id="jsonform" action="merge.php" method="POST">
        <input id="jsondata" name="jsondata" type="hidden" value="" autocomplete="off"></input>
    </form>
 
</div>

?采用的ｃｓｓ　

#content{
    position:relative;
    width:1105px;
    height:500px;
    margin:40px auto 0px auto;
    background-color:#F9F9F9;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    -moz-box-shadow:0px 0px 8px #ccc;
    -webkit-box-shadow:0px 0px 8px #ccc;
    box-shadow:0px 0px 8px #ccc;
}
.background{
    position:absolute;
    width:640px;
    height:480px;
    top:10px;
    left:215px;
    -moz-box-shadow:0px 0px 3px #bbb;
    -webkit-box-shadow:0px 0px 3px #bbb;
    box-shadow:0px 0px 3px #bbb;
}

?然后是拖拽的元素和图片的　ｃｓｓ样式

?

#objects{
    width:210px;
    height:486px;
    top:10px;
    left:10px;
    position:absolute;
}
.obj_item{
    width:70px;
    height:70px;
    float:left;
}
#tools{
    width:230px;
    top:8px;
    right:10px;
    position:absolute;
    height:420px;
    overflow-y:scroll;
    overflow-x:hidden;
}
.item{
    border:3px solid #fff;
    background-color:#ddd;
    height:60px;
    position:relative;
    margin:2px 5px 2px 2px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    -moz-box-shadow:0px 0px 2px #999;
    -webkit-box-shadow:0px 0px 2px #999;
    box-shadow:0px 0px 2px #999;
}
.thumb{
    width:50px;
    height:50px;
    margin:5px;
    float:left;
}
.slider{
    float: left;
    width: 115px;
    margin: 30px 0px 0px 5px;
    background-color:#fff;
    height:10px;
    position:relative;
}
.slider span{
    font-size:10px;
    font-weight:normal;
    margin-top:-25px;
    float:left;
}
.slider span.degrees{
    position:absolute;
    right:-22px;
    top:20px;
    width:20px;
    height:20px;
}
.slider .ui-slider-handle {
    width:10px;
    height:20px;
    outline:none;
}
a.remove{
    width:16px;
    height:16px;
    position:absolute;
    top:0px;
    right:0px;
    background:transparent url(../images/cancel.png) no-repeat top left;
    opacity:0.5;
    cursor:pointer;
}
a.remove:hover{
    opacity:1.0;
}

?

饰品元素　被存储在ｊｓｏｎ　ｄａｔａ中

var data = {
    "images": [
        {"id" : "obj_0" ,"src" : "background.jpg", "width" : "640", "height" : "480"}
    ]
};

?另外元素可以放大缩小　并且可以拖拽

$('#objects img').resizable({
    handles : 'se',
    stop    : resizestop
}).parent('.ui-wrapper').draggable({
    revert  : 'invalid'
});

?

$('#background').droppable({
    accept