html页面里面如何实现点击小图放大查看大图 点击小图看大图的js,如何点击大图，能新窗口打开原始大图
\u6c42\u4e00\u4e2a\u7f51\u9875 html\u4ee3\u7801 \u70b9\u51fb\u5de6\u8fb9\u5c0f\u56fe\u663e\u793a\u53f3\u8fb9\u5927\u56fe \u5982\u56fe\u663e\u793a\u8fd9\u4e2a\u4e0d\u96be\u5427\u3002\u6211\u5927\u6982\u5199\u4e2a\u539f\u7406\u7ed9\u4f60\uff1a
\u65e0\u6807\u9898\u6587\u6863
function showimg(str){
document.getElementById("imgshow").src=str;
}
JS\u7279\u6548\u5b66\u9662|JsWeb8.cn|---\u7b80\u5355\u7684\u56fe\u7247\u653e\u5927\u5c55\u793a\u6548\u679c
.spic a img{-moz-opacity:0.5; filter:alpha(opacity=50);border:0px;}
.spic a:hover{font-size:9px;}
.spic a:hover img{-moz-opacity:0.5; filter:alpha(opacity=100);cursor:hand;}
function seeBig(_this) {
OpenWindow = window.open("", "img", "");//\u6253\u5f00\u65b0\u7a97\u53e3
OpenWindow.document.write("");//\u4e3a\u65b0\u7a97\u53e3\u8bbe\u5b9ahtml\u4ee3\u7801
OpenWindow.document.write("");
OpenWindow.document.write("\u4f8b\u5b50");
OpenWindow.document.write("");
OpenWindow.document.write("");
OpenWindow.document.write("<img src='" + _this.parentNode.getElementsByTagName("img")[0].src + "' alt='' /");
OpenWindow.document.write("");
OpenWindow.document.write("");
OpenWindow.document.close();
//\u6ce8\uff1adocument.write \u4e00\u884c\u53ea\u80fd\u51fa\u73b0\u4e00\u79cd\u6807\u7b7e
//\u9700\u8981 OpenWindow.document.close();
}
需要准备的材料分别有：电脑、浏览器、html编辑器。
1、首先，打开html编辑器，新建html文件，例如：index.html。
2、在index.html中的<style>标签中，输入css代码：
div {width: 72px;height: 72px;background: url(small3.png) no-repeat;overflow: hidden;}
3、浏览器运行index.html页面，此时成功将矩形图片只显示了正方形部分。
4、点击小图后，成功显示了大图。
楼主的意思我看明白了，这里可以将图片作为背景插入盒子中，那么怎么实现以短边剪裁图片呢，这里涉及一个background参数，补充一下：
background-size：宽 高；
只设置其中一个值，另一个值设置为auto，就能将图片等比例缩放。将短边值设为100px，长边auto，就可以实现了。配合background里面图片位置属性，就能调节图片哪一部分显示出来，比如background：url（） no-repeat center center；background-size：100px auto
就能让竖拍实现。横拍100px和auto换位置就可以了。
另外再补充两个参数：
background-size：cover （铺满图片，可能超出）
background-size：cotain（铺满图片，宽高之一铺满即停止）
jquery 和 就是都可以实现，思路点击按钮触发事件，事件内容为添加一个叠层内容是一个图片
现在css3图片属性可以设置object-fit: cover;类似背景background-size;cover;
可以吗？
绛旓細鐢╫nchange浜嬩欢缁戝畾杩欎釜涓嬫媺鍒楄〃锛屽綋涓嬫媺鍒楄〃鐨勯夋嫨鍙樺寲鏃讹紝浜嬩欢瑙﹀彂锛屽湪js閲涓撳悜椤甸潰銆
绛旓細2銆佸湪index.html涓鐨<body>鏍囩涓紝杈撳叆html浠ｇ爜锛<span>5</span> <button onclick="fun(1)">+</button> <button onclick="fun(-1)">-</button> 鍐嶈緭鍏s浠ｇ爜锛歠unction fun(a) { ('span').text(parseInt($('span').text()) + a);} 3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃鐐瑰嚮鍔犲彿...
绛旓細娣诲姞涓涓猳nclick浜嬩欢锛<button onclick='location.href="浣犵殑鍦板潃"'></button>
绛旓細2銆佸湪test.html鏂囦欢鍐咃紝鍦╬鏍囩鍐咃紝浣跨敤button鏍囩鍒涘缓澶氫釜鎸夐挳銆3銆佸湪test.html鏂囦欢鍐咃紝鍒嗗埆璁剧疆button鏍囩鐨刢lass灞炴т负bbtt锛岀敤浜庝笅闈㈣幏寰梑utton瀵硅薄銆4銆佸湪js鏍囩鍐咃紝浣跨敤ready()鏂规硶鍦椤甸潰鍔犺浇瀹屾垚鏃讹紝鎵цfunction鏂规硶銆5銆佸湪function鏂规硶鍐咃紝閫氳繃class鑾峰緱button瀵硅薄锛岀粰瀹冧滑缁戝畾click鐐瑰嚮浜嬩欢锛屽綋鎸夐挳琚...
绛旓細//鏁翠釜椤甸潰鍔犺浇瀹屼箣鍚庢墽琛屽嚱鏁 window.onload = function() { var result = isIE();if (!result) { //涓嶆槸IE娴忚鍣 //鑾峰緱鎸夐挳鍏冪礌 var toDesktopButtonNode = document.getElementById("toDesktopButton");//闅愯棌鎸夐挳 toDesktopButtonNode.style.display = "none";} } </script> </html> ...
绛旓細棣栧厛璇存斁澶х缉灏忓瓧浣擄紝鐩存帴鐢╦s璋冩暣瀛椾綋澶у皬灏卞彲浠ヤ簡銆傝瀹炵幇鍒锋柊鍚庝緷鐒舵樉绀轰箣鍓嶇缉鏀剧殑澶у皬锛岄偅灏遍渶瑕佽娴忚鍣ㄨ浣忎箣鍓嶇殑璁剧疆锛屾妸瀛椾綋澶у皬瀛樺埌cookies涓锛屾墦寮缃戦〉鍐嶄粠cookies璇诲彇銆傜粰浣犱竴娈靛啓濂界殑渚涘弬鑰冿紝鍏堝紩鍏query.cookie.js var myContent = $('#intro, .article-content, .article-content p');...
绛旓細= "running";} else { // 鍚﹀垯锛屾殏鍋滃姩鐢 animation.style.animationPlayState = "paused";} });璇锋敞鎰忥紝杩欏彧鏄竴涓畝鍗曠殑绀轰緥鏉ユ紨绀濡備綍瀹炵幇鐐瑰嚮鎸夐挳鏆傚仠鍔ㄧ敾鐨勬晥鏋溿傚叿浣撶殑浠ｇ爜瀹炵幇鍙兘浼氭牴鎹偍鐨勯」鐩渶姹傝屾湁鎵涓嶅悓銆傚笇鏈涗互涓婁俊鎭鎮ㄦ湁鎵甯姪锛佸鏋滄偍鏈変换浣曡繘涓姝ョ殑闂锛岃闅忔椂鎻愰棶銆
绛旓細html椤甸潰濡備笅锛<div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" alt="QQ鍟嗗煄鐒︾偣鍥炬晥鏋滀笅杞" /></a></li> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/02....
绛旓細1銆佹墦寮web椤圭洰寮鍙戠幆澧 鎵撳紑鎴栬呮柊寤轰竴涓獁eb椤圭洰銆2銆佽繖鏄寮曞叆鐨凚椤甸潰鐨刪tml锛屽畾涔変竴涓猼abl锛HTML椤甸潰浠ｇ爜銆3銆佽繖鏄寮曞叆鐨凚椤甸潰鐨刢ss鏍峰紡琛ㄣ4銆佽繖鏄皢瑕佸紩鍏able鍏冪礌鐨html椤甸潰浠ｇ爜鍗矨椤甸潰锛岀浉瀵逛簬鐖剁晫闈紝杩欓噷浣跨敤iframe寮曞叆鍒氬垰閭ｄ釜椤甸潰銆5銆佸湪A鐣岄潰閫氳繃js浠ｇ爜锛岃幏鍙朆椤甸潰涓table鍏冪礌鐨刬d褰撶劧...
绛旓細5銆侀鍏堢敤Tk()杩欎釜妯″潡鍒涘缓涓涓獥鍙indows锛岀劧鍚庡畾涔変竴涓寜閽産utton锛屾寜閽殑鍚嶇О鏄痯ress锛屾寜涓嬪幓浠ュ悗鐨勫搷搴斿懡浠ommand鏄垰鎵嶅畾涔夌殑reply鍑芥暟銆6銆佷唬鐮佺‘璁ゆ棤璇悗锛鐐瑰嚮pycharm椤甸潰鍙充笂瑙掔殑tkinter_t.py鏂囦欢鍚嶆梺杈圭殑缁胯壊涓夎鎸夐挳锛屽紑濮嬭繍琛屼唬鐮併7銆佸垰鍒涘缓鐨勭獥鍙ｆ槸涓緢灏忕殑绐楀彛锛屽彧鏄剧ず浜嗕竴涓寜閽殑楂樺害銆
