例如:
body {
zoom: 3
-moz-transform: scale(3)
-moz-transform-origin: 0 0
}
把整个body放大三倍,缩小同理,改成比1小的数字即可
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)
})
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)