3d试衣

最新推荐文章于 2023-03-08 20:00:01 发布

zuopengLi

最新推荐文章于 2023-03-08 20:00:01 发布

阅读量2.1k

点赞数 1

分类专栏： JQuery 文章标签： javascript class radiobutton function stylesheet input

本文链接：https://blog.csdn.net/zuopengli/article/details/2495203

版权

JQuery 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1、部分的javascript and jquery

function tryOnCloth(productId, productType,xclick,str, displayPrice){
    var model = document.getElementById("3dman");
    var replaceMan = document.getElementById("replaceMan");
    replaceMan.innerHTML = model.innerHTML;
    $("#replaceMan").show();
    $("#3dman").hide();
var id = productId;

var hat = document.getElementById("hat");
var cloth = document.getElementById("cloth");
var trousers = document.getElementById("trousers");
var shoe = document.getElementById("shoe");
var glasses = document.getElementById("glasses");
var bag = document.getElementById("bag");
var earing = document.getElementById("earing");
var necklace = document.getElementById("necklace");
var view = document.getElementById("view").value;
var flag = document.getElementById("product.flag").value;
if(trousers.value == cloth.value && (productType ==1||productType==2)){
trousers.value = "0";
cloth.value = "0";
}
switch(parseInt(productType)){

  case 0: // hat
   if( hat.value==id )
    return false;
   hat.value = id;
   break;
  case 1: // cloth
   if( cloth.value==id )
    return false;
   cloth.value = id;
   break;
  case 2: // trousers
   if( trousers.value==id )
    return false;
   trousers.value = id;
   break;
  case 3: // shoe
   if( shoe.value==id )
    return false;
   shoe.value = id;
   break;
  case 4: // glasses
   if( glasses.value==id )
    return false;
   glasses.value = id;
   break;
  case 5: // bag
   if( bag.value==id )
    return false;
   bag.value = id;
   break;
  case 6: // earing
   if( earing.value==id )
    return false;
   earing.value = id;
   break;
  case 7: // necklace
   if( necklace.value==id )
    return false;
   necklace.value = id;
   break;
   case 8: // 套装
   if( cloth.value == id || trousers.value == id )
    return false;
   cloth.value = id;
   trousers.value = id;
   break;
}
var image = document.getElementById(productId);

    insertTryRecord(id,productType,xclick,image.src);

    if(xclick==1){//在分页中点击
        var id = "#" + productId;

    //var image = document.getElementById(productId);

    $(id).TransferTo({
        duration: 600,
        to: 'clothCenter',
        image: image.src,
        complete: function(){
   turnRound(0);
        }
    });
    }

    if(xclick==2){//在插入中点击
    id = "#" + productId+"s";
    var ss=productId+"s";
    var image = document.getElementById(ss);

//alert(id);

    $(id).TransferTo({
        duration: 600,
        to: 'clothCenter',
        image: image.src,
        complete: function(){
   turnRound(0);
        }
    });
    }

return false;
}

一部分的html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jstl/fmt" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三维虚拟换装</title>
<link href="${pageContext.request.contextPath _fcksavedurl=""${pageContext.request.contextPath" }/style/all.css" rel="stylesheet" type="text/css" />
<link href="${pageContext.request.contextPath }/style/changecloth.css" rel="stylesheet" type="text/css" />
<style type="text/css">
a{
text-decoration:none;
color:#545454;
}
</style>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/wardrobesServie.js' ></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/cppService.js' ></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/interface/modelService.js' ></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/engine.js'></script>
<script type='text/javascript' src='<%=request.getContextPath()%>/dwr/util.js'></script>
<script type='text/javascript' src='${pageContext.request.contextPath}/js/save.js'></script>

