jQuery點(diǎn)縮略圖彈出層顯示大圖片

更新時(shí)間：2015年02月13日 11:15:01 投稿：hebedich

這篇文章主要介紹了jQuery點(diǎn)縮略圖彈出層顯示大圖片的方法，思路非常不錯(cuò)，這里推薦給大家。

2015年繁忙的一月份，無更多時(shí)間去學(xué)習(xí)ASP.NET MVC程序，二月份又是中國的新年，長達(dá)半個(gè)月的假期，望回到老家中，在無電腦無網(wǎng)絡(luò)的日子里，能有更多時(shí)間陪伴年邁的父母親。

今天學(xué)習(xí)jQuery的相關(guān)知識，應(yīng)用到圖片上，用戶點(diǎn)一點(diǎn)圖片，放大顯示圖片功能。

創(chuàng)建一個(gè)控制器FebY15Controller：

接下來創(chuàng)建視圖Index:

標(biāo)記1，添加圖片樣式：

標(biāo)記2，添加htm代碼，原片顯示以及放大圖片的占位div標(biāo)簽：

標(biāo)記3，引用jQuery類庫。

標(biāo)記4，編寫jQuery程序：

下面是動態(tài)演示：

本篇中，可以學(xué)到j(luò)Query的click事件。使用標(biāo)簽.樣式類獲取對象(img.thumb)。使用$(this)來代碼對象本身。.attr("scr")獲取圖片src圖片路徑。還有一個(gè)就是.animate()動態(tài)事件。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的圖文高亮滾動切換特效實(shí)例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的圖文高亮滾動切換特效,涉及jquery基于鼠標(biāo)事件針對頁面元素遍歷與動態(tài)操作的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
用Jquery實(shí)現(xiàn)滾動新聞
此文主要用Jquery實(shí)現(xiàn)滾動新聞,Jquery的強(qiáng)大功能，幾行代碼即可實(shí)現(xiàn)，需要的朋友可以參考下
2014-02-02
基于jquery實(shí)現(xiàn)的類似百度搜索的輸入框自動完成功能
自動完成功能是指：類似百度搜索之類的輸入一個(gè)詞的一部分后就自動提示，然后用戶可以選擇，不需要再輸入剩余部分。
2011-08-08
基于Jquery的文字滾動跑馬燈插件(一個(gè)頁面多個(gè)滾動區(qū))
文字逐行或多行滾動跑馬燈插件，基于Jquery。命名為Jquery.RollTitle。支持在一個(gè)頁面聲明多個(gè)滾動區(qū) (就為了要這點(diǎn)才寫了這個(gè))
2010-07-07
為JQuery EasyUI 表單組件增加焦點(diǎn)切換功能的方法
下面小編就為大家?guī)硪黄獮镴Query EasyUI 表單組件增加焦點(diǎn)切換功能的方法。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-04-04
jquery實(shí)現(xiàn)擲骰子小游戲
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)擲骰子小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
jQuery點(diǎn)擊按鈕彈出遮罩層且內(nèi)容居中特效
這篇文章主要介紹了jQuery點(diǎn)擊按鈕彈出遮罩層且內(nèi)容居中特效，需要的朋友可以參考下
2015-12-12
jquery.form.js用法之清空form的方法
這篇文章主要介紹了jquery.form.js清空form的方法,需要的朋友可以參考下
2014-03-03
jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法
下面小編就為大家分享一篇jQuery動態(tài)添加li標(biāo)簽并添加屬性和綁定事件方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
jQuery中[attribute*=value]選擇器用法實(shí)例
這篇文章主要介紹了jQuery中[attribute*=value]選擇器用法,實(shí)例分析了[attribute*=value]選擇器的功能、定義及匹配給定的屬性包含某些值的元素的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12