iT邦幫忙

0

個位大師好，小弟剛學不久有事要請教

換裝 js html css 網頁設計
mack88888 2018-08-22 17:58:35 ‧ 3828 瀏覽

  • 分享至 

  • xImage

個位大師好，小弟剛學不久有事要請教

想做類似換裝的網頁但一直卡住....

換了衣服顏色後，想換衣服上的款式(例如襯衫要換T桖)

如選了款式，想往上回在重選顏色就卡住了 Orz

能請大師們協助嗎??

div id="BOX"

div id="SMALL"
img src="img/huge1.jpg" width="120" height="142" id="SS1"
img src="img/huge2.jpg" width="120" height="142" id="SS2"
img src="img/huge3.jpg" width="120" height="142" id="SS3"
img src="img/huge4.jpg" width="120" height="142" id="SS4"
/div
div id="SMALL1"
img src="img/style1.jpg" width="120" height="142" id="SS1"
img src="img/style2.jpg" width="120" height="142" id="SS2"
img src="img/style3.jpg" width="120" height="142" id="SS3"
/div
img src="img/huge1.jpg" width="507" height="600" id="BIG"
/div

$(function(){

$("#SMALL img").click(function(){
	
	var N = $(this).attr("id").substr(2);
	
	$("#BIG").attr( "src" , "img/suit" + N + ".jpg" );	
	
});

});

$(function(){

$("#SMALL1 img").click(function(){
	
	var N = $(this).attr("id").substr(2);
	
	$("#BIG").attr( "src" , "img/huge1/shirt" + N + ".jpg" );	
	
});

});

逢摸必爆MIS iT邦研究生 3 級 ‧ 2018-08-22 19:01:18 檢舉
沒事 剛剛畫面跳成像是廣告的頁面，以為是假詢問真廣告 不好意思 修改一下
登入發表討論
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

5 個回答

0
shijung
iT邦新手 3 級 ‧ 2018-08-23 13:43:12
最佳解答

存起來或者是用checkbox帶你的圖片的樣式會比較好用
像這樣：https://stackoverflow.com/questions/30663562/use-images-like-checkboxes/30663705
$(function(){});寫一個把一開始要執行的都放進去就好
試試看 這是不是你要的做法

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>   
$(function(){

     $("#SMALL img").click(function(){    //選了襯衫或衣服 suit or huge         
        $("#choose1").val($(this).attr("id"));       
        changeStyles();
    });


    $("#SMALL1 img").click(function(){ //選了紅色或藍色                
        $("#choose2").val($(this).attr("id"));
        if($(this).attr("id").indexOf("default")>-1){
            $("#choose2").val("");
            //$("#choose3").val("");//看是不是一定要選第二個才有第三層路徑圖片
        }
        changeStyles();
    });

     $("#SMALL2 img").click(function(){ //選了紅色或藍色                   
        $("#choose3").val($(this).attr("id"));
        if($(this).attr("id").indexOf("default")>-1){
            $("#choose3").val("");
        }
        changeStyles();
    });
    function changeStyles()
    {      
        var url = "";  
       if($("#choose3").val()!=""){
           url = "/"+$("#choose3").val()+url;
       }
       if($("#choose2").val()!=""){
        url = "/"+$("#choose2").val()+url;
       }
       if($("#choose1").val()!=""){
        url = "img/"+$("#choose1").val()+url;
        $("#BIG").val(url+".jpg");
       }else{
           alert('沒有衣服款式！')
       }
       
       
    }
    
});


</script>
</head>
<body>
    <div id="BOX">

    <div id="SMALL">
        <img src="img/huge1.jpg" width="120" height="142" id="hude"/>
        <img src="img/huge2.jpg" width="120" height="142" id="suit"/>
   
    </div>
    <div id="SMALL1">
        <img src="img/style1.jpg" width="120" height="142" id="red-bg"/>
        <img src="img/style2.jpg" width="120" height="142" id="blue-bg"/>
        <img src="img/no.jpg" width="120" height="142" id="default-bg"/><!--取消選取-->
  
