html中图片以中心放大的代码 html5 鼠标放在下面的图片时，会放大到中间就像图片呢样。...
html\u4e2d\u56fe\u7247\u4ee5\u4e2d\u5fc3\u653e\u5927\u7684\u4ee3\u7801html\u4e2d\u56fe\u7247\u4ee5\u4e2d\u5fc3\u653e\u5927\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
<div style=" width:300px; height:300px;margin-left:auto;
margin-right:auto; overflow:hidden; margin-top:100px;">
<img id="img" onmouseover="bigger()" onmouseout="smaller()"
src="http://mat1.gtimg.com/www/images/qq2012/guanjia2.png"
style="cursor:pointer;width:300px;height:300px;
transition:all 1s ease-out 0s; perspective-origin:bottom;"/>
var img = document.getElementById('img');
function bigger(){
img.style.width = '400px';
img.style.height = '400px';
img.style.marginTop = "-50px";
img.style.marginLeft = "-50px";
}
function smaller(){
img.style.width = '300px';
img.style.height = '300px';
img.style.marginTop = "0px";
img.style.marginLeft = "0px";
}
\u6269\u5c55\u8d44\u6599\uff1a
\u5728html\u4e2d\u7528js\u5b9e\u73b0\u9f20\u6807\u6307\u5411\u56fe\u7247\u65f6\u56fe\u7247\u653e\u5927\u7684\u6548\u679c\u7684\u4ee3\u7801\u5982\u4e0b\uff1a
<img id="img" onmouseover="bigger()" onmouseout="smaller()"
src="\u4f60\u7684\u56fe\u7247\u8def\u5f84" style="width:100px;height:100px;" />
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'; }
*{
margin: 0;
padding: 0;
}
.hbody{
margin-left: 25%;
}
.show{
margin-left: 160px;
width: 200px;
height: 200px;
border: 1px solid #EEEEEE;
}
.show img{
width: 200px;
height: 200px;
}
.tab{
border: 1px solid #eee;
width: 535px;
height:100px ;
}
.tab img{
border: 1px solid #eee;
width: 100px;
height: 100px;
cursor: pointer;
}
$(function(){
var Src = $('.tab').find('img').eq(0).attr('src');
$('.show').find('img').attr('src',Src)
})
$('.tab').find('img').mouseover(function(){
var inx = $(this).index();
var Imgsrc = $('.tab').find('img').eq(inx).attr('src');
$('.show').find('img').attr('src',Imgsrc)
})
\u5f15\u4e00\u4e2ajquery\u6587\u4ef6\uff0c\u56fe\u7247\u5730\u5740\u66ff\u6362\u4e00\u4e0b\u5c31\u53ef\u4ee5\u4e86
html中图片以中心放大的代码如下：
<div style=" width:300px; height:300px;margin-left:auto;
margin-right:auto; overflow:hidden; margin-top:100px;">
<img id="img" onmouseover="bigger()" onmouseout="smaller()"
src="http://mat1.gtimg.com/www/images/qq2012/guanjia2.png"
style="cursor:pointer;width:300px;height:300px;
transition:all 1s ease-out 0s; perspective-origin:bottom;"/>
<script type="text/javascript">
var img = document.getElementById('img');
function bigger(){
img.style.width = '400px';
img.style.height = '400px';
img.style.marginTop = "-50px";
img.style.marginLeft = "-50px";
}
function smaller(){img.style.width = '300px';
img.style.height = '300px';
img.style.marginTop = "0px";
img.style.marginLeft = "0px";
}
</script>
扩展资料：
在html中用js实现鼠标指向图片时图片放大的效果的代码如下：
<img id="img" onmouseover="bigger()" onmouseout="smaller()"
src="你的图片路径" style="width:100px;height:100px;" />
<script type="text/javascript">
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'; }
</script>
绛旓細html涓浘鐗囦互涓績鏀惧ぇ鐨勪唬鐮濡備笅锛<div style=" width:300px; height:300px;margin-left:auto;margin-right:auto; overflow:hidden; margin-top:100px;"> <img id="img" onmouseover="bigger()" onmouseout="smaller()"src="http://mat1.gtimg.com/www/images/qq2012/guanjia2.png"style="cur...
绛旓細缁撹锛氬湪HTML椤甸潰涓疄鐜扮偣鍑诲皬鍥炬斁澶鏌ョ湅澶у浘鐨勮繃绋嬬浉瀵圭畝鍗曪紝闇瑕佸熷姪HTML缂栬緫鍣ㄥ拰CSS浠ｇ爜銆備互涓嬫槸璇︾粏鐨勬楠わ細棣栧厛锛屼綘闇瑕佸噯澶囦竴鍙扮數鑴戯紝涓娆炬祻瑙堝櫒浠ュ強HTML缂栬緫鍣ㄣ傚湪鏈鍩烘湰鐨勯厤缃笅锛屼綘鍙互寮濮嬪垱寤轰綘鐨勯」鐩傛墦寮浣犵殑HTML缂栬緫鍣紝鏂板缓涓涓枃浠讹紝渚嬪鍛藉悕涓"index.html"锛岃繖鏄綘鐨勯」鐩熀纭鏂囦欢銆傛帴涓嬫潵...
绛旓細<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <style type="text/css"> { margin: 0;padding: 0;} .hbody{ margin-left: 25%;} .show{ margin-left: 160px;width: 200px;height: 200px;bor...
绛旓細1銆佺洿鎺ユ坊鍔犲楂樺睘鎬э細<img src="" width="200" height="200"> 2銆佸湪鏍峰紡琛ㄤ腑瀹氫箟锛歩mg {height:200px;width:200px;} 杩欐牱鐨勫紛绔槸濡傛灉鍥剧墖姣斾緥涓嶇瓑灏变細鍑虹幇鍥剧墖鎷変几锛岃涔堟敼鍥剧墖鎴栭檺鍒跺浘鐗囨渶澶у/楂樺害锛屽悗鑰呭缓璁娇鐢╦s瑙ｅ喅銆3銆佹寚瀹歞iv閲岃儗鏅浘澶у皬鐨勬柟娉曞涓嬶細div{ background:url(img_flwr....
绛旓細1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓殑<style>鏍囩涓紝杈撳叆css浠ｇ爜锛歞iv {width: 72px;height: 72px;background: url(small3.png) no-repeat;overflow: hidden;} 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃舵垚鍔熷皢鐭╁舰鍥剧墖鍙樉绀轰簡姝ｆ柟褰㈤儴鍒嗐4銆佺偣鍑诲皬鍥惧悗锛...
绛旓細鍙互鐢╟ss3涓渢ransform: scale()鈥濆睘鎬у鍥剧墖杩涜缂╂斁銆1銆佹柊寤html鏂囨。锛屽湪body鏍囩涓坊鍔犱竴寮犲浘鐗囷紝缁欒繖寮犲浘鐗囪缃甤ss灞炴э紝娣诲姞鈥渢ansform鈥濈缉鏀惧睘鎬э紝灞炴у间负鈥渟caleX(n)鈥濓紝scaleX(n)鎸囩殑鏄瀹藉害杩涜缂╂斁锛宯鎸囩殑鏄缉鏀炬瘮渚嬶細2銆佸皢transform鐨勫睘鎬у兼敼涓衡渟caleY(n)鈥濓紝scaleY(n)鎸囩殑鏄...
绛旓細HTML瀹炵幇缃戦〉涓鍥剧墖鏀惧ぇ鍔熻兘浠ｇ爜 灏卞儚鏂版氮寰崥鍥剧墖鏀惧ぇ涓鏍风殑閭ｇ,鐐逛竴涓嬫斁澶у啀鐐逛竴涓嬪氨鍙樻垚鍘熸潵鐨勭姸鎬併 鏈変唬鐮佺殑鍚勪綅澶уぇ浠,鍙戝埌鎴戦偖绠眡[email protected]瓒婄畝鍗曡秺濂,鍙渶瑕佸浘鐗囨斁澶у拰鏂囧瓧甯冨眬鏀瑰彉灏卞ソ,涓嶉渶瑕佸埆鐨勬晥鏋,,璋㈣阿... 鏈変唬鐮佺殑鍚勪綅澶уぇ浠,鍙戝埌鎴戦偖绠 [email protected]瓒婄畝鍗曡秺濂,鍙渶瑕佸浘鐗囨斁澶...
绛旓細鍚屾剰妤间笂鐨 鍏蜂綋浠ｇ爜濡備笅 <a href="澶у浘璺緞"><img src="../img/16.JPG" height="90"></a> 杩欐牱鍟婏紝浣犳槸涓嶆槸鎶鍥剧墖鏀惧湪涓涓〃鏍奸噷浜 濡傛灉涓嶆槸 閭ｄ箞棣栧厛鎶婂浘鐗囨斁鍦ㄨ〃鏍间腑锛岀劧鍚庣敤鐧惧垎姣旇〃绀鸿〃鏍肩殑瀹藉害灏卞彲浠ヤ簡 渚嬪 <table width=100%> <tr> <td width=33%> 鍥剧墖 </td> <td width=...
绛旓細涓婇潰鏄粰鍑虹ず渚嬬殑鏁堟灉鍥俱傝繖鏄笉鏄綘鎯宠鐨鏀惧ぇ闀滄晥鏋滃憿锛熶笅闈㈡垜浠潵鐪嬩笅绀轰緥浠ｇ爜锛氬湪杩欎釜绀轰緥涓綋浣犵偣鍑鍥剧墖鏃跺浘鐗囧氨浼氬嚭鐜颁笂鍥炬晥鏋滐紝鍐嶄竴娆＄偣鍑绘椂灏卞彉鎴愬師濮嬪浘鐗囦簡銆<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>鏀惧ぇ闀</title> <!鈥HTML浠ｇ爜璁捐锛氫竴涓畝鍗曠殑canvas鍏冪礌--> ...
绛旓細4銆佸湪璁剧疆涓壘鍒板姩鐢绘椂闂达紝灏嗗姩鐢绘椂闂磋涓3绉掑嵆鍙1銆傚崟鍑籎avaScript鍥惧儚銆2銆傞氳繃鍗曞嚮鏉ユ洿鏀筰mg鐨剆rc灞炴с3銆傛洿鏀逛负灞炴у悗锛屽皢鍥剧墖璁剧疆涓哄姩鐢诲舰寮忥紝鏀惧ぇ1.5鍊嶃4銆傚湪璁剧疆涓壘鍒板姩鐢绘椂闂达紝灏嗗姩鐢绘椂闂磋缃负3绉掋HTMLhover鎬庝箞璁╅紶鏍囩Щ涓婂幓鍥剧墖鍙樺ぇ锛熷彲浠ョ敤js浜嬩欢鈥渙nmouseover鈥濆拰鈥渙nmouseout鈥濇潵瀹炵幇銆
