鼠标悬停特效代码怎么写，鼠标放在小图片上旁边显示一张大图片？ 在html中怎么用js实现鼠标指向图片时图片放大的效果？（具...
\u6211\u5148\u5728\u963f\u91cc\u5e97\u94fa\u91cc\u9762\u6dfb\u52a0\u4e00\u4e2a\u9f20\u6807\u60ac\u505c\u65f6\u5019 \u56fe\u7247\u653e\u5927\u7684\u6548\u679c\uff0c\u8bf7\u95ee\u4ee3\u7801\u600e\u4e48\u5199\uff1f\u6216\u8005\u54ea\u91cc\u6709\u6559\u7a0b\uff1f\u65b0\u624b\u6c42\u6559\uff01\u4f60\u5230\u6dd8\u5b9d\u53bb\u770b
\u8fd9\u4e2a\u5728\u6dd8\u5b9d\u6709\u89c6\u9891\u6559\u7a0b\u3002
\u5b9e\u5728\u4e0d\u4f1a\u3002\u53bb\u6dd8\u5b9d\u8bba\u575b\u53d1\u4e2a\u8d34\u8ba9\u522b\u4eba\u6559\u4f60\u3002
\u4f60\u662f\u4e0d\u662f\u60f3\u76f4\u63a5\u70b9\u4fc3\u9500\u6a21\u5757\u4e2d\u7684\u56fe\u7247\u5c31\u53ef\u4ee5\u76f4\u63a5\u8fde\u63a5\u5230\u5546\u54c1\uff1f
\u4f60\u5148\u628a\u56fe\u7247\u5f04\u5230\u6a21\u7248\u4e2d \u7136\u540e\u5f04\u8d85\u8fde\u63a5 \u662f\u5f04\u5728\u56fe\u7247\u4e0a \u6bd4\u5982\u4ee5\u524d\u662f\u5f04\u5728\u5b57\u4e0a \u73b0\u5728\u4f60\u62c9\u84dd\u56fe\u7247\u4e0a\u8d85\u8fde\u63a5
\u5475\u5475 \u6211\u6ca1\u5f04\u8fc7\u6dd8\u5b9d \u56e0\u4e3a\u6211\u670b\u53cb\u4e0a\u6b21\u4e5f\u662f\u8fd9\u6837\u7684 \u6240\u4ee5\u6211\u77e5\u9053\u600e\u4e48\u5f04 \u4f46\u6211\u4e0d\u4f1a\u5b9e\u9645\u64cd\u4f5c \u62b1\u6b49\u554a~~
\u5176\u5b9e\u6dd8\u5b9d\u4e0a\u6709\u8fd9\u4e2a\u89c6\u9891\u6559\u7a0b\u7684 \u4f60\u53bb\u770b\u770b\u4e48~~ \u6211\u4e5f\u53ea\u80fd\u8fd9\u4e48\u7ed9\u4f60\u8bf4
\u5e0c\u671b\u5bf9\u4f60\u80fd\u6709\u5e2e\u52a9\uff0c\u795d\u4f60\u597d\u8fd0\u5662~!
\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
代码有bug，修改后如下：
需要注意，拷贝下面这段代码，保存为 html后缀名的文件；需要自己在相同的目录下，放置两张图片，小图片.jpg 大图片.jpg
效果如下图：当鼠标悬停在小图片上面的时候，会显示大图片；鼠标移出，隐藏大图片。
问题：定位需要读者自己去实现一下吧，偷懒了。感谢楼上分享!
<!doctype html>
<html>
<head>
<meta charset=utf-8>
</head>
<body>
你要显示特效的html
<img src="小图片.jpg" width="200px" height="200px" id="littleimg" onmouseout="hoverHiddendiv()" onmouseenter="hoverShowDiv()" />
<div style="width:200px;height:80px;border:1px solide #aaccff;display:none;" id="divHover" >
大图片显示如下
<img src="大图片.jpg" width="500px" height="300px" id="bigimg" />
</div>
<script type="text/javascript">
let divHover = document.getElementById("divHover");
function hoverShowDiv() {
console.log("显示大图片");
divHover.style.display = "block";
divHover.style.top = document.getElementById("littleimg").style.top + 10;
divHover.style.left = document.getElementById("littleimg").style.left + 10;
}
function hoverHiddendiv() {
console.log("显示小图片");
divHover.style.display = "none";
}
</script>
</body>
</html>
你要显示特效的html
<div style="width:200px;height:80px;border:1px solide #aaccff;" id="divHover" >
写出你要悬停后出现的效果
<img src="~/images/jalendar-wood-bg.png" width="100px" height="200px" id="bigimg" />
</div>
写好后进行隐藏 style="display:none;"
然后当你鼠标悬停在图片上的时候触发鼠标移动上去事件onmouseup
和鼠标移开事件
<img src="~/images/jalendar-wood-bg.png" id="smallimg" width="10px" height="20px" onmouseout="hoverHiddendiv()"
onmouseup="hoverShowDiv()" />
最后就是触发的方法hoverShowDiv()与hoverHiddendiv()在js中定义
<script type="text/javascript">
function hoverShowDiv() {
document.getElementById("divHover").style.display = block;
document.getElementById("divHover").style.top = document.getElementById("smallimg").style.top + 10;
document.getElementById("divHover").style.left = document.getElementById("smallimg").style.left + 10;
}
function hoverHiddendiv() {
document.getElementById("divHover").style.display = none;
}
</script>
图片中鼠标悬停特效代码：<img src="~/images/jalendar-wood-bg.png" id="smallimg" width="10px" height="20px" onmouseout="hoverHiddendiv()"onmouseup="hoverShowDiv()" />。
鼠标悬停的意思是指，当你的鼠标在网页的部分图标、文字或者图片上停留的时候，会有部分内容弹出，档从这个图标、文字或者图片上移开鼠标后，弹出的内容自动缩回。
举例：
鼠标悬停在百度首页（http://zhidao.baidu.com/）的文字栏，即可有下拉菜单弹出，移开鼠标，即可隐藏，这就是鼠标悬停。
绛旓細鎴戝鐢ㄧ殑鏄 Macromedia Dreamweaver 8 姝ラ锛氭彃鍏モ啋鍥惧儚瀵硅薄鈫榧犳爣缁忚繃鍥惧儚 鎶婂師濮<鍥惧儚>鍜<榧犳爣缁忚繃鍥惧儚>杈撳叆濂斤紝鎸夌‘瀹氬氨琛屼簡~
绛旓細瀹炵幇榧犳爣鎮仠鏄剧ず鏂囧瓧锛宧tml涓娇鐢╰itle灞炴у氨鍙疄鐜版樉绀烘枃瀛楃殑鏁堟灉锛杩欎釜灞炴ц繕鏄瘮杈冨疄鐢ㄧ殑锛屼綘鍙互鍙傝冧笅 hello 褰撻紶鏍囨偓鍋滃湪 hello涓婁竴浼氬氨浼氭湁鏂囧瓧 "杩欓噷鏄樉绀虹殑鏂囧瓧" 鏄剧ず銆
绛旓細閫氳繃榧犳爣鐨勪簨浠舵潵婵鍙戯紒闅忎究鎵句簡浜榧犳爣鐗规晥鐨勭綉绔欙細 http://www.wangqi.com/c262.aspxjs榧犳爣浜嬩欢澶у叏 璧勬枡鏉ユ簮锛 http://hsyd.javaeye.com/blog/382930onClick IE3|N2|O3 榧犳爣鐐瑰嚮浜嬩欢锛屽鐢ㄥ湪鏌愪釜瀵硅薄鎺у埗鐨勮寖鍥村唴鐨勯紶鏍囩偣鍑 onDblClick IE4|N4|O 榧犳爣鍙屽嚮浜嬩欢 onMouseDown IE4|N4|O 榧犳爣涓婄殑...
绛旓細2.濉啓鏍囬鍜鐗规晥瑕佹樉绀虹殑鎵鍦ㄩ〉闈傝寰楀湪鈥滄樉绀衡濆墠鈭氬摝銆 3.鍒囨崲鍒浠ｇ爜妗嗐傚皢涓嬮潰鐨勪唬鐮佸鍒惰繘鍘,鐒跺悗鍐嶅垏鎹㈠埌缂栬緫妗嗛瑙,濡傛灉鑳界湅鍒榧犳爣鏁堟灉,璇存槑浠ｇ爜姝ｇ‘,鎻愪氦鍗冲彲銆 <DIV> </DIV><DIV><STYLE type=text/css> BODY{cursor:url(http://webme.bokee.com/inc/mouse001.ani);} A {CURSOR: url(http:...
绛旓細鍙嶇紪璇戝嚭鏉ョ殑鏂规硶寰堝彲鐖 鍏堜竴涓狹C锛孧C涓嬫湁8甯э紝姣忓抚閮藉湪甯т笂鏈塻top()銆傜劧鍚庢瘡甯т竴涓寜閽紝鎸夐挳浣嶇疆闅忎究鏀撅紝鍦ㄦ寜閽笂鏈夊涓浠ｇ爜锛歰n (rollOver){ gotoAndStop(n);} 鎰忔濇槸濡傛灉榧犳爣绉诲姩鍒版寜閽笂鍒欒烦鍒扮n甯у苟涓斿仠姝㈠湪閭ｅ抚涓娿俷鐨勮寖鍥存槸1-8銆傚懙鍛碉紝寰堝彟绫伙紝寰堢洿鐧界殑鏂规硶銆
绛旓細鍏堝鍒榧犳爣鐗规晥鐨浠ｇ爜---瑁呮壆绌洪棿---澧炲噺妯″潡--鏂板缓妯″潡--鏂板缓flash妯″潡--鎶婁唬鐮佺矘璐磋繘鍘-- 鏇村璁剧疆閭ｈ竟璁剧疆涓嬶紝 杈规鏃犮
绛旓細-_-銆俿orry锛佸鏋滃府涓嶅埌蹇欑殑璇濅笉瑕佽鎬佹垜鍙槸涓皬鐢熻屽凡銆佸叾瀹炴窐瀹濈綉搴楃殑瑁呬慨缁忚繃浜嗗閲嶇殑澶勭悊銆佺敤杩欑鏁堟灉鏄笉鍙互鐨勩佸缓璁垜涓嶆槸灏忕唺001涓嶈鐢ㄨ繖绉嶆柟娉曪紝娣樺疂鐨勫簵閾哄彲浠ョ敤鍏朵粬鐨勬晥鏋滄潵銆
绛旓細鎶榧犳爣鏀涓婃潵璇曡瘯 <layer name="nstip" width="1000px" bgColor="seashell"></layer> <SCRIPT language="JavaScript"> <!-- if (!document.layers&&!document.all)event="test"function helpor_net_show(current,e,text){ if (document.all&&document.readyState=="complete"){ document...
绛旓細<STYLE type=text/css> BODY{cursor:url('榧犳爣骞冲父淇濇寔鏃舵墍鏄剧ず鐨勫浘妗坲rl鍦板潃');} A {CURSOR: url('榧犳爣鐐瑰嚮閾炬帴鐩爣鏃舵墍鏄剧ず鐨勫浘妗坲rl鍦板潃');} </STYLE> 瀹夎浣跨敤鐗规晥榧犳爣鏃剁殑娉ㄦ剰浜嬮」锛氭坊鍔爁lash榧犳爣婧愪唬鐮侊紝蹇呴』璐村湪宸茬粡鏈夊唴瀹圭殑闈㈡澘閲屻傚鏋滄槸鏂板鍔犵殑闈㈡澘锛岃嚦灏戝厛瑕佸湪闈㈡澘閲屽啓涓婁竴涓瓧鎴栨槸...
绛旓細绗竴绉嶏細鍙互鐢ㄩ紶鏍囪窡闅忓湴鍧锛堜唬鐮侊級鍦≦Q绌洪棿鍒涘缓flash榧犳爣璺熼殢妯″潡锛屾斁鍒绌洪棿棣栭〉鍏跺畠妯″潡鐨勯《灞傦紝杩欐牱鑷繁鎴栨槸鏉ョ┖闂寸殑浜洪紶鏍囩Щ鍒版ā鍧椾笂鏃跺氨浼氬嚭鐜拌窡闅忕壒銆俬ttp://zhidao.baidu.com/question/217835064.html 绗簩绉嶏細濡傛灉鎯宠榧犳爣绂诲紑涓婚〉妯″潡锛屽湪鏃ュ織鍏朵粬绛夐噷闈㈡湁鐗规晥鐨勮瘽锛岄偅灏卞彧鑳戒娇鐢≦Q绌洪棿榧犳爣浠ｇ爜...