</div>
<div id="SMALL2">
        <img src="img/point1.jpg" width="120" height="142" id="white-point"/>
        <img src="img/point2.jpg" width="120" height="142" id="red-point"/>
        <img src="img/no.jpg" width="120" height="142" id="default-point"/>
</div>
<input type="hidden" id="choose1" ><!--衣服款式 hidden改成text就可以看到 <input type="text" id="choose1" >-->
<input type="hidden" id="choose2"><!--衣服顏色-->
<input type="hidden" id="choose3"><!--白點 紅點-->

</div>
<div>

<!--<img id="BIG" />-->
<input id="BIG" type="text"/>
</div>

</body>
</html>
看更多先前的回應...收起先前的回應...
跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-23 13:54:39 檢舉

需要的應該是圖片的疊加吧
/images/emoticon/emoticon10.gif

shijung iT邦新手 3 級 ‧ 2018-08-23 14:31:09 檢舉

不是不知道要怎麼去記憶嗎?看是圖片疊加還是有result的圖片@@

疊加就這樣

<!DOCTYPE html>
<html>
<head>
    <style>
        .abposit{
            position: absolute;            
        }
    </style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>   
$(function(){

    $("#SMALL img").click(function(){    //選了襯衫或衣服 suit or huge       
    
        $("#choose1").val($(this).attr("id"));
       
        changeStyles();
    });


    $("#SMALL1 img").click(function(){ //選了紅色或藍色
                
        $("#choose2").val($(this).attr("id"));
        if($(this).attr("id").indexOf("default")>-1){
            $("#choose2").val("");
            $("#choose3").val("");//看是不是一定要選第二個才有第三層路徑圖片
        }
        changeStyles();
    });

     $("#SMALL2 img").click(function(){ //選了紅色或藍色                   
        $("#choose3").val($(this).attr("id"));
        if($(this).attr("id").indexOf("default")>-1){
            $("#choose3").val("");
        }
        changeStyles();
    });
    function changeStyles()
    {     
        $("#BIG").html("");
        var url = "";  
       if($("#choose3").val()!=""){
          // url = "/"+$("#choose3").val()+url;
          $("#BIG").append("<img class='abposit' src='img/"+$("#choose3").val()+".png'/>");
        
       }
       if($("#choose2").val()!=""){
       // url = "/"+$("#choose2").val()+url;
        $("#BIG").append("<img class='abposit' src='img/"+$("#choose2").val()+".png'/>");
        
       }
       if($("#choose1").val()!=""){
        url = "img/"+$("#choose1").val()+url;
        $("#BIG").append("<img class='abposit' src='img/"+$("#choose1").val()+".png'/>");        
        //$("#BIG").val(url+".jpg");
       }else{
           alert('沒有衣服款式！')
       }
       
       
    }
    
});


</script>
</head>
<body>
    <div id="BOX">

    <div id="SMALL">
        <img src="img/huge1.jpg" width="120" height="142" id="hude"/>
        <img src="img/huge2.jpg" width="120" height="142" id="suit"/>
   
    </div>
    <div id="SMALL1">
        <img src="img/style1.jpg" width="120" height="142" id="red-bg"/>
        <img src="img/style2.jpg" width="120" height="142" id="blue-bg"/>
        <img src="img/no.jpg" width="120" height="142" id="default-bg"/><!--取消選取-->
  
</div>
<div id="SMALL2">
        <img src="img/point1.jpg" width="120" height="142" id="white-point"/>
        <img src="img/point2.jpg" width="120" height="142" id="red-point"/>
        <img src="img/no.jpg" width="120" height="142" id="default-point"/>
</div>
<input type="hidden" id="choose1" ><!--衣服款式 hidden改成text就可以看到 <input type="text" id="choose1" >-->
<input type="hidden" id="choose2"><!--衣服顏色-->
<input type="hidden" id="choose3"><!--白點 紅點-->

