<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>enlarge image by num</title>
<style type="text/css">
* {margin:0;padding:0}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){
$('.imgx').hover(function(){
var w = 200;
var h = 220;
var d = 600;//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>
</head>
<body>
<div style="width:500px;height:350px;padding:100px;border:solid green 1px;">
<?php foreach(range(1,117) as $i):?>
<img src="http://www.google.com/friendconnect/scs/images/NoPictureDark32.jpg" class="imgx" />
<?php endforeach;?>
</div>
</body>
</html>
วันเสาร์ที่ 25 ธันวาคม พ.ศ. 2553
jquery enlarge image by num
สมัครสมาชิก:
ส่งความคิดเห็น (Atom)
ขอบคุณครับ
ตอบลบ