- ห้องทดลองใต้หลังคา -

ลำดับตอนที่ #1 : โค้ดเลื่อนภาพมีข้อความ

<style type="text/css"> 

#side{

margin-center-1px;

width:ใส่ขนาดความสูงpx;

height:ใส่ขนาดความกว้างpx;

overflow:hidden;}

 

#text

{text-align:center;

width:ใส่ขนาดความกว้างเหมือนด้านบนpx;

height:ใส่ขนาดความสูงเหมือนด้านบนpx;

padding:5px;

overflow:auto;

color:#363636;

background-color:#fff;}

 

#picture

{margin-left:-280px;

width:ใส่ความกว้างเหมือนด้านบนpx;

height:ความสูงเหมือนด้านบนpx;

overflow:hidden;

-webkit-transition: opacity 0.9s linear;

-webkit-transition: all 0.9s ease-in-out;

-moz-transition: all 0.9s ease-in-out;

-o-transition: all 0.9s ease-in-out;}

 

#side:hover #picture

{margin-left:-550px;}

 

</style>

 

<table id="side" border="0" cellpadding="0" cellspacing="0" ><tr>

<td><div id="text">

พิมพ์ข้อความใส่ลงไปเลย</div>

</td>

<td><div id="picture"><img src="ใส่ Url รูปภาพนะ"></div></td>

</tr></table>


อธิบาย

ความกว้าง/ความสูงของรูป

#picture

{margin-left:-280px;
= ปรับให้มากกว่าความกว้างของรูป 5px
   left ตัวนี้ไม่ต้องปรับ

#side:hover #picture

{margin-left:-550px;}

= left :ด้านซ้าย

   right :ด้านขวา

   center :ตรงกลาง

   top :ด้านบน

   bottom :ด้านล่าง
= ปรับว่าจะให้รูปเลื่อนไปทางไหน

= ให้รูปเลื่อนเท่าไร

ใส่ Url รูปภาพ
= เลือกรูปที่ต้องการ คลิกขวา คัดลอก url รูปภาพ
หรือ คลิกขวาเปิดแท็บใหม่ คัดลอกลิ้งค์ด้านบน





 

©Wings  ANGLE!