ThaiSEOBoard.com

พัฒนาเว็บไซต์ => Programming => ข้อความที่เริ่มโดย: fogza ที่ 26 มิถุนายน 2011, 01:35:08



หัวข้อ: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: fogza ที่ 26 มิถุนายน 2011, 01:35:08
คลิ๊ก (http://howhost.com/th/%E0%B9%80%E0%B8%A7%E0%B9%87%E0%B8%9A%E0%B9%82%E0%B8%AE%E0%B8%AA%E0%B8%95%E0%B8%B4%E0%B9%89%E0%B8%87/%E0%B8%9F%E0%B8%A3%E0%B8%B5%E0%B9%82%E0%B8%AE%E0%B8%AA%E0%B8%95%E0%B8%B4%E0%B9%89%E0%B8%87)
เลื่องดูล่างสุดนะครับ ที่เป็นคอลั่มท้ายสุด ไม่ทราบว่าใช้ poproty ไหนของ css ครับ เวลา hover, visite แล้วมันดูนุ่มนวลดี ขอคำแนะนำด้วยครับน่าลองมากๆ  :wanwan003:


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: sakang ที่ 26 มิถุนายน 2011, 01:59:17
jquery ทำได้ครับ hover ที่ li แล้วให้ + css left ตามกำหนด พอไม่ได้ hover ก็เอา left ลดตามค่าที่ + ไป
 :wanwan017:


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: ~SolariS~ ที่ 26 มิถุนายน 2011, 04:30:20
css3 รึเปล่าครับ เหมือนจะเคยเห็นแว๊บๆ  :-[


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: bonshington ที่ 26 มิถุนายน 2011, 09:29:59
$().mouseenter(fnction(){
  $(this).animate("padding-left", "+10px");
}).mouseleave(function(){
  $(this).animate("padding-left", "-10px");
});

ในเวปทำไม่ถูกซะทีเดียว เค้าลืม clear animate queue เวลาเอาเม้าลากรัวๆ animate มันจะซ้ำ และแสดงผลไม่ทัน


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: cpengineer ที่ 26 มิถุนายน 2011, 09:34:54
javascript แหงๆ ครับ
แต่เดี๋ยวนี้ css ก็น่าจะทำได้แล้วนะ


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครั
เริ่มหัวข้อโดย: Taurusz ที่ 26 มิถุนายน 2011, 11:22:12
เป็น 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 ขณะเมาส์เหนือ ล่างขณะเมาส์ออก
บริเวณสีน้ำเงินคือความเร็วในการเคลื่อนไหว ยิ่งเยอะยิ่งช้า


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: cpengineer ที่ 26 มิถุนายน 2011, 14:28:33
มีน้ำใจ +1 ให้ท่านด้านบนครับ
 :wanwan003:


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: kenessar ที่ 27 มิถุนายน 2011, 02:26:00
หลักๆก็ 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 ไม่ได้ครับ


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: fogza ที่ 27 มิถุนายน 2011, 19:07:24
หลักๆก็ 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 อยู่ มีของใหม่ๆ มาให้เล่นเยอะเลย :wanwan019:

เป็น 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 กระผมยังไม่ได้ศึกษาเลยครับ  :wanwan012:
ขอบคุณทุกท่านครับ น้ำใจงานซะเหลือเกิน เดี๋ยวจะแวะเวียน  1 ให้น้า  :wanwan019: :wanwan017:


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: Taurusz ที่ 27 มิถุนายน 2011, 20:06:28
ใช้ได้เลยครับ
แค่เรียกใช้ไลบารี่ jquery และก็เปลี่ยนชื่อ id ให้ตรงกับของคุณ
แสดงผลเหมือนกับตัวอย่างครับ ผมลองกับ jquery 1.3.2
ไม่มีอาการที่เอามาลากรั่วๆแล้วทำเกินครับ
ความเร็วในการเคลื่อนที่ก็ตามที่ผมได้บอกครับ


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: fogza ที่ 27 มิถุนายน 2011, 21:16:15
ขอบคุณครับ คงต้องโหลด jquery มาก่อน แล้วเรียกใช้ไลบารี่ใช่ไหม๋ครับ?
ปล. ผมซื้อหนังสือ jquery มาแต่ยังไม่มีเวลาศึกษาเลย  :'(


หัวข้อ: Re: [Css] มี poproty ใหม่สำหรับ css หรอครับ ช่วยดูให้ทีครับ
เริ่มหัวข้อโดย: TonHaDy ที่ 27 มิถุนายน 2011, 22:54:07
หลักๆก็ 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 ไม่ได้ครับ

ขอบคุนมากครับ  :wanwan017: