HTML实现网页上图片放大功能代码 就像新浪微博图片放大一样的那种，点一下放大再点一下就变成原来的状态。 求一个简单的点击图片放大缩小的JS代码
HTML\u9875\u9762\uff0c\u6211\u60f3\u5236\u4f5c\u4e00\u4e2a\u70b9\u51fb\u56fe\u7247\u5168\u5c4f\u653e\u5927\uff0c\u518d\u70b9\u51fb\u5c31\u6062\u590d\u5927\u5c0f\u7684\u6548\u679c\uff0c\u7528JS\u600e\u4e48\u5b9e\u73b0\uff0cCSS\u53ef\u4ee5\u5417\uff0c\u6765\u9ad8\u624b\u9644\u4ef6\u662f\u4e00\u4e2a\u7b80\u5355\u7684\u70b9\u51fb\u653e\u5927\u7684\u6548\u679c, \u4f60\u53ef\u4ee5\u770b\u4e00\u4e0b
1\u3001\u51c6\u5907\u597d\u9700\u8981\u7528\u5230\u7684\u56fe\u6807\u3002
2\u3001\u65b0\u5efahtml\u6587\u6863\u3002
3\u3001\u4e66\u5199hmtl\u4ee3\u7801\u3002 \u3002
4\u3001\u4e66\u5199\u5e76\u6dfb\u52a0js\u4ee3\u7801\u3002\u3002
5\u3001\u4ee3\u7801\u6574\u4f53\u7ed3\u6784\u3002
6\u3001\u67e5\u770b\u6548\u679c\u3002
<bgsound src="路径" loop="-1">/* ===== 背景音乐 ==== */
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片欣赏</title>
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
position: absolute;
width: 100%;
height: 100%;
cursor: crosshair;
}
#diapoContainer {
position: absolute;
left: 10%;
top: 10%;
width: 80%;
height: 80%;
background: #222;
overflow: hidden;
}
.imgDC {
position: absolute;
cursor: pointer;
border: #000 solid 2px;
filter: alpha(opacity=90);
opacity: 0.9;
visibility: hidden;
}
.spaDC {
position: absolute;
filter: alpha(opacity=20);
opacity: 0.2;
background: #000;
visibility: hidden;
}
.imgsrc {
position: absolute;
width: 120px;
height: 67px;
visibility: hidden;
margin: 4%;
}
#bkgcaption {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 6%;
background:#1a1a1a;
}
#caption {
position: absolute;
font-family: arial, helvetica, verdana, sans-serif;
white-space: nowrap;
color: #fff;
bottom: 0px;
width: 100%;
left: -10000px;
text-align: center;
}
</style>
<script type="text/javascript">
var xm;
var ym;
/* ==== onmousemove event ==== */
document.onmousemove = function(e){
if(window.event) e=window.event;
xm = (e.x || e.clientX);
ym = (e.y || e.clientY);
}
/* ==== window resize ==== */
function resize() {
if(diapo)diapo.resize();
}
onresize = resize;
/* ==== opacity ==== */
setOpacity = function(o, alpha){
if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
////////////////////////////////////////////////////////////////////////////////////////////
/* ===== encapsulate script ==== */
diapo = {
O : [],
DC : 0,
img : 0,
txt : 0,
N : 0,
xm : 0,
ym : 0,
nx : 0,
ny : 0,
nw : 0,
nh : 0,
rs : 0,
rsB : 0,
zo : 0,
tx_pos : 0,
tx_var : 0,
tx_target : 0,
/////// script parameters ////////
attraction : 2,
acceleration : .9,
dampening : .1,
zoomOver : 2,
zoomClick : 6,
transparency : .8,
font_size: 18,
//////////////////////////////////
/* ==== diapo resize ==== */
resize : function(){
with(this){
nx = DC.offsetLeft;
ny = DC.offsetTop;
nw = DC.offsetWidth;
nh = DC.offsetHeight;
txt.style.fontSize = Math.round(nh / font_size) + "px";
if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
rsB = rs;
}
},
/* ==== create diapo ==== */
CDiapo : function(o){
/* ==== init variables ==== */
this.o = o;
this.x_pos = this.y_pos = 0;
this.x_origin = this.y_origin = 0;
this.x_var = this.y_var = 0;
this.x_target = this.y_target = 0;
this.w_pos = this.h_pos = 0;
this.w_origin = this.h_origin = 0;
this.w_var = this.h_var = 0;
this.w_target = this.h_target = 0;
this.over = false;
this.click = false;
/* ==== create shadow ==== */
this.spa = document.createElement("span");
this.spa.className = "spaDC";
diapo.DC.appendChild(this.spa);
/* ==== create thumbnail image ==== */
this.img = document.createElement("img");
this.img.className = "imgDC";
this.img.src = o.src;
this.img.O = this;
diapo.DC.appendChild(this.img);
setOpacity(this.img, diapo.transparency);
/* ==== mouse events ==== */
this.img.onselectstart = new Function("return false;");
this.img.ondrag = new Function("return false;");
this.img.onmouseover = function(){
diapo.tx_target=0;
diapo.txt.innerHTML=this.O.o.alt;
this.O.over=true;
setOpacity(this,this.O.click?diapo.transparency:1);
}
this.img.onmouseout = function(){
diapo.tx_target=-diapo.nw;
this.O.over=false;
setOpacity(this,diapo.transparency);
}
this.img.onclick = function() {
if(!this.O.click){
if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
this.O.click = true;
this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
diapo.zo = this;
setOpacity(this,diapo.transparency);
} else {
this.O.click = false;
this.O.over = false;
this.O.resize();
diapo.zo = 0;
}
}
/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
this.resize = function (){
with (this) {
x_origin = o.offsetLeft;
y_origin = o.offsetTop;
w_origin = o.offsetWidth;
h_origin = o.offsetHeight;
}
}
/* ==== animation function ==== */
this.position = function (){
with (this) {
/* ==== set target position ==== */
w_target = w_origin;
h_target = h_origin;
if(over){
/* ==== mouse over ==== */
w_target = w_origin * diapo.zoomOver;
h_target = h_origin * diapo.zoomOver;
x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
} else {
/* ==== mouse out ==== */
x_target = x_origin;
y_target = y_origin;
}
if(click){
/* ==== clicked ==== */
w_target = w_origin * diapo.zoomClick;
h_target = h_origin * diapo.zoomClick;
}
/* ==== magic spring equations ==== */
x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
diapo.rs += (Math.abs(x_var) + Math.abs(y_var));
/* ==== html animation ==== */
with(img.style){
left = Math.round(x_pos) + "px";
top = Math.round(y_pos) + "px";
width = Math.round(Math.max(0, w_pos)) + "px";
height = Math.round(Math.max(0, h_pos)) + "px";
zIndex = Math.round(w_pos);
}
with(spa.style){
left = Math.round(x_pos + w_pos * .1) + "px";
top = Math.round(y_pos + h_pos * .1) + "px";
width = Math.round(Math.max(0, w_pos * 1.1)) + "px";
height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
zIndex = Math.round(w_pos);
}
}
}
},
/* ==== main loop ==== */
run : function(){
diapo.xm = xm - diapo.nx;
diapo.ym = ym - diapo.ny;
/* ==== caption anim ==== */
diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
/* ==== images anim ==== */
for(var i in diapo.O) diapo.O[i].position();
/* ==== loop ==== */
setTimeout("diapo.run();", 16);
},
/* ==== load images ==== */
images_load : function(){
// ===== loop until all images are loaded =====
var M = 0;
for(var i=0; i<diapo.N; i++) {
if(diapo.img[i].complete) {
diapo.img[i].style.position = "relative";
diapo.O[i].img.style.visibility = "visible";
diapo.O[i].spa.style.visibility = "visible";
M++;
}
resize();
}
if(M<diapo.N) setTimeout("diapo.images_load();", 128);
},
/* ==== init script ==== */
init : function() {
diapo.DC = document.getElementById("diapoContainer");
diapo.img = diapo.DC.getElementsByTagName("img");
diapo.txt = document.getElementById("caption");
diapo.N = diapo.img.length;
for(i=0; i<15; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
diapo.resize();
diapo.tx_pos = -diapo.nw;
diapo.tx_target = -diapo.nw;
diapo.images_load();
diapo.run();
}
}
</script>
</head>
<body>
<div id="diapoContainer">
<img class="imgsrc" src="图片的路径（相对路径或绝对路径）" alt="图片的注释（第一张）">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<img class="imgsrc" src="同上" alt="同上">
<div id="bkgcaption">
</div>
<div id="caption">
</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
function dom_onload() {
if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>
</body>
</html>
放大就是改变图片的宽和高..
点击就是查看图片的属性,如果是小就变成大图,如果是大图就变成小图..
在百度搜一下
这类都是用js写的，可以搜一下，网上有很多
绛旓細鍙互鐢╦s浜嬩欢鈥渙nmouseover鈥濆拰鈥渙nmouseout鈥濇潵瀹炵幇銆1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔犲浘鐗囨爣绛撅紝涓鸿繖涓爣绛捐缃渋d鈥濆睘鎬э紝鐒跺悗璁剧疆鍥剧墖鐨勯粯璁ゆ樉绀哄ぇ灏廲ss灞炴э細2銆佹坊鍔犫渙nmouseover鈥漥s浜嬩欢锛岄鍏堜娇鐢ㄢ渄ocument.getElementById鈥濊幏鍙栧埌鍥剧墖鏍囩锛岀劧鍚庡畾涔夐紶鏍囩Щ鍔ㄥ埌鍥剧墖涓婃椂鍙戠敓鐨勪簨浠讹紝杩欐椂鍥剧墖灏嗕細鏀惧ぇ锛...
绛旓細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銆佺偣鍑诲皬鍥惧悗锛屾垚...
绛旓細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...
绛旓細鍒嗗埆鍐欎竴涓猳nmouseover鍜宱nmouseout浜嬩欢銆傜劧鍚庡湪浜嬩欢閲岄潰鍔犱竴涓猣unction锛屽垎鍒啓鎯宠鏀惧ぇ鐨勫昂瀵稿拰缂╁皬鎴栧鍘熺殑灏哄銆傚叿浣撲唬鐮佸疄鐜板涓嬶細<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="浣犵殑鍥剧墖璺緞" style="width:100px;height:100px;" /> <script type="text/javascript"> var ...
绛旓細鍒朵綔鍥剧墖鐨勬斁澶ф晥鏋滄垜鑰冭檻鍒扮殑鏂规硶鏄皢鍘熷鍥剧墖缁樺埗鍒癱anvas涓婏紝鐒跺悗鍦ㄥcanvas杩涜灞閮ㄨ鍓渶鍚庡瑁佸壀鐨勯儴鍒嗚繘琛屾斁澶э紝杩欐牱灏卞彲浠ュ疄鐜版斁澶ч暅鐨勬晥鏋銆傝繖閲屾垜缁欏嚭涓涓疄鐜拌繖涓兂娉曠殑绀轰緥銆傝绀轰緥瀹為檯涓婂氨鏄繍鐢℉TML5 canvas涓鐢诲竷杩涜瑁佸壀涓庝繚瀛樼敾甯冪姸鎬佺殑鐩稿叧鐭ヨ瘑瀹炵幇鐨勩備笂闈㈡槸缁欏嚭绀轰緥鐨勬晥鏋滃浘銆傝繖鏄笉鏄...
绛旓細1銆佷互Hbuilder鏉ヨ瑙ｏ紝棣栧厛鏂板缓涓涓HTML椤甸潰锛屽鍥撅紱2銆佹帴鐫缁欐爣绛捐缃儗鏅鍥剧墖锛屽鍥捐缃殑鏄<body>鏍囩锛3銆佺劧鍚庢柊寤轰竴涓猚ss鏂囦欢锛屽鍥撅紱4銆佽繖閲岀粰body鏍囩璁剧疆background-size灞炴э紝濡傛灉鏍囩鏄痙iv灏卞啓div锛岀劧鍚庡彲浠ヨ缃搴﹀拰楂樺害锛5銆佸鍥炬墍绀猴紝鍦╪ew_file.html閲岄潰缂栬緫锛<link href="css/1.css" ...
绛旓細<html> <head> <title>鍥剧墖鏀惧ぇ</title> <script type="text/javascript"> function zoomIn(){ //姝ゅ鐐瑰嚮鍥剧墖鏃朵細灏嗗浘鐗囨斁澶у埌鍘熸潵鐨勪笁鍊嶅ぇ灏忥紝閲嶅鐐瑰嚮涓鐩存斁澶 var imgNode = document.getElementById("image");var width = imgNode.width;var height = imgNode.height;var width_tmp = ...
绛旓細閫氳繃婊氳疆鏉ユ帶鍒鍥剧墖澶у皬锛屽湪椤甸潰鐨勫ご閮<head>璺</head>涔嬮棿鎻掑叆浠ヤ笅璇彞灏卞彲浠ヤ簡锛<script> function on_mousewheel(){ var o = event.srcElement;if(o.tagName == 'IMG' && o.offsetWidth > 320){ var zoom=parseInt(o.style.zoom, 10)||100;zoom+=event.wheelDelta/20;if (zoom>0) o....
绛旓細1銆佸彲浠ュ皢鍥剧墖鏀惧ぇ鐨勫鍣ㄦ垨鍏冪礌璁剧疆涓篺ixed锛岃繖鏍峰氨鍙互褰撻紶鏍囨偓鍋滄椂锛屽鍣ㄥ皢浼氳鐩栧湪鍏朵粬鍥剧墖涓婃柟锛2銆佸皢鍥剧墖鏀惧ぇ鐨勫鍣ㄨ缃负鍙互绉诲姩锛岃繖鏍峰彲浠ヨ瀹瑰櫒闅忕潃榧犳爣绉诲姩鑰岀Щ鍔紝浠庤屽皢鍏朵粬鍥剧墖鎸′綇鐨勬儏鍐甸槻姝紱3銆佺粰鍥剧墖鏀惧ぇ瀹瑰櫒娣诲姞z-index锛屼娇鍏跺湪鍏朵粬椤甸潰鍏冪礌涔嬩笂锛屼粠鑰屽彲浠ヨ鐩栧叾浠栧浘鐗囷紱4銆佷娇鐢╟ss璁剧疆涓涓...
绛旓細HTML瀹炵幇缃戦〉涓婂浘鐗囨斁澶у姛鑳浠ｇ爜 灏卞儚鏂版氮寰崥鍥剧墖鏀惧ぇ涓鏍风殑閭ｇ,鐐逛竴涓嬫斁澶у啀鐐逛竴涓嬪氨鍙樻垚鍘熸潵鐨勭姸鎬併 鏈変唬鐮佺殑鍚勪綅澶уぇ浠,鍙戝埌鎴戦偖绠眡[email protected]瓒婄畝鍗曡秺濂,鍙渶瑕佸浘鐗囨斁澶у拰鏂囧瓧甯冨眬鏀瑰彉灏卞ソ,涓嶉渶瑕佸埆鐨勬晥鏋,,璋㈣阿... 鏈変唬鐮佺殑鍚勪綅澶уぇ浠,鍙戝埌鎴戦偖绠 [email protected]瓒婄畝鍗曡秺濂,鍙渶瑕佸浘鐗囨斁澶...