function showBig(){
var sex = document.getElementById("gender").value;
    var waist = document.getElementById("waist").value;
    var height = document.getElementById("height").value;
    var age = document.getElementById("age").value;
    var fuse = document.getElementById("skinColor").value;
    var fase = document.getElementById("hairColor").value;
    var faxing = document.getElementById("hairStyle").value;
    var back = document.getElementById("back").value;

    var hat = document.getElementById("hat").value;
    var cloth = document.getElementById("cloth").value;
    var trousers = document.getElementById("trousers").value;
    var shoe = document.getElementById("shoe").value;
    var glasses = document.getElementById("glasses").value;
    var bag = document.getElementById("bag").value;
    var earing = document.getElementById("earing").value;
    var necklace = document.getElementById("necklace").value;
   var view= document.getElementById("view").value
    window.open('${pageContext.request.contextPath }/bigModels.action?models.gender='+sex+
  '&models.waistLine='+waist+'&models.height='+height+
  '&models.age='+age+'&models.skinColor='+fuse+
  '&models.hairColor='+fase+'&models.hairStyle='+faxing+
  '&back='+back+'&hat='+hat+'&cloth='+cloth+'&trousers='+trousers+
  '&shoe='+shoe+'&glasses='+glasses+'&bag='+bag+'&earing='+earing+'&necklace='+necklace+'&view='+view,
  '一格模特放大','height=1600px,width=580px, toolbar=0,menubar=no, scrollbars=yes, resizable=no status=no');
}

//-->
</script>

</head>

<input type="hidden" name="models.name" id="modelsName" value="${models.name }"/>
<input type="hidden" name="" id="modelsId" value="${models.id }"/>
<input type="hidden" id="gender" value="${empty(models.gender)?0:models.gender }" />
<input type="hidden" id="waist" value="${empty(models.waistLine)?86:models.waistLine }" />
<input type="hidden" id="height" value="${empty(models.height)?182:models.height }" />
<input type="hidden" id="skinColor" value="${empty(models.skinColor)?1:models.skinColor }" />
<input type="hidden" id="hairStyle" value="${empty(models.hairStyle)?1:models.hairStyle }" />
<input type="hidden" id="hairColor" value="${empty(models.hairColor)?1:models.hairColor }" />
<input type="hidden" id="age" value="${empty(models.age)?16:models.age }" />

</form>

<div id="header">
<jsp:include page="../inc/head.jsp"></jsp:include>
</div>

<div id="main" style="background: #fff; ">

</form>

<div id="leftitem" >

<div id="Layer1">
<div id="clothCenter" style="position:absolute;z-index:-200px; width: 200px ; height: 100px; left: 290px;top: 220px; display: none"></div>

<div id="layer4" style="display:none">
<img src="${pageContext.request.contextPath }/img/flash/load19080.gif">
</div>



<div id="layer2">
<div class="jumpwindow">

<div class="title">
<div class="bt">修改我的模特</div>
<div id="close">
<img src="img/createmodel/close.gif" οnclick="MM_showHideLayers('layer2','','hide')" / title="关闭窗口">
</div>
</div>

<div class="content">
<span class="yellow">手上没有现成工具？请使用在线的一格三维图测工具，或者打印一格自助纸尺，助您轻松解决测量问题。</span>
<form>

</div>

<div class="modifymodel">
<strong>为了体验个性化服务，请提供更详细的参数</strong>
</div>

<c:if test="${models.gender==0}">
<c:forEach var="first" items="${PRODUCT_TYPE_LIST}">
<c:if test="${first.prodParentId==1 && first.prodTypeId==118}">
<ul>

${first.prodTypeName }
</a>

</strong>

</ul>

<a href="#" οnclick="MartyClick('${first.prodParentId }','${first.prodTypeName }','${first.prodTypeId}','${second.prodTypeName }','${second.prodTypeId }','','','');">${second.prodTypeName }</a>
</strong>
<ul>
<li style="padding-left:12px">
<c:forEach var="third" items="${PRODUCT_TYPE_LIST}">
<c:if test="${third.prodParentId == second.prodTypeId }">
<a href="#" οnclick="MartyClick('${first.prodParentId }','${first.prodTypeName }','${first.prodTypeId}','${second.prodTypeName }','${second.prodTypeId }','${third.prodTypeName }','${third.prodTypeId }','');">${third.prodTypeName }</a>
</c:if>
</c:forEach>
</li>
</ul>
</li>
</c:if>
</c:forEach>
</ul>
</c:if>
</c:forEach>
</c:if>

<div class="title">
<strong style="color: #EB3D00">产品属性分类</strong>
</div>
<ul style="padding-left:12px">
<strong>品牌</strong>
</ul>
<ul style="padding-left:24px">
<li>UrbanTag</li>
</ul>

<ul style="padding-left:12px">
<strong>产地</strong>
</ul>
<ul style="padding-left:24px">
<li>中国大陆港台澳其他国家</li>
</ul>

