9
Có cách nào, sử dụng Jquery để phát triển và sau đó thu nhỏ hình ảnh (với hoạt ảnh để trông mượt mà) khi di chuột mà không ảnh hưởng đến bố cục quá nhiều (tôi cho rằng phần đệm sẽ co lại và sau đó tăng lên).Có cách nào để phát triển/thu nhỏ hình ảnh khi di chuột bằng Jquery không?
Với một chút lộn xộn, tôi cuối cùng đã đưa ra giải pháp, nhờ tất cả những người đã giúp đỡ.
<html>
<head>
<style type="text/css">
.growImage {position:relative;width:80%;left:15px;top:15px}
.growDiv { left: 100px; top: 100px;width:150px;height:150px;position:relative }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>
<body>
<div class="growDiv">
<img class="growImage" src="image.jpg" alt="my image">
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.growImage').mouseover(function(){
//moving the div left a bit is completely optional
//but should have the effect of growing the image from the middle.
$(this).stop().animate({"width": "100%","left":"0px","top":"0px"}, 400,'swing');
}).mouseout(function(){
$(this).stop().animate({"width": "80%","left":"15px","top":"15px"}, 200,'swing');
});;
});
</script>
</body></html>
bạn quên thêm dấu ngoặc kép. điều này phải là "chiều rộng" và "400px", v.v. –