หลักๆก็ jQuery ครับ แต่ CSS3 ก็ใช้ได้แล้ว (ยกเว้นไออีต่ำกว่า 9 นะครับ)
li:hover {
-moz-transform: translate( 10px, 0 );
-webkit-transform: translate( 10px, 0 );
-o-transform: translate( 10px, 0 );
transform: translate( 10px, 0 );
}
อยู่ในหมวด transform ครับ ย่อ/ขยาย , ย้ายตำแหน่ง , หมุน , บิด ได้ครับ
แต่อย่างว่า ใช้กับ IE ต่ำกว่า 9 ไม่ได้ครับ
ครับ ผมกำลังศึกษา css3 อยู่ มีของใหม่ๆ มาให้เล่นเยอะเลย
เป็น jQuery ครับ
ขอเสนออีกวิธีใช้ได้ดีเหมือนกันครับ
ต้องมีไฟล์ไลบารี่ของ jquery ก่อนนะครับ
แล้วก็นำ code ล่างนี้ไปใส่ระหว่าง tag <script ก็ได้ หรือแยกเป็น อีกไฟล์.js ก็ได้ครับ
$(document).ready(function(){
$('.caterogies ul li a').hover(function() { //ขณะเมาส์บนอยู่วัตถุ
$(this).animate({ paddingLeft: '18px'}, 100);
}, function() { //ขณะเมาส์ออกนอกวัตถุ
$(this).animate({ paddingLeft: '15px'}, 100);
});
});
บริเวณตัวสีเขียวต้องเปลี่ยนเป็น ID หรือ Class ที่คุณกำหนดไว้
บริเวณสีสีแดงคือจำนวน padding ขณะเมาส์เหนือ ล่างขณะเมาส์ออก
บริเวณสีน้ำเงินคือความเร็วในการเคลื่อนไหว ยิ่งเยอะยิ่งช้า
โค้ดนี้คือใช้ได้เลยใช่ไหม๋ครับ แล้วการแสดงผลแสดงผลเหมือนกันไหม๋ครับ พอจะมีตัวอย่างไหม๋ครับ?
$().mouseenter(fnction(){
$(this).animate("padding-left", " 10px");
}).mouseleave(function(){
$(this).animate("padding-left", "-10px");
});
ในเวปทำไม่ถูกซะทีเดียว เค้าลืม clear animate queue เวลาเอาเม้าลากรัวๆ animate มันจะซ้ำ และแสดงผลไม่ทัน
ขอแบบฉบับเต็มได้ไหม๋ครับ เรื่อง javascript หรือ JQuery กระผมยังไม่ได้ศึกษาเลยครับ
ขอบคุณทุกท่านครับ น้ำใจงานซะเหลือเกิน เดี๋ยวจะแวะเวียน 1 ให้น้า
พัฒนาเว็บไซต์