<ul style="padding-left:12px">
<strong><a href="#" οnclick="return searchByRequire('','8','');">折扣</a></strong>
</ul>
<ul style="padding-left:12px"><strong><a href="#" οnclick="return searchByRequire('','9','');">上架时间</a></strong></ul>
<ul style="padding-left:24px">
<li><a href="#" οnclick="return searchByRequire('1','9','新上架');">新上架</a></li>
<li><a href="#" οnclick="return searchByRequire('7','9','近一周上架');">近一周上架</a></li>
<li><a href="#" οnclick="return searchByRequire('30','9','近一月最新上架');">近一月最新上架</a></li>
<li><a href="#" οnclick="return searchByRequire('90','9','近一季度最新上架');">近一季度最新上架</a></li>
<li><a href="#" οnclick="return searchByRequire('-1','9','即将上架');">即将上架</a></li>
</ul>
</div>

<DIV style="margin:10px 0 ; width:780px; clear:both; overflow:hidden" >
<img src="${pageContext.request.contextPath }/image/cloth_list/ad_780100.jpg" />
</DIV>

<div id="centerchcloth" style="padding-left: 15px;">
<div id="3dhz">

<div id="3dman" style="width:260px;height:440px">

<c:choose>
<c:when test="${not empty modelPic}">
<img style="width:260px;height:440px" src="${pageContext.request.contextPath}${modelPic }" />
</c:when>
<c:otherwise>
<img src="${pageContext.request.contextPath }/img/modelpic/${models.gender==0?'':'wo' }man.jpg" />
</c:otherwise>
</c:choose>
</div>

<div id="changebutton">
<form>
<div style="clear:both; margin-left:10px">
<div class="s1"><input name="chooseGender" type="radio" value="0" οnclick="document.location.href='${pageContext.request.contextPath}/clothList.action?models.gender=0&product.flag=0'" ${models.gender==0?'checked':'' } /> 男</div>
<div class="s1"><input name="chooseGender" type="radio" value="1" οnclick="document.location.href='${pageContext.request.contextPath}/clothList.action?models.gender=1&product.flag=1'" ${models.gender==1?'checked':'' } /> 女</div>
<div class="s1" id="modelListCen" ><select οnclick="messageUser();" ><option>模特列表</option></select></div>
<div class="s1">
<select id="background" οnchange="setback();">
<option value="1">选择背景</option>
<option value="1">白色背景</option>
<option value="2">银色背景</option>
<option value="3">居家环境</option>
<option value="4">办公场所</option>
<option value="5">田园风光</option>
<option value="6">小区别墅</option>
<option value="7">酒店大堂</option>
<option value="8">宾馆大堂</option>
</select>
</div>
</div>

<a href="javascript:turnRound(-72);"><img src="${pageContext.request.contextPath}/image/cloth_list/leftbutton.gif" /></a>

<a href="javascript:turnRound(72);"><img src="${pageContext.request.contextPath}/image/cloth_list/rightbutton.gif" /></a>

<a href="javascript:;" οnmοusedοwn="showCommModel(${models.gender});"><img src="${pageContext.request.contextPath}/image/cloth_list/create.gif" border="0" /></a>

<a href="javascript:halfBody()"><img src="${pageContext.request.contextPath}/image/cloth_list/halfbody.gif" /></a>

<a href="javascript:revert()"><img src="${pageContext.request.contextPath}/image/cloth_list/allbody.gif" /></a>

</div>

</form>
</div>

</div>

<div style="margin-top:4px">
<a href="http://192.168.1.2:8089/3dbrand/sys.jsp" target="_blank">
<img src="image/cloth_list/utag.gif" />
</a>
</div>

</div>

<div id="rightcolumn" >

<div class="lefttitle">一格新款商品</div>

<c:if test="${not empty productList}">
    <div id="pagenext">
    <c:if test="${page.prePage}"><a href="javascript:navPage(${page.currentPage-1 },${models.gender});" >上一页</a></c:if>
    <c:if test="${page.nextPage}"><a href="javascript:navPage(${page.currentPage+1 },${models.gender});" >下一页</a></c:if>
    第<select id="pageRequest" name="pageRequest" style="font-size:12px; height: 18px; border: none ">
    <c:forEach begin="${1}" end="${page.totalPage}" step="1" varStatus="i">
    <option value="${i.index }" ${page.currentPage == i.index ?'selected':'' }>${i.index }</option>
    </c:forEach>
    </select>
    页/共
    <span>${page.totalPage}</span>页
   <a href="javascript:getPage(0,${models.gender});" > <img src="${pageContext.request.contextPath }/images/btn_go.gif" width="16" height="16" border="0" align="absmiddle" /></a>
   </div>
