อันนี้ พอเราเอาเม้าไปชีรุปมันจะขยายครับ ถ้าปรกติมันก็ขนาดที่เราตั้งไว้แต่ต้น
<script>
$('.imgx').hover(function(){
var w = 200; //กำหนดความกว้างพอเราเอาเม้าไปชี้
var h = 200; //กำหนดความสูงพอเราเอาเม้าไปชี้
var d = 700;//duration
var imgx = $(this);
$('.imgy').remove();
var imgy = $('<img class="imgy" src="' $(this).attr('src') '"/>').appendTo('body');
imgy.css({
position: 'absolute',
left: imgx.offset().left,
top: imgx.offset().top,
width: imgx.width(),
height: imgx.height()
}).mouseout(function(){
$('.imgy').remove();
}).click(function(){
$('.imgy').remove();
});
imgy.animate({
left: imgx.offset().left - (w/2),
top: imgx.offset().top - (h/2),
width: w 'px',
height: h 'px'
},d);
},function(){});
</script>
เรียกใช้
<img src="ลิ้งรูป" width="50" height="50" class="imgx">
**อันนี้ผมก็ก็อปมาไม่รู้เอามาจากไหนนานแล้ว
พัฒนาเว็บไซต์