</div>
<div>

<!--<img id="BIG" />-->
<!--<input id="BIG" type="text"/>-->

<div id="BIG"></div>
</div >

</body>
</html>
跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-23 16:28:40 檢舉

這樣沒辦法疊加吧，只是把兩張圖放一起，疊加是兩張圖重疊…像這樣…https://ithelp.ithome.com.tw/upload/images/20180823/20108694E3YhDNexA7.png

mack88888 iT邦新手 5 級 ‧ 2018-08-23 17:33:41 檢舉

謝謝大師的說明 ^^

登入發表回應
0
froce
iT邦大師 1 級 ‧ 2018-08-22 20:29:16

https://jsbin.com/dalanip/2/edit?html,output

這樣？

mack88888 iT邦新手 5 級 ‧ 2018-08-23 11:25:19 檢舉

謝謝您的回答，很接近，但><還不是。

簡單說， 有二種按鈕 ，

一個是顏色 ( 紅色 ) ( 藍色 )
一個是形狀 ( 正方 ) ( 圓型 )

預設是 「 紅色 正方 」

點擊了 ( 藍色 ) → 「 藍色 正方 」

在點擊 ( 圓型 ) → 「 藍色 圓型 」

在點擊 ( 紅色 ) → 「 紅色 圓型 」

大概是這樣

但我想做的更進階

有 四種按鈕，

一個是衣服樣式 『 圓T 」 『 帽 T 』 『 襯衫 』

一個是顏色 「 紅 」「藍」 「白」

一個是圖樣 「斜紋」 「直條」 「格子」

一個是 「口袋」「無口袋」 「二邊口袋」

預設是＝ 『 圓T 紅色 斜紋 口袋 』

在點擊其它的顏色或樣式可以隨這變化這樣。

登入發表回應
0
跟著鄉民看熱鬧
iT邦高手 1 級 ‧ 2018-08-23 09:56:03

這樣？

<html>
<head>
    <title>pick test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <!-- CSS -->
    <style type="text/css">
        img{
            cursor: pointer;
        }
        #small img, #small1 img{
            width:100px;
        }
        #big{
            position: relative;
        }
        #big {

        }
        #big img{
            width:200px;
            border: 1px solid black;
        }
        .box-style{
            position:absolute;
            top:0;
            left:0;
        }
        .box-style img{
            width:50px;
        }
    </style>

    <!-- Javascript -->
    <script language="javascript">
        $(function () {
            $('#small div').click(function(){
                var smallImg = $(this).clone();
                smallImg.addClass('box-style');
                smallImg.children().width(50);
                $('#big').append(smallImg);
            });

            $('#small1 div').click(function(){
                var smallImg = $(this).clone();
                smallImg.addClass('box-style');
                smallImg.children().width(50);
                $('#big').append(smallImg);
            });
        });
    </script>
</head>
<body>
    顏色
    <div id="small">
        <div>
            <img src="https://goo.gl/WhkSTw" alt="" />
        </div>
        <div>
            <img src="https://goo.gl/VMJKCm" alt="" />
        </div>
    </div>
    樣式
    <div id="small1">
        <div>
            <img src="https://goo.gl/qM3gKA" alt="" />
        </div>
        <div>
            <img src="https://goo.gl/xKd1TR" alt="" />
        </div>
    </div>
    <div id="big">
        <div>
            <img src="https://goo.gl/UoDz3G" alt="">
        </div>
    </div>
</body>
</html>
看更多先前的回應...收起先前的回應...
mack88888 iT邦新手 5 級 ‧ 2018-08-23 11:26:00 檢舉

謝謝您的回答，很接近，但><還不是。

簡單說， 有二種按鈕 ，

一個是顏色 ( 紅色 ) ( 藍色 )
一個是形狀 ( 正方 ) ( 圓型 )

預設是 「 紅色 正方 」

點擊了 ( 藍色 ) → 「 藍色 正方 」

