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

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

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

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

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

代码：html>

尝试

.a1{width:137pxheight:138pxborder:1px solid redoverflow:hiddenposition: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中图片以中心放大的代码如下：

<div style=" width:300px height:300pxmargin-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="cursor:pointerwidth:300pxheight: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:100pxheight: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代码：

<style type="text/css">

.div1 { font-size: 14px}

.div1:hover { font-size: 16px}

</style>

<div class="div1">

<a href="">测试文字</a>

</div|>

把这个代码放到html文件里运行就可以了

有什么问题再追问

---