js實(shí)現(xiàn)雙擊圖片放大單擊縮小的方法
更新時(shí)間：2015年02月17日 11:56:45 作者：代碼家園
這篇文章主要介紹了js實(shí)現(xiàn)雙擊圖片放大單擊縮小的方法,涉及js操作圖片及onclick與ondblclick事件的使用技巧,需要的朋友可以參考下
本文實(shí)例講述了js實(shí)現(xiàn)雙擊圖片放大單擊縮小的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：
復(fù)制代碼 代碼如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>雙擊圖片放大，單擊縮小</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function enlargeImage1(){
image1.height="300"
}
function dropImage1(){
image1.height="150"
}
// End -->
</script>
<table>
<tr><td align="center">
<img src="/images/3.jpg" height="150" name="image1" ondblclick="enlargeImage1()" onclick="dropImage1()" style="cursor:pointer;"/>
</td></tr>
</table>
雙擊圖片試試預(yù)覽效果。
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>雙擊圖片放大，單擊縮小</title>
</head>
<body>
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
function enlargeImage1(){
image1.height="300"
}
function dropImage1(){
image1.height="150"
}
// End -->
</script>
<table>
<tr><td align="center">
<img src="/images/3.jpg" height="150" name="image1" ondblclick="enlargeImage1()" onclick="dropImage1()" style="cursor:pointer;"/>
</td></tr>
</table>
雙擊圖片試試預(yù)覽效果。
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
- js放大鏡放大圖片效果
- JS簡(jiǎn)單的圖片放大縮小的兩種方法
- JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果
- 鼠標(biāo)滑上去后圖片放大浮出效果的js代碼
- JavaScript圖片放大鏡效果代碼[代碼比較簡(jiǎn)單]
- JS實(shí)現(xiàn)點(diǎn)擊圖片在當(dāng)前頁(yè)面放大并可關(guān)閉的漂亮效果
- 移動(dòng)端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實(shí)現(xiàn)
- JavaScript 圖片放大效果及代碼說(shuō)明
- js 圖片放大效果 修正版
- js實(shí)現(xiàn)用滾動(dòng)條來(lái)放大縮小圖片的代碼
- JS與CSS3實(shí)現(xiàn)圖片響應(yīng)鼠標(biāo)移動(dòng)放大效果示例
相關(guān)文章
dedecms頁(yè)面如何獲取會(huì)員狀態(tài)的實(shí)例代碼
下面小編就為大家?guī)?lái)一篇dedecms頁(yè)面如何獲取會(huì)員狀態(tài)的實(shí)例代碼。一起跟隨小編過(guò)來(lái)看看吧，希望對(duì)大家有所幫助。2016-03-03
這篇文章主要介紹了jQuery獲取隨機(jī)顏色的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編來(lái)學(xué)習(xí)吧2018-05-05
基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁(yè)處理和插件JSTree的使用
本文給大家介紹基于BootStrap Metronic開(kāi)發(fā)框架經(jīng)驗(yàn)小結(jié)【二】列表分頁(yè)處理和插件JSTree的使用，介紹頁(yè)面內(nèi)容常用到的數(shù)據(jù)分頁(yè)處理，以及Bootstrap插件JSTree的使用，非常具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧2016-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序頁(yè)面上下滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
一文教你用JavaScript制作個(gè)簡(jiǎn)單的大轉(zhuǎn)盤游戲
日常生活中，我們經(jīng)常會(huì)見(jiàn)到形形色色的抽獎(jiǎng)活動(dòng)，例如九宮格、大轉(zhuǎn)盤等等……本文就來(lái)教大家如何利用JavaScript制作個(gè)簡(jiǎn)單的大轉(zhuǎn)盤游戲，感興趣的可以了解一下2023-02-02
JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁(yè)地震撕裂效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)模擬百度搜索“2012世界末日”網(wǎng)頁(yè)地震撕裂效果代碼,引入第三方插件實(shí)現(xiàn)頁(yè)面的抖動(dòng)、撕裂及圖片等效果,需要的朋友可以參考下2015-10-10
JS實(shí)現(xiàn)將人民幣金額轉(zhuǎn)換為大寫(xiě)的示例代碼
本篇文章主要是對(duì)使用JS實(shí)現(xiàn)將人民幣金額轉(zhuǎn)換為大寫(xiě)的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-02-02
在服務(wù)器端的單元測(cè)試中，都有各種各樣的測(cè)試框架，在JavaScript中現(xiàn)在也有一些很優(yōu)秀的框架，但在本文中，我們將自己動(dòng)手一步步來(lái)實(shí)現(xiàn)一個(gè)簡(jiǎn)單的單元測(cè)試框架2012-04-04
Span元素的width屬性無(wú)效果原因及解決方案2010-01-01
在Twitter上的一些有趣的討論中, 我發(fā)現(xiàn)人們對(duì)于Web應(yīng)用和站點(diǎn)對(duì)javascript的依賴普遍存在一種疑惑. 這種疑惑一直都存在, 而對(duì)我而言, 這個(gè)問(wèn)題隨著瀏覽技術(shù)的飛躍發(fā)展而集中爆發(fā)了2013-10-10