</c:if>

</div>
</div>
</div>

</div>

<div id="clothall">

<c:forEach items="${productList}" var="product" varStatus="i">

<c:if test="${(i.index) %3 == 0}">
<div class="cloths_heng">
</c:if>

<div class="clothunit">
<img id="${product.id }" width="108px" height="131px" οnerrοr="this.src='${pageContext.request.contextPath }/img/none.gif';" src="${picRootPath}${product.smallPicture }" />
<div class="textxushu">
编号：${product.serialNumber }<br/>
<strong>名称:${product.name }</strong><br/>
原价：<fmt:formatNumber type="currency" pattern=".00" value="${product.displayPrice }" />元<br/>
现价：<span class="orange"><fmt:formatNumber type="currency" pattern=".00" value="${product.displayPrice * product.discount }" />元
</span><br/>
<a href="javascript:void(0)" οnclick="window.open('${pageContext.request.contextPath}/default/model/viewProducts.action?product.id='+${product.id}+'&supplyid='+${product.supplier.id });" >[详细]</a>
<a href="javascript:void(0)" οnclick="window.open('${pageContext.request.contextPath}/addToCart.action?product_id='+${product.id})">[购买]</a>
<a href="javascript:void(0)" οnclick="saveToWardrobes('${product.id }','${currUser.id }');">[收藏]</a><br/>
<c:if test="${not empty product.model3d and product.hasGenerate3DPicture == 1}">
<a href="javascript:void(0);" style="color:#EB3D00;font-weight: bold" οnclick="tryOnCloth('${product.id }','${product.productType}',1,'${picRootPath}${product.smallPicture }','${product.displayPrice}')">
[3D试穿]
</a>

</c:if>
</div>
</div>
<c:if test="${(i.index) %3 == 2}">
</div>
</c:if>

</c:forEach>

<c:if test="${(page.totalPage) %3 != 2}">
</div>
</c:if>

</div>

</div>

<div class="trychuan">
<div class="title"><span style="float:left">我的试穿记录</span><a class=closeEl href="#" style="float:right;">查看</a></div>
<div id="leftarrow" style="clear: both" class="centercloth" style="padding:1px 1px"><a href="javascript:void(0);" οnclick="return lookRecordLeft();" title="向左查看"><img src="${pageContext.request.contextPath }/img/leftarrow.gif" /></a></div>
<div id="recordchoice" class="centercloth" style="width:500px height:600px;">

</div>
<div id="rightarrow" class="centercloth" style="padding:1px 1px"><a href="javascript:void(0);" οnclick="return lookRecordRight();" title="向右查看"><img src="${pageContext.request.contextPath }/img/rightarrow.gif" /></a></div>
</div>

<div class="trychuan">
<div class="title"><span style="float:left">我可能感兴趣的</span><a class=closeEl href="#" style="float:right;">查看</a></div>

</div>

</div>


</div>
</div>

<div id="bottom">
<jsp:include page="../inc/bottom.jsp"></jsp:include>
</div>
<jsp:include page="../inc/jumpWindowForMail.jsp"></jsp:include>

$(document).ready(
function () {

$(".centercloth").hide();
$('a.closeEl').bind('click', toggleContent);

$('div.trychuan').Sortable(
{

accept: 'groupItem',
  helperclass: 'sortHelper',

  activeclass : 'sortableactive',

  hoverclass : 'sortablehover',

  handle: 'div.title',

  tolerance: 'pointer',

  onChange : function(ser)
{
},

  onStart : function()
{

   $.iAutoscroller.start(this, document.getElementsByTagName('body'));

   },

  onStop : function()
{

$.iAutoscroller.stop();

  }
}
);
}
);

var toggleContent = function(e)
{

   var targetContent = $('div.centercloth',
   this.parentNode.parentNode);

   if (targetContent.css('display') == 'none') {

    targetContent.slideDown(300);

    $(this).html('关闭');

    }else {

     targetContent.slideUp(300);

     $(this).html('查看');
}

     return false;
};
function serialize(s)
{

serial = $.SortSerialize(s);

alert(serial.hash);
};

</script>

</body>
</html>

zuopengLi

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
3d试衣

1、部分的javascript and jqueryfunction tryOnCloth(productId, productType,xclick,str, displayPrice){ var model = document.getElementById("3dman"); var replaceMan = document.getElementById("replaceM
复制链接

扫一扫