jquery圖片調整大小問題

jquery

神威 2018-07-02 15:00:40 ‧ 1436 瀏覽

分享至

大家好:
想請教以下是我的程式碼

 <table border="1" cellpadding="1" cellspacing="1" style="width:300px">
	<tbody><tr>
  <td width="200" height="150"><div class="imgs"><img id="img1" src="../pic/about01.jpg"/></div></td>
  <td rowspan="3" width="600" height="450">
  <div class="show-img" style="width:600px; height:450px">
   <img id="img2" width="600" height="450"/>
      </div>
  </td></tr>
	<tr>
<td width="200" height="150"><div class="imgs"><img id="img1" src="../pic/about02.jpg"/></div></td>
</tr>
		<tr>
		<td width="200" height="150"><div class="imgs"><img id="img1" src="../pic/about03.jpg"/></div></td>
		</tr>
	</tbody>
</table>
<script>  
 
   $("#img1").mouseover(function(){
       $(this).width(600);
       $(this).height(450);
            $('.show-img').html($(this).html());
  }); 
   </script>

我想要滑鼠移到圖上面，圖就會出現在大框格，並放大
但我發現他都只能在原本的小框格放大
而且放大縮不回來......
若是把這2行刪除，他就會在大方格出現，但是不會放大

$(this).width(600);
 $(this).height(450);

想問該如何改才能讓他在大方格放大呢?
謝謝

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

2 個回答

柯柯

iT邦新手 2 級 ‧ 2018-07-02 15:29:47

最佳解答

<table border="1" cellpadding="1" cellspacing="1" style="width:300px">
	<tbody>
      <tr>
        <td width="200" height="150">
          <div class="imgs">
            <img id="img1" src="https://free.com.tw/blog/wp-content/uploads/2014/08/Placekitten480-g.jpg"/>
          </div>
        </td>
        <td rowspan="3" width="600" height="450">
          <div class="show-img" style="width:600px; height:450px">
           <img id="img2" width="600" height="450"/>
          </div>
        </td>
      </tr>
   </tbody>
</table>
<script>  
   $("#img1").mouseover(function(){
      $('#img2').attr('src',$(this).attr('src'));
      $('#img2').width(600);
      $('#img2').height(450);
  }); 
</script>

這樣就可以了你在show-img內已經給他一個img容器
可以直接把連結丟過去即可再調整img2的大小就好了

另外你程式碼的img ID都是同一個會出錯ID只能綁定一個元件不能重複
id唯一性
你如果要多個img去綁定mouseover事件的話
改成

 <img class="img1" src="https://free.com.tw/blog/wp-content/uploads/2014/08/Placekitten480-g.jpg"/>
<script>  
   $(".img1").mouseover(function(){
      $('#img2').attr('src',$(this).attr('src'));
      $('#img2').width(600);
      $('#img2').height(450);
  }); 
</script>

回應 5
分享
檢舉

看更多先前的回應...收起先前的回應...

神威 iT邦研究生 4 級 ‧ 2018-07-02 15:39:33 檢舉

你好:
我有3張圖片都叫img1，我希望滑鼠移到時那張圖片會顯示在大框
但我發現怎麼移都只有第一張圖片會顯示在大框，2,3張圖完全沒作用....是不是我要取3個不同的id才行呢?

柯柯 iT邦新手 2 級 ‧ 2018-07-02 15:42:17 檢舉

對的我剛編輯完哈哈
因為ID 是唯一的所以多個元件不能用同一個ID
可以參考這個 https://www.1keydata.com/css-tutorial/tw/class-id.php

用class就可以多個元件同一個名稱去綁定事件了

神威 iT邦研究生 4 級 ‧ 2018-07-02 15:56:20 檢舉

想請教

 $('#img2').attr('src',$(this).attr('src'));

這句我不太懂
這句可以解讀成現在指的這張圖=對應pic資料夾裡的某張圖
把那張圖寫到img2中並放大

是這樣的意思嗎?

柯柯 iT邦新手 2 級 ‧ 2018-07-02 16:04:29 檢舉

可以說是把img1的src抓出來放到img2的src
變成這樣

<img id='img1' src='123'>
<img id='img2' src='123'>

attr 就是修改你這個元件的屬性
$('#img2').attr('src','123') <=設置 ID=img2的src='123'

我可能講得不是很好哈哈
可以參考這個http://www.w3school.com.cn/jquery/attributes_attr.asp

神威 iT邦研究生 4 級 ‧ 2018-07-02 16:17:43 檢舉

柯柯:
你講得很清楚，我懂了
謝謝你

登入發表回應

wingkawa

iT邦新手 3 級 ‧ 2018-07-02 15:25:06

首先，你可以用console.log($(this).html())看看你要轉到大方格的東西是什麼
然後你會發現是一片空白，這表示你抓錯東西了，你沒有抓到你要轉移的圖片
修正成這樣就會送到大方格了

    $("#img1").mouseover(function() {
        // console.log($(this).html());
        // console.log($(this));
        let image = $(this);
        $(this).width(600);
        $(this).height(450);
        $('.show-img').html(image);
    });

不過這樣會整張圖從小方格移到大方格，小方格的圖就不見了
這可能不是你要的，但你可以先想想為什麼會這樣？
this是什麼？
jquery的.html()做了什麼事？