html鼠标点击图片放大(html鼠标移入图片放大)
html鼠标悬停左侧缩小图片放大到右边
html鼠标悬停左侧缩小图片放大到右边
首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。
2，一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的，因此如果我们不去为图片添加相对定位并且不去调节扩大后的位置，他的放大会是向一边的，因此我们必须考虑其放大后的位置。
3，放大的效果是要用动画实现的。
代码：html
尝试
.a1{width:137px;height:138px;border:1px solid red;overflow:hidden;position:relative;}
.pic{position:absolute;}
$(function(){
$w = $('.pic').width();
$h = $('.pic').height();
$w2 = $w + 20;
$h2 = $h + 20;
$('.pic').hover(function(){
$(this).stop().animate({height:$h2,width:$w2,left:"-10px",top:"-10px"},500);
},function(){
$(this).stop().animate({height:$h,width:$w,left:"0px",top:"0px"},500);
});
});
html中图片以中心放大的代码
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=""
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中点击放大鼠标划过放大还有什么
缩小。点击放大鼠标划过是一款比较常见的html5book电子书翻页效果，鼠标滑过来放大（缩小）放大镜尺寸，可以制作出图片放大镜效果。
html鼠标放上逐渐变大拿走变小
html鼠标放上逐渐变大拿走变小原理如下：
1、当鼠标移到图片上，图片变大。当鼠标移出图片，图片变小。
2、鼠标over时，设置一个定时器，让图片逐渐变大，鼠标out时同理。