iT邦幫忙

0

[鷹問]JQuery問題

目前我想做的一個相簿瀏覽的網頁,使用JQuery來使用,小弟對JQuery非常初學,甚至很少使用,
通常都是搞PHP,不過老闆交代還是要搞出來
程序如下 當滑鼠移到img(縮圖)的元素 會在上方的div裡面顯示 原圖
自己實做的code
head

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script>
$("img").mouseenter(function(){
  $("#not").??();//這邊就卡了....
});
</script>

body

<div id="not"></div>
<img src="images/123.JPG" width="100" height="50" /> <img src="images/345.JPG" width="100" height="50" />

請各位幫忙大大指導,感謝!!謝謝

看更多先前的討論...收起先前的討論...
chingfeng提到:
請各位幫忙大大指導,感謝!!

打錯 請各位大大幫忙指導,感謝!!
總裁 iT邦好手 1 級 ‧ 2013-07-15 15:05:35 檢舉
原來,老鷹也有問題...偷笑
老鷹的問題可多了 鷹女王在哪裡 就是最大的問題哭
temo iT邦新手 1 級 ‧ 2013-07-15 15:09:00 檢舉
http://www.books.com.tw/exep/prod/booksfile.php?item=0010474289

接案我最行!JavaScript & Ajax 商業範例必殺技

這本有老鷹找的類似範例
之前借回想做的,結果做一做發覺一堆語法搞不懂就還圖書館了= =
裡面有個範圍也是jquery做照片顯示的
我是有在GOOGLE找到Jquery別人寫的,不過寫的有點小複雜,所以還是打算自己寫寫看,多學一點東西也是不錯,不然一直搞後面,說錯是搞後端,偶爾也來學學前端的東西~~!
總裁 iT邦好手 1 級 ‧ 2013-07-15 15:12:28 檢舉
鷹女王當然在....陰曹....冷打錯了,是鷹槽...汗
ted99tw iT邦高手 1 級 ‧ 2013-07-15 15:15:23 檢舉
cdfu提到:
打錯了,是陰槽...


冷
那我要去陰曹 打錯 鷹槽尋找一下冷
CalvinKuo iT邦大師 7 級 ‧ 2013-07-15 15:22:59 檢舉
cdfu提到:
鷹槽

話說怎麼到鷹槽...
就鷹道直走看到鷹莖右轉就看到了....

毆飛
calvinkuo提到:
話說怎麼到鷹槽...
就鷹道直走看到鷹莖右轉就看到了....

還少經過了鷹毛 才會到鷹槽
感覺此樓以歪 而且很糟糕驚毆飛
其實很久很久以前,我是買博碩的JavaScript字典來練習的@@

現在都是看網路Google直接學新的比較快..

書本的幾乎都看不下去了@_@a
lalabear iT邦新手 2 級 ‧ 2013-07-15 18:50:16 檢舉
其實這類應用的書,應該是稍具基礎之後,想要快速找到範例學習或是直接應用到專案中再來看。

雖然前端經常被看成是小道,不過亦有可觀之處,學習還是從根本上來學,看書還是找有從根本上教的書比較好。

網路上是有一些線上學習資源,不過多半比較零碎或是局部,不容易有個完整引導整個概念。

所以建議像jQuery,也是有好的書可以學,像是《jQuery 實戰手冊》或是更淺一點的《深入淺出 jQuery》。

另外,如果你覺得以上兩本不適合你,或想買其他的書,至少要注意一點,就是書中使用jQuery的版本,如果使用的版本太舊(個人覺得至少1.7、1.8比較適合),建議還是不要買了。

萬一因為某些原因,你還是買了舊版的回家,那要跟著書操作的時候,一定要下載相對應的jQuery,否則出現什麼奇怪的結果,也都是很有可能發生的。
受教了謝謝
JQuery我有兩本,只是都在使用PHP,JQuery的說只能有空再看看,目前還在看JS還有PHP囧
to chingfeng

JQuery我在學的時候就直接使用了~當初雖然沒有全部都看完才使用~

不過都是一小部分JQuery功能慢慢加(慢慢查網路或書本)@@~

等你累積一堆JQuery小功能的時候~你的JQuery就學起來了^^(有可能你會回首看以前寫的JQuery程式碼很糟驚)
哈哈!
我看我以前寫的PHP也覺得寫的很糟,不過也很謝謝jer5173大大的指導!!
temo iT邦新手 1 級 ‧ 2013-07-16 11:22:56 檢舉
嗯阿~所以我後來跑去借深入淺出 jQuery來看,基礎沒打好直接看其實很多地方只是一知半懂而已
lalabear iT邦新手 2 級 ‧ 2013-07-16 11:27:28 檢舉
回頭看自己過去的程式碼覺得很丟臉,是每個開發者必經的悔恨之路啊 落寞

