在html中怎么用js实现鼠标指向图片时图片放大到原图那么大？（具体实现） 怎么用js实现图片的缩小？
\u5728html\u4e2d\u600e\u4e48\u7528js\u5b9e\u73b0\u9f20\u6807\u6307\u5411\u56fe\u7247\u65f6\u56fe\u7247\u653e\u5927\u7684\u6548\u679c\uff1f\uff08\u5177\u4f53\u5b9e\u73b0\uff09\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
\u3000\u3000\u4e00\u822c\u6765\u8bf4\uff0c\u5b9e\u73b0\u56fe\u7247\u7684\u653e\u5927\u7f29\u5c0f\u529f\u80fd\u90fd\u7528\u5230\u4e86\u6bd4\u8f83\u5927\u7684\u5c01\u88c5\u63d2\u4ef6\uff0c\u7279\u522b\u662f\u4ee5jQuery\u63d2\u4ef6\u5c45\u591a\uff0c\u800c\u5b9e\u9645\u4e0a\u5355\u7eaf\u5b9e\u73b0\u5bf9\u539f\u56fe\u672c\u8eab\u7684\u653e\u5927\u7f29\u5c0f\uff0c\u7528\u7b80\u5355\u51e0\u884c\u539f\u751fJS\u4ee3\u7801\u5c31\u53ef\u4ee5\u505a\u5230\u3002\u5728\u4eca\u5929\u5206\u4eab\u7684\u8fd9\u4e2a\u5b9e\u4f8b\u4e2d\uff0c\u70b9\u51fb\u653e\u5927\u6309\u94ae\u4e0d\u677e\u9f20\u6807\uff0c\u56fe\u7247\u4f1a\u4e0d\u65ad\u7684\u9010\u6e10\u653e\u5927\uff0c\u5f53\u7136\u4e5f\u53ef\u4ee5\u70b9\u4e00\u4e0b\u653e\u5927\u4e00\u70b9\uff0c\u70b9\u51fb\u7f29\u5c0f\u6309\u94ae\u5219\u53cd\u4e4b\uff0c\u6709\u9700\u8981\u7684\u670b\u53cb\u53ef\u4ee5\u8003\u8651\u6536\u85cf\u5907\u7528\u54e6
\u3000\u3000\u4ee5\u4e0b\u4e3a\u5168\u90e8\u4ee3\u7801\uff1a
javascript\u63a7\u5236\u56fe\u7247\u7f29\u5c0f\u6216\u8005\u653e\u5927 var oTime; function changeSize(id,action){ var obj=document.getElementById(id); obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%'; oTime=window.setTimeout('changeSize(\''+id+'\',\''+action+'\')',100); } document.onmouseup=function(){ window.clearTimeout(oTime); } \u653e\u5927 \u7f29\u5c0f
可以用js事件“onmouseover”和“onmouseout”来实现。
1、新建html文档，在body标签中添加图片标签，为这个标签设置“id”属性，然后设置图片的默认显示大小css属性：
2、添加“onmouseover”js事件，首先使用“document.getElementById”获取到图片标签，然后定义鼠标移动到图片上时发生的事件，这时图片将会放大：
3、添加“onmouseout”js事件，首先获取图片标签，然后定义鼠标移开图片时发生的事件，这时图片将会缩小：
分别写一个onmouseover和onmouseout事件。然后在事件里面加一个function，分别写想要放大的尺寸和缩小或复原的尺寸。
具体代码实现如下：
<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 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
参考资料：
JavaScript官方API接口-GlobalEventHandlers.onmouseover
JavaScript官方API接口-GlobalEventHandlers.onmouseout
W3cSchool-JavaScript 事件参考手册
首先是div布局：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../common.js"></script>
</body>
</html>
2.添加CSS和JS样式：（1）添加CSS样式，就是写静态页面，这个图片怎么在页面上显示；（2）添加JS效果是鼠标经过小盒子， 显示遮罩和大盒子 ，鼠标离开后隐藏。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../common.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 350px;
height: 350px;
margin: 100px;
border: 1px solid #ccc;
position: relative;
}
.big {
width: 400px;
height: 400px;
position: absolute;
top: 0;
left: 360px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.mask {
width: 175px;
height: 175px;
background: rgba(255, 255, 0, 0.4);
position: absolute;
top: 0;
left: 0;
cursor: move;
display: none;
}
.small {
position: relative;
}
.box img {
vertical-align: top;
}
#bigBox img {
position: absolute;
}
</style>
</head>
<body>
<div class="box" id="box">
<div id="smallBox" class="small">
<img src="images/001.jpg" width="350" alt="" />
<div id="mask" class="mask"></div>
</div>
<div id="bigBox" class="big">
<img src="images/0001.jpg" id="bigImg" width="800" alt="" />
</div>
</div>
<script>
var box = document.getElementById("box");
var smallBox = document.getElementById("smallBox");
var bigBox = document.getElementById("bigBox");
var bigImg = document.getElementById("bigImg");
var mask = document.getElementById("mask");
//1.鼠标经过小盒子 显示遮罩和大盒子 鼠标离开后隐藏
smallBox.onmouseover = function() {
mask.style.display = "block";
bigBox.style.display = "block";
};
smallBox.onmouseout = function() {
mask.style.display = "none";
bigBox.style.display = "none";
};
smallBox.onmousemove = function(event) {
var event = event || window.event;
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
var targetX = pageX - box.offsetLeft;
var targetY = pageY - box.offsetTop;
var maskX = targetX - mask.offsetWidth / 2;
var maskY = targetY - mask.offsetHeight / 2;
if (maskX < 0) {
maskX = 0;
}
if (maskX > smallBox.offsetWidth - mask.offsetWidth) {
maskX = smallBox.offsetWidth - mask.offsetWidth;
}
if (maskY < 0) {
maskY = 0;
}
if (maskY > smallBox.offsetHeight - mask.offsetHeight) {
maskY = smallBox.offsetHeight - mask.offsetHeight;
}
mask.style.left = maskX + "px";
mask.style.top = maskY + "px";
var bigToMove = bigImg.offsetWidth - bigBox.offsetWidth;
var maskToMove = smallBox.offsetWidth - mask.offsetWidth;
var rate = bigToMove / maskToMove;
bigImg.style.left = -rate * maskX + "px";
bigImg.style.top = -rate * maskY + "px";
};
</script>
</body>
</html>
3.在开发工具里面的截图：
4.未添加CSS样式和JS效果浏览器的截图：
5.添加CSS和JS效果的浏览器的截图：
很简单啊，先把图片用css缩小，再用js滑过的时候放大就好啦，图省事我就把js直接写在图片上了，你可以自己抽出来：
<img src="1.jpg" width="50" height="50" onMouseOver="this.width='300'; this.height='300';" onMouseOut="this.width='50'; this.height='50'">
或者更简单的，直接用css控制，连js都不用写了：
<style>
#Img1{ width:50px; height:50px;}
#Img1:hover{ width:300px; height:300px;}
</style>
<img src="1.png" width="50" height="50" id="Img1">
需要准备两张图，一张是小图，一张是指向的时候显示的大图。
在小图<img>的hover事件中把大图显示出来就行了（可以先隐藏，指向的时候再显示，然后滑出来的时候再隐藏）。用jquery实现大致就是这样子：
$('#xiaotu').hover(
function(){
// 滑进去显示隐藏的大图
},
function(){
// 划出去隐藏已经显示的大图
}
);
绛旓細1銆佹柟娉曚竴锛鍒╃敤html鐗规э紝姣忎釜鏍囩閮芥湁涓涓猼itle灞炴銆傚綋榧犳爣hover鍦ㄨ鏍囩鍐呭涓婃椂锛屾祻瑙堝櫒灞曠ず鍑鸿鏍囩鐨則itle鍐呭锛岃榧犳爣绉昏蛋锛屽唴瀹规秷澶憋紝濡備笅锛歱{ height:100px;width:100px;background-color:aqua;} ptitle="鎴戞槸榧犳爣鎮仠灞曠ず鐨勫唴瀹">鏂囧瓧鍐呭鏂囧瓧鍐呭/p> html濡備綍鎶婇紶鏍囨寜閿敼鎴愰敭鐩橈紵榧犳爣鎸...
绛旓細浣跨敤pageX銆乸ageY鑾峰彇榧犳爣褰撳墠浣嶇疆銆傚湪<title>鏍囩鍚庨潰鏂板缓涓涓<script>锛屽垱寤洪紶鏍囩Щ鍔ㄦ椂鑾峰彇榧犳爣褰撳墠鐨勪綅缃銆傚鍥撅細js浠ｇ爜锛<script type="text/javascript"> document.onmousemove = function(e){ var loc = "褰撳墠浣嶇疆 x:"+e.pageX+",y:"+e.pageY document.getElementById("point-loc").inner...
绛旓細鍒嗗埆鍐欎竴涓猳nmouseover鍜宱nmouseout浜嬩欢銆傜劧鍚庡湪浜嬩欢閲岄潰鍔犱竴涓猣unction锛屽垎鍒啓鎯宠鏀惧ぇ鐨勫昂瀵稿拰缂╁皬鎴栧鍘熺殑灏哄銆傚叿浣撲唬鐮佸疄鐜板涓嬶細<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="浣犵殑鍥剧墖璺緞" style="width:100px;height:100px;" /> <script type="text/javascript"> var ...
绛旓細鍙互鐢╦s浜嬩欢鈥渙nmouseover鈥濆拰鈥渙nmouseout鈥濇潵瀹炵幇銆1銆佹柊寤篽tml鏂囨。锛屽湪body鏍囩涓坊鍔犲浘鐗囨爣绛撅紝涓鸿繖涓爣绛捐缃渋d鈥濆睘鎬э紝鐒跺悗璁剧疆鍥剧墖鐨勯粯璁ゆ樉绀哄ぇ灏廲ss灞炴э細2銆佹坊鍔犫渙nmouseover鈥漥s浜嬩欢锛岄鍏堜娇鐢ㄢ渄ocument.getElementById鈥濊幏鍙栧埌鍥剧墖鏍囩锛岀劧鍚庡畾涔夐紶鏍囩Щ鍔ㄥ埌鍥剧墖涓婃椂鍙戠敓鐨勪簨浠讹紝杩欐椂鍥剧墖灏嗕細鏀惧ぇ锛...
绛旓細html缂栬緫鍣ㄣ佹祻瑙堝櫒銆1銆侀鍏堬紝鎵撳紑html缂栬緫鍣紝鏂板缓html鏂囦欢锛屼緥濡傦細index.html銆2銆佸湪index.html涓鐨<script>鏍囩锛岃緭鍏js浠ｇ爜锛歷ar e = event || window.event;document.body.innerText = e.clientX + ',' + e.clientY;銆3銆佹祻瑙堝櫒杩愯index.html椤甸潰锛屾鏃朵細鎵撳嵃鍑榧犳爣鐨勫綋鍓嶄綅缃潗鏍囥
绛旓細break;case 40: document.getElementById('name').style.top=parseInt(document.getElementById('name').style.top)+5+"px";break;} } document.onkeydown =keydown;//鎸変笂涓嬮敭 </script> 杩欓噷浣犻渶瑕佹敞鎰鐨鏄紝棣栧厛瑕佹妸div鐨則op缁欏啓濂斤紝涔熷氨鏄浣犺鎶婁粬鍐欐垚position:absolute; 鎴栬卲osition...
绛旓細textDiv.onmouseenter = function() {//榧犳爣杩涘叆 clearInterval(maxTime);} textDiv.onmouseleave = function() {//榧犳爣绂诲紑 MaxRoll();} } var minTime,maxTime,divTop,newTop=0;function MinRoll(){ newTop++;if(newTop<=divTop+40){ textDiv.style.top = "-" + newTop + "px";}...
绛旓細// startX, startY 涓榧犳爣鐐瑰嚮鏃跺垵濮嬪潗鏍 // diffX, diffY 涓洪紶鏍囧垵濮嬪潗鏍囦笌 box 宸︿笂瑙掑潗鏍囦箣宸紝鐢ㄤ簬鎷栧姩 var startX, startY, diffX, diffY; // 鏄惁鎷栧姩锛屽垵濮嬩负 false var dragging = false; // 榧犳爣鎸変笅 document.onmousedown = function(e) { startX =...
绛旓細<!DOCTYPE html><html> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>RunJS 婕旂ず浠ｇ爜</title><script>onload=function(){b.style.display="none";a.onmouseenter=function(){b.style.display="block";};a.onmouseleave = function(){b.style.display...
绛旓細<a id="re" alt="鏂伴椈" onmouseover="javascript:this.innerHTML='鏂伴椈'" onmouseout="javascript:this.innerHTML='News'">News</a>