在點擊 ( 圓型 ) → 「 藍色 圓型 」

在點擊 ( 紅色 ) → 「 紅色 圓型 」

大概是這樣

但我想做的更進階

有 四種按鈕，

一個是衣服樣式 『 圓T 」 『 帽 T 』 『 襯衫 』

一個是顏色 「 紅 」「藍」 「白」

一個是圖樣 「斜紋」 「直條」 「格子」

一個是 「口袋」「無口袋」 「二邊口袋」

預設是＝ 『 圓T 紅色 斜紋 口袋 』

在點擊其它的顏色或樣式可以隨這變化這樣。

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-23 11:28:29 檢舉

意思是要做出組合的效果？問題是能組合，就只有樣式而已，圖片要組合，要用不同div吧，而且你這不是問題，而是需求了～

mack88888 iT邦新手 5 級 ‧ 2018-08-23 11:35:50 檢舉

是的要不同的div 沒錯，但我不知道要怎麼記憶上次點擊的是什麼

例如說

預設是『 圓T 紅色 斜紋 口袋』

我點擊了『 藍色 』 因該就要變成『圓T 藍色 斜紋 口袋』

哪我在點擊『 帽T 』 因該就要變成 『帽T 藍色 斜紋 口袋』

在點擊『無口袋』 因該就要變成 『帽T 藍色 斜紋 無口袋』

我不知道要怎麼去記憶才對 ORZ

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-23 11:48:50 檢舉

不止是記憶的問題，連組合你都還沒寫出來，範例改了，只能點到為止，剩下要你自己完成了，沒問題記得結案～

youarefat iT邦新手 5 級 ‧ 2018-09-07 15:32:19 檢舉

'應'該啦

登入發表回應
0
Luke
iT邦研究生 5 級 ‧ 2018-08-23 11:58:35

為什麼要記?/images/emoticon/emoticon19.gif

一個是衣服樣式 『 圓T 」 『 帽 T 』 『 襯衫 』
一個是顏色 「 紅 」「藍」 「白」
一個是圖樣 「斜紋」 「直條」 「格子」
一個是 「口袋」「無口袋」 「二邊口袋」

比較差的方式


var 衣服樣式 = " 圓T";
var 顏色 = "紅";
var 圖樣 = "斜紋";
var 口袋 = "口袋";

$("#衣服樣式").click(function(iii){
衣服樣式 =iii;
$("#BIG").attr( "src" , "img/suit" +衣服樣式+顏色+圖樣+口袋+ ".jpg" );	
}

$("#顏色").click(function(iii){
顏色 =iii;
$("#BIG").attr( "src" , "img/suit" +衣服樣式+顏色+圖樣+口袋+ ".jpg" );	
}
...略
跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-23 13:15:52 檢舉

因為移除的時候會用到吧，實務上不可能這樣做，如果有幾千種組合和就要做幾千張圖了

Luke iT邦研究生 5 級 ‧ 2018-08-23 13:18:27 檢舉

移除 /images/emoticon/emoticon19.gif
那就裸體了/images/emoticon/emoticon07.gif

所以這個是比較差的方式/images/emoticon/emoticon01.gif

跟著鄉民看熱鬧 iT邦高手 1 級 ‧ 2018-08-23 13:50:13 檢舉

移除是指在選擇別的樣式的時候，要考慮哪些樣式要拿掉，才不會奇怪，例如衣服是否要重覆穿，或是某些配件不和某些配件同時存在之類的，業界是沒有什麼比較差的方法，只有能用跟不能用的方法

登入發表回應
1
Benchm
iT邦新手 5 級 ‧ 2018-08-23 15:42:45

"各"位大師 才對../images/emoticon/emoticon10.gif

登入發表回應

我要發表回答

立即登入回答
iThome鐵人賽
參賽組數
1064 組
團體組數
40 組
累計文章數
22195 篇
完賽人數
600 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 16th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 javascript 2018鐵人賽 python 2017鐵人賽 windows php c# windows server linux css react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