不過這也是好事,代表自己已經成長了。哈哈
結果不是要原圖,本來以為點小圖(01.jpg)出現大圖(01.jpg),結果他要的是小圖(01.jpg)出現大圖(001.jpg)
所已我的CODE改成這樣(爬了半天的文)
<script>
$(document).ready(function(){
     $("img").mouseenter(function(){
       //$("#not").html("<img src=\"" + this.src + "\" />");
       var link = this.src.substr(this.src,27);     
       var str = this.src.substr(27);       
       $("#not").html("<img src=\""+ link + '0' + str + "\" />");
     }).mouseleave(function(){ 
       $("#not").html("");
     });
});
</script>
外獅佬 iT邦大師 1 級 ‧ 2013-07-16 14:25:10 檢舉
鷹王...你嘛幫幫忙...不能照抄咩...
人家的code用『this.src』...
帶入的原本就是你的縮圖咩...偷笑
wiselou提到:
帶入的原本就是你的縮圖咩.

爬了半天文改成帶入其他圖片
上面日本鬼圖下面要變成西洋鬼圖噴鼻血
真是麻煩搖頭
wiselou提到:
人家的code用『this.src』

那改成 this.AsianYoungGirl噴鼻血
lalabear iT邦新手 2 級 ‧ 2013-07-16 16:07:31 檢舉
@chingfeng

不過每點選一次,就新增/移除一個dom,一般來說,dom的操作相對來說,是比較耗資源的。所以如果先做一個dom出來,例如 $('#zoomIn'),裡面就是要顯示放大的html片段,然後點選時,就是把圖片網址取代後,再用 $('#zoomIn').show(); 結束用 $('#zoomIn').hide();這樣不但可以結省每次生成、刪除dom的資源,show/hide還有一些jQuery的動畫效果,看起來更有質感。

另外,替換網址的部份,也可以寫成helper, 例如 helper.getImgLink() 這樣的funcion,例如今天大圖、小圖的邏輯是001.jpg/01.jpg, 改天如果要換成 01_small.jpg/01_large.jpg,或是 001.gif/ 01.gif的時候,就要換到瘋掉了。但是如果改成用helper來做的話,只要把 helper.getImgLink這個funcion的邏輯增加策略或改寫,這樣原來的地方就不用動了,也不會有沒改到的地方。
謝謝拉拉前輩指導,小弟受教了!!謝謝
我晚點來玩玩看~~!忙
ted99tw iT邦高手 1 級 ‧ 2013-07-16 16:22:14 檢舉
今日事今日畢,鐘敲12下後就不要再玩這種的了...
現在又回去玩PHP了!
這個問題是昨天臨時插件~~!

1 個回答

8
純真的人
iT邦高手 1 級 ‧ 2013-07-15 15:43:14
最佳解答

這樣簡單秀可以嗎疑惑

&lt;pre class="c" name="code">
$(document).ready(function(){
	$("img").mouseenter(function(){
	  $("#not").html("&lt;img src=\"" + this.src + "\" />");
	});
});
看更多先前的回應...收起先前的回應...

就是這樣 這位大大非常感謝妳 原來我還少了一堆東西 看來又要好好研究 6H後最佳解

外獅佬 iT邦大師 1 級 ‧ 2013-07-15 15:46:30 檢舉

要加個mouseleave....當滑鼠移開時,隱藏。

不用給他用太好 做的太好會養成老闆的習慣驚

哈~mouseleave就交給樓主研究了~

劇透太深會被打飛~噴鼻血

外獅佬 iT邦大師 1 級 ‧ 2013-07-15 15:57:54 檢舉

chingfeng提到:
做的太好會養成老闆的習慣

敢情...鷹老闆是想用這個系統閱兵是吧...偷笑

&lt;pre class="c" name="code">
&lt;script>
$(document).ready(function(){
	$("img").mouseenter(function(){
	  $("#not").html("&lt;img src=\"" + this.src + "\" />");
	});
});
$(document).ready(function(){
	$("img").mouseleave(function(){
	  $("#not").html("裡面可以放第一張圖也可以空白");
	});
});
&lt;/script>
外獅佬 iT邦大師 1 級 ‧ 2013-07-15 16:18:10 檢舉

放第一張圖

這樣...會不會有bug??疑惑
要測試一下咧...

XD對吼會有問題 選擇器部分 還是給他空白就好了
不過我絕得不要加mouseleave會比較好看 想看另一張圖在滑過去就好了

再劇透一下....射門

mouseleave 直接串再後面就可以了吧?

&lt;pre class="c" name="code">
$(document).ready(function(){
	$("img").mouseenter(function(){
	  $("#not").html("&lt;img src=\"" + this.src + "\" />");
	}).mouseleave(function(){ 
	  $("#not").html("");
	});
});

我要發表回答

立即登入回答