Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 108,562

HOME > PHP > PHP Forum > เกี่ยวกับscriptที่ขยายรูปเมื่อนำเม้าส์ไปชี้จะทำยังไงให้ภาพมันขยายขึ้นมาอยู่ตรงกลางจออ่ะครับ



 

เกี่ยวกับscriptที่ขยายรูปเมื่อนำเม้าส์ไปชี้จะทำยังไงให้ภาพมันขยายขึ้นมาอยู่ตรงกลางจออ่ะครับ

 



Topic : 125330



โพสกระทู้ ( 0 )
บทความ ( 0 )



สถานะออฟไลน์




อยากทำให้รูปมันขยายขึ้นมาอยู่ตรงกลางจออ่ะครับ หรือ กลางฟอร์มก็ได้
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







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-11-10 23:36:19 By : siwatboss View : 484 Reply : 2
 

 

No. 1



โพสกระทู้ ( 5,104 )
บทความ ( 4 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


1. http://fancybox.net/
2. http://getbootstrap.com/javascript/#modals






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-11-11 10:57:34 By : apisitp
 


 

No. 2

Guest


ลองเล่นดูครับ

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
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : เกี่ยวกับscriptที่ขยายรูปเมื่อนำเม้าส์ไปชี้จะทำยังไงให้ภาพมันขยายขึ้นมาอยู่ตรงกลางจออ่ะครับ
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: Voake, Comcube, รับทำเว็บไซต์ รับเขียนโปรแกรม , pangpond.com , pangpond.co.th , สำนักงานบัญชี.com , รถมือสอง

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2021 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่