首先这是一张图片在悬停时放大也就是改变大小(宽，高)实现的。
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)
})
})
<!DOCTYPE html><head>
<script>
window.onload = function(){
var img = document.getElementById("imgTest")
if (document.addEventListener){
img.addEventListener("mouseover",doMouseover,false)
img.addEventListener("mouseout",doMouseout,false)
}
else if(document.attachEvent){
img.attachEvent("mouseover",doMouseover)
img.attachEvent("mouseout",doMouseout)
}
else{
img.onmouseover = doMouseover
img.onmouseout = doMouseout
}
}
function doMouseover(){
this.width = this.width * 1.5
this.height = this.height * 1.5
}
function doMouseout(){
this.width = this.width / 1.5
this.height = this.height / 1.5
}
</script>
</head>
<body>
<img id = "imgTest" src = "img/barcode.jpg"/>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）