html鼠标悬停左侧缩小图片放大到右边

Posted 2023-04-25

html鼠标悬停左侧缩小图片放大到右边
首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。

2，一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的，因此如果我们不去为图片添加相对定位并且不去调节扩大后的位置，他的放大会是向一边的，因此我们必须考虑其放大后的位置。

3，放大的效果是要用动画实现的。

代码：html>

尝试
.a1width:137px;height:138px;border:1px solid red;overflow:hidden;position:relative;

.picposition: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);

);

); 参考技术A 1，首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。

2，一张图片在放大的时候会根据其定位(如在div里面的图片会以div的左上角为基准扩大宽和高)来放大的，因此如果我们不去为图片添加相对定位并且不去调节扩大后的位置，他的放大会是向一边的，因此我们必须考虑其放大后的位置。

3，放大的效果是要用动画实现的。

JS控制图片放大和缩小怎么改

我用的是以下代码，按CTRL+鼠标滚轮可以缩放图片，直接用鼠标滚轮也可以缩放图片了；；；我想怎么能修改下，变成只有按CTRL+鼠标滚轮才可以缩放图片

<script>
function bbimg(o)

var zoom=parseInt(o.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
if (zoom>0) o.style.zoom=zoom+'%';

function addthis()

var e=window.event?window.event:e;
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return;
//author:reterry(dxy)
if (String(srcE.tagName).toLowerCase()=='img')
//alert('好');
bbimg(srcE)


function backthis()
var e=window.event?window.event:e;
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE) return;
//author:reterry(dxy)
if ((String(srcE.tagName).toLowerCase()=='img')&&(window.event.ctrlKey))
//alert('好');
srcE.style.zoom='100%';

document.onmousewheel=addthis;
document.onmouseout=backthis;
</script>
试过了 。。。把你的那部分改进去之后 不管怎么样 图片都不变了
==========================
OH MY GOD ! 我又试了，还是没反应啊，图片怎么都变不了了

用js控制图片额大小。主要是修改图片的宽度和高度。下面是简单的代码实现：

HTML 代码：

<img src=\'../1.jgp\' id=\'img\' />

这个时候img的图片自身是多大，就会显示多大。100px*100px的图。

js代码：

var oImg = document.getElementById(\'img\');
oImg.width = \'50px\'; //当给img标签的宽度设置为50px后，高度会自动按比例缩小。
oImg.width = \'200px\' //当给img标签的宽度设置为200px后，高度会自动按比例扩大。 参考技术A 这个可以了,之前我用的是IE7,现在兼容IE6了

把addthis函数改成这样就可以了

function addthis(e)

var e = e || window.event;
var srcE=e.srcElement?e.srcElement:e.target;
if(!srcE || !e.ctrlKey) return;
//author:reterry(dxy)
if (String(srcE.tagName).toLowerCase()=='img')
//alert('好');
bbimg(srcE)

return false;


附:你这个脚本是IE专用的.我也懒得去兼容其他浏览器了本回答被提问者采纳