js實現(xiàn)雙擊圖片放大單擊縮小的方法
更新時間:2015年02月17日 11:56:45 作者:代碼家園
這篇文章主要介紹了js實現(xiàn)雙擊圖片放大單擊縮小的方法,涉及js操作圖片及onclick與ondblclick事件的使用技巧,需要的朋友可以參考下
本文實例講述了js實現(xiàn)雙擊圖片放大單擊縮小的方法。分享給大家供大家參考。具體實現(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>
希望本文所述對大家的javascript程序設(shè)計有所幫助。
您可能感興趣的文章:
- js放大鏡放大圖片效果
- JS簡單的圖片放大縮小的兩種方法
- JS實現(xiàn)鼠標(biāo)移動到縮略圖顯示大圖的圖片放大效果
- 鼠標(biāo)滑上去后圖片放大浮出效果的js代碼
- JavaScript圖片放大鏡效果代碼[代碼比較簡單]
- JS實現(xiàn)點(diǎn)擊圖片在當(dāng)前頁面放大并可關(guān)閉的漂亮效果
- 移動端點(diǎn)擊圖片放大特效PhotoSwipe.js插件實現(xiàn)
- JavaScript 圖片放大效果及代碼說明
- js 圖片放大效果 修正版
- js實現(xiàn)用滾動條來放大縮小圖片的代碼
- JS與CSS3實現(xiàn)圖片響應(yīng)鼠標(biāo)移動放大效果示例
相關(guān)文章
關(guān)于事件mouseover ,mouseout ,mouseenter,mouseleave的區(qū)別
mouseover ,mouseout ,mouseenter,mouseleave,都是鼠標(biāo)點(diǎn)擊而觸發(fā)的事件,各自代表什么意思,有哪些區(qū)別呢?下面跟著腳本之家小編一起看看吧2015-10-10JS踩坑實戰(zhàn)之19位數(shù)Number型精度丟失問題詳析
前幾天測試接口功能的時候,發(fā)現(xiàn)了一個奇怪的問題,下面這篇文章主要給大家介紹了關(guān)于JS?Number型精度丟失問題的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10JavaScript函數(shù)及其prototype詳解
這篇文章主要介紹了JavaScript函數(shù)及其prototype詳解的相關(guān)資料,需要的朋友可以參考下2023-03-03javascript超過容器后顯示省略號效果的方法(兼容一行或者多行)
下面小編就為大家?guī)硪黄猨avascript超過容器后顯示省略號效果的方法(兼容一行或者多行)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07