当鼠标悬停在某张图片上的时候，怎么把当前图片显示到另外一个div中，类似于淘宝商品浏览！ 鼠标移到图片上在上方显示一个大点图片，类似于淘宝商品展示那样...
html \u5f53\u9f20\u6807\u505c\u7559\u5728\u56fe\u7247\u4e0a \u663e\u793a\u53e6\u5916\u4e00\u4e2adiv\u90a3\u4e2a\u900f\u660e\u7684\u76d2\u5b50\u662f\u5355\u72ec\u5199\u7684\uff0c\u5199\u597d\u540e\uff0c\u4f7f\u7528\u7edd\u5bf9\u5b9a\u4f4d\u5c06\u5176\u79fb\u5230\u56fe\u7247\u76d2\u5b50\u533a\u57df\u5916\uff08\u6bd4\u5982\u8bf4left:9999px;\uff09\uff0c\u56fe\u7247\u8981\u6c42\u4f7f\u7528overflow:hidden;\uff0c\u8fd9\u6837\u521a\u5f00\u59cb\u7684\u65f6\u5019\u5c31\u770b\u4e0d\u89c1\u6587\u5b57\uff0c
\u7136\u540e\u7ed9\u56fe\u7247\u6dfb\u52a0hover\u4f2a\u7c7b\uff0c\u6539\u6210\u4f60\u9700\u8981\u5b9a\u4f4d\u7684\u503c\uff0c\u9f20\u6807\u79fb\u4e0a\u53bb\u663e\u793a\u51fa\u6765\uff0c\uff0c\u8981\u6162\u6162\u4e0b\u6ed1\u51fa\u6765\u6216\u8005\u5176\u4ed6\u52a8\u6001\u51fa\u6765\uff0c\u4f7f\u7528css\u7684\u8fc7\u6e21\u6548\u679c\u5c31\u884c\u4e86
\u70b9\u53f3\u952e \u5c5e\u6027\u5c31\u6709\u4ee3\u7801\u4e86
<style type="text/css">
div.up{
width:350px;
height:300px;
background:#CCCCCC;
overflow:hidden;
}
div.up img{width:100%;height:100%;}
#down img{
width:60px;
height:100px;
opacity:0.3;
filter:alpha(opacity=30);
}
#down img.change_image{opacity:1;filter:alpha(opacity=100);}
div.down{
width:350px;
height:100px;
}
</style>
<div class="up" id="up"><img src="参考/7IPHCN5NZLFVRAI9JAYA.png" width="100%" height="100%"></div>
<div class="down" id="down">
<table>
<tr>
<td><img src="参考/7IPHCN5NZLFVRAI9JAYA.png"></td>
<td><img src="参考/TA4XYN36997HAJ299CXZ.png" /></td>
<td><img src="参考/VP8KQ2FGN9MYHLLS6DDE.png" /></td>
<td><img src="参考/ZT8IANM6E7C46DRT8L64.png" /></td>
<td><img src="参考/7IPHCN5NZLFVRAI9JAYA.png" /></td>
</tr>
</table>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#up img').attr('src',$('#down img').eq(0).attr('src'));//打开即把第一张图地址给#up img
$('#down img').eq(0).addClass("change_image");//打开即把第一个缩略图选中
$('#down img').hover(function(){
$('#down img').removeClass("change_image");//先清除所有选中
$(this).addClass("change_image");//当前图片选中
$('#up img').attr('src',$(this).attr('src'));//当前图片地址给#up img
});
});
</script>
写了个简单的，凑合着用。你可以去一些特效网站，看看人家是怎么写的，借鉴一些思路。
绛旓細1. 閫氳繃缂栧啓JavaScript鎴杍Query鑴氭湰锛屽彲浠ュ湪榧犳爣鎮仠(onmouseover)鏃舵樉绀轰竴涓挱鏀炬寜閽眰(div)锛岃屽湪榧犳爣绉诲紑(onmouseout)鏃堕殣钘忚鎸夐挳灞傘2. 鍒╃敤CSS鐨:hover浼被锛屽彲浠ュ湪榧犳爣鎸囬拡鎮仠鍦ㄥ厓绱犱笂鏃朵负璇ュ厓绱犳坊鍔犵壒瀹氱殑鏍峰紡銆備互涓嬫槸涓涓畝鍗曠殑CSS瀹炵幇妗堜緥锛屽畠灞曠ず浜嗗浣曞湪榧犳爣鎮仠鍦ㄥ浘鐗囦笂鏃鏄剧ず鎾斁鍥炬爣锛歚``...
绛旓細1銆佹柟娉曚竴锛屽埄鐢╤tml鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с褰撻紶鏍hover鍦ㄨ鏍囩鍐呭涓婃椂锛娴忚鍣ㄥ睍绀哄嚭璇ユ爣绛剧殑title鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ height:100px;width:100px;background-color: aqua;} 鏂囧瓧鍐呭鏂囧瓧鍐呭 2銆佹柟娉曚簩锛屽埄鐢╟ss鐨勪吉绫籬over锛屼互鍙婃樉绀洪殣钘忓睘鎬isplay锛屾潵瀹炵幇濡備笅锛.c...
绛旓細榧犳爣鎮仠鐨勬剰鎬濇槸鎸囷紝褰撻紶鏍囧湪缃戦〉鐨勯儴鍒嗗浘鏍囥佹枃瀛楁垨鑰鍥剧墖涓鍋滅暀鐨勬椂鍊欙紝浼氭湁閮ㄥ垎鍐呭寮瑰嚭鐭ワ紝妗ｄ粠杩欎釜鍥炬爣銆佹枃瀛楁垨鑰呭浘鐗囦笂绉诲紑榧犳爣鍚庯紝寮瑰嚭鐨勫唴瀹硅嚜鍔ㄧ缉鍥炪傚埄鐢╤tml鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ ...
绛旓細1銆佸彲浠ュ皢鍥剧墖鏀惧ぇ鐨勫鍣ㄦ垨鍏冪礌璁剧疆涓篺ixed锛岃繖鏍峰氨鍙互褰撻紶鏍囨偓鍋滄椂锛瀹瑰櫒灏嗕細瑕嗙洊鍦ㄥ叾浠栧浘鐗囦笂鏂癸紱2銆佸皢鍥剧墖鏀惧ぇ鐨勫鍣ㄨ缃负鍙互绉诲姩锛岃繖鏍峰彲浠ヨ瀹瑰櫒闅忕潃榧犳爣绉诲姩鑰岀Щ鍔紝浠庤屽皢鍏朵粬鍥剧墖鎸′綇鐨勬儏鍐甸槻姝紱3銆佺粰鍥剧墖鏀惧ぇ瀹瑰櫒娣诲姞z-index锛屼娇鍏跺湪鍏朵粬椤甸潰鍏冪礌涔嬩笂锛屼粠鑰屽彲浠ヨ鐩栧叾浠栧浘鐗囷紱4銆佷娇鐢╟ss璁剧疆涓涓...
绛旓細}div.down{ width:350px; height:100px;}
绛旓細鍔ㄧ敾鐗规晥銆俬tml閲鍥剧墖涓婇紶鏍囨偓鍋灏变細鏈夋枃瀛楀睘浜庡姩鐢荤壒鏁堛傞紶鏍囨偓鍋滅殑鎰忔濇槸鎸褰撻紶鏍囧湪缃戦〉鐨勯儴鍒嗗浘鏍囥佹枃瀛楁垨鑰呭浘鐗囦笂鍋滅暀鐨勬椂鍊欙紝浼氭湁閮ㄥ垎鍐呭寮瑰嚭锛屾。浠庤繖涓浘鏍囥佹枃瀛楁垨鑰呭浘鐗囦笂绉诲紑榧犳爣鍚庯紝寮瑰嚭鐨勫唴瀹硅嚜鍔ㄧ缉鍥炪
绛旓細5.鐒跺悗锛岃缃氳繃浜嬩欢锛屽垏鎹㈠埌鍙︿竴寮犲浘鐗锛屽氨浼氫骇鐢熼紶鏍囧垏鎹㈠浘鐗囩殑鏁堟灉銆6.浣嗘槸榧犳爣涓鏃︾寮锛屽氨瑕佸垏鎹㈠洖鍘熷浘绱犳潗锛屾墍浠ュ啀娣诲姞涓涓猯eave浜嬩欢锛岃繖鏍风寮鍚庡氨浼氳浆鍖栨垚鍘熷浘銆7.濡傚浘锛岀幇鍦ㄦ垜鐨榧犳爣鍦ㄥ浘鐗囦笂锛屽氨鍙樻垚浜唗wopicture銆俬tml榧犳爣绉诲姩鍒拌秴閾炬帴涓鏃讹紝鏄剧ず鍥剧墖鐨勬晥鏋滄庝箞鍋氱殑锛熼渶瑕佸噯澶囩殑鏉愭枡鍒嗗埆鏈夛細鐢佃剳...
绛旓細:hover 浼被鍦榧犳爣绉诲埌鍏冪礌涓婃椂鍚戞鍏冪礌娣诲姞鐗规畩鐨勬牱寮忋傝鏄 杩欎釜浼被搴旂敤澶勪簬鈥鎮仠鐘舵佲濈殑鍏冪礌銆傛偓鍋滃畾涔変负鐢ㄦ埛鎸囩ず浜嗕竴涓厓绱犱絾娌℃湁灏嗗叾婵娲汇傚姝ゆ渶甯歌鐨勪緥瀛愭槸灏嗛紶鏍囨寚閽堢Щ鍒 HTML 鏂囨。涓竴涓秴閾炬帴鐨勮竟鐣岃寖鍥村唴銆傜悊璁轰笂锛屽叾浠栧厓绱犱篃鍙互澶勪簬鎮仠鐘舵侊紝涓嶈繃 CSS 娌℃湁瀹氫箟绌剁珶鏄摢浜涘厓绱犮傛縺娲荤殑...
绛旓細榧犳爣鎮仠鐨勬剰鎬濇槸鎸囷紝褰撻紶鏍囧湪缃戦〉鐨勯儴鍒嗗浘鏍囥佹枃瀛楁垨鑰鍥剧墖涓鍋滅暀鐨勬椂鍊欙紝浼氭湁閮ㄥ垎鍐呭寮瑰嚭鐭ワ紝妗ｄ粠杩欎釜鍥炬爣銆佹枃瀛楁垨鑰呭浘鐗囦笂绉诲紑榧犳爣鍚庯紝寮瑰嚭鐨勫唴瀹硅嚜鍔ㄧ缉鍥炪傚埄鐢╤tml鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴с傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歞iv{ ...
绛旓細<IMG id=logo alt=logo src="images/logo.png"> 杩欐牱褰撻紶鏍囨偓鍋滃湪鍥剧墖涓婇潰灏变細娴幇alt=鐨勫唴瀹癸紝涔熷氨鏄痩ogo
