|
 |
| |
เกี่ยวกับscriptที่ขยายรูปเมื่อนำเม้าส์ไปชี้จะทำยังไงให้ภาพมันขยายขึ้นมาอยู่ตรงกลางจออ่ะครับ |
| |
 |
|
|
 |
 |
|
อยากทำให้รูปมันขยายขึ้นมาอยู่ตรงกลางจออ่ะครับ หรือ กลางฟอร์มก็ได้
Code (PHP)
<!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>
Tag : PHP
|
|
|
 |
 |
 |
 |
| Date :
2016-11-10 23:36:19 |
By :
siwatboss |
View :
713 |
Reply :
2 |
|
 |
 |
 |
 |
|
|
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ลองเล่นดูครับ
Code (PHP)
<!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 box_w = $("#box").innerWidth();
var box_h = $("#box").innerHeight();
var w = 200;
var h = 220;
var img_h = (box_h/2)-110;
var img_w = (box_w/2)-100;
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: img_w,
top: img_h,
width: w+'px',
height: h+'px'
},d);
},function(){});
});
//]]>
</script>
</head>
<body>
500 w=250 + 100 = 350
<br/>
350 h=175 + 110 = 185
<div style="width:500px;height:350px;padding:100px;border:solid green 1px;" id="box">
<?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>
|
| |
|
|
| |
| Date :
2016-11-11 11:14:55 |
By :
banditt |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 03
|
