想订购个性T恤在线DIY吧

技术与开发

重庆超人 · 2008年8月11日第31期

雨儿MM在浏览一个设计网站的时候，发现了一个可以自己选择T恤样式和T恤图案的在线T恤设计功能，特别好用。她想把这个功能应用到自己的网站上，这样可以方便用户在线设计自己想要的T恤，也可以增加网站的收入。

我们可以制作一个在线T恤设计插件（下载地址：http://www.shudoo.com/bzsoft）来实现雨儿MM的愿望。有了它，便可以DIY自己想要的T恤样式了。首先我们需要搭建框架，包括T恤的样式列表区、图案列表区以及T恤设计区，这样就可以将用户选择的T恤样式和图案送至T恤设计区，然后通过按钮控制图案的大小，最后再通过鼠标拖放图案并定位完成在线T恤的设计。根据相似原理，我们还可以制作许多在线设计的插件。例如在线图标设计插件、在线画面插件等。

小知识：网页对象定位的两种属性及其区别

我们一般用来定位网页对象的属性有：X轴的offsetLeft，Left和Y轴的offsetTop，Top。这里主要以定位对象X轴的几个属性为例来讲一下它们的区别。offsetLeft 指对象距离左方或上层控件的位置，其值为数字，并且只读。Left也为对象距离左方或上层控件的位置，但其值为字符串，除了数字外还带有单位px，并且可读写。

第一步：搭建T恤设计框架

新建一个网页，在网页的之间添加一个含有三列的表格，第一列为T恤样式列表区，第二列为T恤设计区，第三列为T恤图案列表区。关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：

〈td width="150" height="500" valign="top" align="center"〉〈br /〉〈br /〉

[T恤样式选择]〈br /〉〈br /〉

〈img src="imgs/tx1.jpg" width="130" onclick="changetx（this）" /〉〈br /〉

〈br /〉〈img src="imgs/tx2.jpg" width="130" onclick="changetx（this）" /〉〈/td〉

〈td width="400" valign="top" align="center"〉〈img src="imgs/tx1.jpg" width="400" style="margin-top:30px;" id="mainImg" /〉

〈div style="BORDER-RIGHT: #cccccc 1px dashed; BORDER-TOP: #cccccc 1px dashed; LEFT: 530px; BORDER-LEFT: #cccccc 1px dashed; WIDTH: 200px; BORDER-BOTTOM: #cccccc 1px dashed; POSITION: absolute; TOP: 111px; HEIGHT: 350px; TEXT-ALIGN: left"〉

〈DIV style="Z-INDEX: 2; LEFT: 0px; WIDTH: auto; POSITION: absolute; TOP: 0px; HEIGHT: auto" id="logoDiv"〉

〈img id="logoImg" src="imgs/logo1.gif" width="150" border=0 /〉

第二步：将T恤样式和图案送至设计区

当用户从列表中选中某个T恤样式或者T恤图案时，就自动将该T恤样式或者T恤图案的图片地址送到设计区的相应区域并显示出来。在之间输入以下代码：

function changetx（v）{//改变T恤样式

$（'mainImg'）.src=v.src;

}

function changelogo（v）{//改变T恤图案

$（'logoImg'）.src=v.src;

}

第三步：定位图案完成T恤设计

T恤的样式和图案进入设计区以后，我们便可以通过调整区域内的T恤图案的宽度来控制其大小，再通过捕获鼠标对象来拖放和定位图案在T恤上的位置。输入相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：

function moveMouse（evt） //T恤图案移动效果

{

var e=evt || window.event; //捕获鼠标对象

if （isdrag==true）{

oDragObj.style.top = nTY + e.clientY - y +"px"; //定位图案的X轴

oDragObj.style.left = nTX + e.clientX - x+"px"; //定位图案的Y轴

//限制T恤图案移动范围

var currentX=parseInt（oDragObj.style.left）;

var currentY=parseInt（oDragObj.style.top）;

var maxX=parseInt（oDragObj.parentNode.style.width）-parseInt（$（'logoImg'）.width）;//X轴最大范围

var maxY=parseInt（oDragObj.parentNode.style.height）-parseInt（$（'logoImg'）.height）;//Y轴最大范围

function initDrag（evt） //初始化图案移动方式

{

var e=evt || window.event; //捕获鼠标对象

var oDragHandle=e.target || e.srcElement;

while （oDragHandle.tagName.toUpperCase（）!= 'BODY' && oDragHandle.id != 'logoDiv'） { //鼠标停留的对象集筛选

oDragHandle = oDragHandle.parentNode; //获取父对象

}

if （oDragHandle.id=="logoDiv"） {

isdrag = true;

oDragObj = oDragHandle;

nTY = parseInt（oDragObj.style.top+0）; //获取目标对象的当前Y轴值

编后

本文中的在线T恤设计插件，只提供了几个T恤样式和图案供用户选择，读者们可以在该插件上进行扩展，比如设计一个上传图片的功能，让用户可以上传自己的T恤样式和图案到该插件中进行T恤设计，这样更加实用。