html中鼠标移上去如何使图片放大 HTML中怎么使鼠标悬停在图片上,使图片变大?求代码解释。
\u5728html\u4e2d\u600e\u4e48\u7528js\u5b9e\u73b0\u9f20\u6807\u6307\u5411\u56fe\u7247\u65f6\u56fe\u7247\u653e\u5927\u7684\u6548\u679c\uff1f\uff08\u5177\u4f53\u5b9e\u73b0\uff09\u5206\u522b\u5199\u4e00\u4e2aonmouseover\u548conmouseout\u4e8b\u4ef6\u3002\u7136\u540e\u5728\u4e8b\u4ef6\u91cc\u9762\u52a0\u4e00\u4e2afunction\uff0c\u5206\u522b\u5199\u60f3\u8981\u653e\u5927\u7684\u5c3a\u5bf8\u548c\u7f29\u5c0f\u6216\u590d\u539f\u7684\u5c3a\u5bf8\u3002
\u5177\u4f53\u4ee3\u7801\u5b9e\u73b0\u5982\u4e0b\uff1a
var img = document.getElementById('img');
function bigger(){ img.style.width = '400px'; img.style.height = '400px'; }
function smaller(){ img.style.width = '100px'; img.style.height = '100px'; }
\u6269\u5c55\u8d44\u6599\uff1a
HTML 4.0 \u7684\u65b0\u7279\u6027\u4e4b\u4e00\u662f\u6709\u80fd\u529b\u4f7f HTML \u4e8b\u4ef6\u89e6\u53d1\u6d4f\u89c8\u5668\u4e2d\u7684\u52a8\u4f5c\uff08action\uff09\uff0c\u6bd4\u5982\u5f53\u7528\u6237\u70b9\u51fb\u67d0\u4e2a HTML \u5143\u7d20\u65f6\u542f\u52a8\u4e00\u6bb5 JavaScript\u3002\u4e0b\u9762\u662f\u4e00\u4e2a\u5c5e\u6027\u5217\u8868\uff0c\u8fd9\u4e9b\u5c5e\u6027\u53ef\u63d2\u5165 HTML \u6807\u7b7e\u6765\u5b9a\u4e49\u4e8b\u4ef6\u52a8\u4f5c\u3002
\u53c2\u8003\u8d44\u6599\uff1a
JavaScript\u5b98\u65b9API\u63a5\u53e3-GlobalEventHandlers.onmouseover
JavaScript\u5b98\u65b9API\u63a5\u53e3-GlobalEventHandlers.onmouseout
W3cSchool-JavaScript \u4e8b\u4ef6\u53c2\u8003\u624b\u518c
window.onload = function(){ var img = document.getElementById("imgTest"); if (document.addEventListener){ img.addEventListener("mouseover",doMouseover,false); img.addEventListener("mouseout",doMouseout,false); } else if(document.attachEvent){ img.attachEvent("mouseover",doMouseover); img.attachEvent("mouseout",doMouseout); } else{ img.onmouseover = doMouseover; img.onmouseout = doMouseout; }}function doMouseover(){ this.width = this.width * 1.5; this.height = this.height * 1.5;}function doMouseout(){ this.width = this.width / 1.5; this.height = this.height / 1.5;}
.gallery img {width: 250px;
transition: .1s transform;
transform: translateZ(0);
}
.gallery:hover img {
transform: scale(1.5, 1.5);
transition: .3s transform;
}
js
绛旓細gif"]document.getElementById("pic").src=document.getElementById("pic").src==imgSrc[0]?imgSrc[1]:imgSrc[0];} </script> <img src="images/denglu6_12.gif" width="68" height="49" onkeyup="newimgFun()" > 杩樻湁涓绉嶆柟娉曟槸榧犳爣绉鍏ョЩ鍑轰簨浠 hover浜嬩欢 涔熻兘瀹炵幇浣犺鐨勬晥鏋 ...
绛旓細document.getElementById('dv'));};};};</script> </head> <body> <p><a id="al" href="#" target="_blank">kill</a></p> </body> </html> 澶嶅埗鍒拌浜嬫湰锛屽彟瀛樹负 html锛寀tf-8鏍煎紡锛涙斁涓 鍥剧墖.jpg 鏀惧湪褰撳墠html鐩綍锛涙祻瑙堝櫒鎵撳紑涔嬪悗锛榧犳爣鏀惧埌kill涓婂氨鏄剧ず鍥剧墖浜嗐
绛旓細闇瑕佺敤鍒癹s鑴氭湰鐨刼nmouseover鍜宱nmouseout绛夈傝繖鏄潪甯哥畝鍗曠殑銆備絾鏄鏋滀綘涓嶄簡瑙s鍙互浣跨敤DreamWeaver涓殑涓椤瑰姛鑳斤細鎻掑叆--鍥惧儚瀵硅薄--榧犳爣缁忚繃鍥惧儚锛屽湪寮瑰嚭鐨勫璇濇涓紝閫夋嫨濂解滃師濮嬪浘鍍忊濆拰鈥滈紶鏍囩粡杩囧浘鍍忊濆氨琛屼簡銆
绛旓細鍒嗗埆鍐欎竴涓猳nmouseover鍜宱nmouseout浜嬩欢銆傜劧鍚庡湪浜嬩欢閲岄潰鍔犱竴涓猣unction锛屽垎鍒啓鎯宠鏀惧ぇ鐨勫昂瀵稿拰缂╁皬鎴栧鍘熺殑灏哄銆傚叿浣撲唬鐮佸疄鐜板涓嬶細<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="浣鐨勫浘鐗璺緞" style="width:100px;height:100px;" /> <script type="text/javascript"> var ...
绛旓細<!DOCTYPE html><html><head><meta charset=utf-8><title>dd</title><style> li img{ display:none; } li:hover img{ display:block; }</style></head><body><ul><li> <div>swwwwwwww</div> <img src="aa.jpg" /></li></ul></body></html> ...
绛旓細.a { background-image: url(xx.jpg);}.a:hover { background-image: url(yy.jpg);}
绛旓細.gallery img { width: 250px;transition: .1s transform;transform: translateZ(0);} .gallery:hover img { transform: scale(1.5, 1.5);transition: .3s transform;}
绛旓細<div style="cursor:hand" onmouseover="theimg.src='b.jpg'" onmouseout="theimg.src='a.jpg'"> <img id="theimg" src="a.jpg"> </div> 鍏跺疄濡傛灉鍙槸涓涓鍥剧墖锛屾病鏈夊繀瑕佸仛鎴恉iv锛岀洿鎺ヨ繖鏍峰啓灏辫浜嗭細<img src="a.jpg" style="cursor:hand" onmouseover="this.src='b.jpg'" ...
绛旓細1銆侀鍏堣緭鍏ヤ唬鐮侊細<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>榧犳爣鎮仠鏂囧瓧涓婃樉绀鍥剧墖</title> 2...
绛旓細鐢╟ss銆俬ttp://www.w3school.com.cn/cssref/selector_hover.asp