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

  • html 榧犳爣绉诲姩杩囧幓鐨鏃跺欒浠栨樉绀哄彟澶栦釜鍥剧墖
    绛旓細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浜嬩欢 涔熻兘瀹炵幇浣犺鐨勬晥鏋 ...
  • html榧犳爣绉诲姩鍒拌秴閾炬帴涓婃椂,鏄剧ず鍥剧墖鐨鏁堟灉鎬庝箞鍋氱殑?
    绛旓細document.getElementById('dv'));};};};</script> </head> <body> <p><a id="al" href="#" target="_blank">kill</a></p> </body> </html> 澶嶅埗鍒拌浜嬫湰锛屽彟瀛樹负 html锛寀tf-8鏍煎紡锛涙斁涓 鍥剧墖.jpg 鏀惧湪褰撳墠html鐩綍锛涙祻瑙堝櫒鎵撳紑涔嬪悗锛榧犳爣鏀惧埌kill涓婂氨鏄剧ず鍥剧墖浜嗐
  • HTML璇█涓庝箞璁╅紶鏍囩Щ鍔鍒颁竴寮鍥剧墖涓婃椂鍙樻垚鍙︿竴寮犲浘鐗
    绛旓細闇瑕佺敤鍒癹s鑴氭湰鐨刼nmouseover鍜宱nmouseout绛夈傝繖鏄潪甯哥畝鍗曠殑銆備絾鏄鏋滀綘涓嶄簡瑙s鍙互浣跨敤DreamWeaver涓殑涓椤瑰姛鑳斤細鎻掑叆--鍥惧儚瀵硅薄--榧犳爣缁忚繃鍥惧儚锛屽湪寮瑰嚭鐨勫璇濇涓紝閫夋嫨濂解滃師濮嬪浘鍍忊濆拰鈥滈紶鏍囩粡杩囧浘鍍忊濆氨琛屼簡銆
  • 鍦html涓庝箞鐢╦s瀹炵幇榧犳爣鎸囧悜鍥剧墖鏃跺浘鐗囨斁澶х殑鏁堟灉?(鍏蜂綋瀹炵幇)_鐧惧害鐭...
    绛旓細鍒嗗埆鍐欎竴涓猳nmouseover鍜宱nmouseout浜嬩欢銆傜劧鍚庡湪浜嬩欢閲岄潰鍔犱竴涓猣unction锛屽垎鍒啓鎯宠鏀惧ぇ鐨勫昂瀵稿拰缂╁皬鎴栧鍘熺殑灏哄銆傚叿浣撲唬鐮佸疄鐜板涓嬶細<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="浣鐨勫浘鐗璺緞" style="width:100px;height:100px;" /> <script type="text/javascript"> var ...
  • html css濡備綍瀹炵幇 涓嬮潰鐨 鍥剧墖涓寮濮嬫槸闅愯棌鐨勫綋榧犳爣绉诲姩鍒版枃瀛涓婄殑鏃跺...
    绛旓細<!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> ...
  • HTML涓庝箞鎶婇紶鏍囩Щ鍔ㄤ笂鍘灏辨崲浜嗕竴寮鍥剧墖銆傜Щ鍔ㄥ紑灏卞彉鍥炴潵浜!鏄粈涔堜唬...
    绛旓細.a { background-image: url(xx.jpg);}.a:hover { background-image: url(yy.jpg);}
  • html涓紶鏍囩Щ涓婂幓濡備綍浣垮浘鐗鏀惧ぇ
    绛旓細.gallery img { width: 250px;transition: .1s transform;transform: translateZ(0);} .gallery:hover img { transform: scale(1.5, 1.5);transition: .3s transform;}
  • 璇烽棶鍦html閲岄潰,鎴戞兂鍒朵綔涓涓猟iv,榧犳爣绉鍒颁笂闈㈢殑鏃跺欓紶鏍囧拰鍥剧墖閮藉彉鍖...
    绛旓細<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'" ...
  • html榧犳爣鎮仠鍦ㄦ枃瀛楁樉绀鍥剧墖
    绛旓細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...
  • 鍦html涓庢牱璁剧疆褰榧犳爣鍋滅暀鍦ㄦ煇涓尯鍩,閲岄潰鐨勫浘鐗鍜屾枃瀛楅兘鍙戠敓鏀瑰彉_鐧 ...
    绛旓細鐢╟ss銆俬ttp://www.w3school.com.cn/cssref/selector_hover.asp
  • 扩展阅读:鼠标侧面2个键怎么用 ... 鼠标各个按键图解 ... 鼠标可以移动但是点击无效 ... html鼠标经过图片翻转 ... 鼠标在左上角拉不回来 ... 鼠标左侧两个按键设置 ... 鼠标锁住了按哪个键 ... 鼠标一键宏设置大全 ... 鼠标内部结构组装图 ...

    本站交流只代表网友个人观点,与本站立场无关
    欢迎反馈与建议,请联系电邮
    2024© 车视网